JavaScript Variables and Data Types
Tags: variables, javascript, newbie, datatype
Published: 2020-03-05 23:47:40

# What are Variables
Variables are like containers or bucket that holds values. To break it into an even simpler relatable form, I will give an illustration. In your kitchen that are different jars or containers holding different items like seasoning cubes, salt, oil etc. These containers are variables which you can easily identify. So if your mom asks for salt you already know which container to bring. That is how variables in Javascript works.

Javascript is a *loosely* typed language which means you don't have to explicitly define the data type a variable should hold, unlike other programming languages.

In this tutorial, I will be using the ECMAScript 2015 (ES6) syntax as this is part of the newer standard.

Take a look.

    let person = "Saviour Essien";
    let age = 16;

Let me breakdown this code into tiny chunks starting from the left-hand side of the code. 
- The `let` keyword is what tells Javascript we are about to declare a variable 
- Then the identifier `person` is the name of the variable(container). 
- The assignment operator `=` like the name implies assigns the variable identifier `person` to the value.
- The `value` Saviour Essien is what is inside the variable(container).

Let me spoon feed your more by making my previous illustration more watery.

Your mother returns from the market with groceries, she calls out your name Ngozi, come and take this groceries to the kitchen. Automatically, you already know where to put each of the items she bought for easy access to you and others.

So it is safe to say your mother is the `programmer` then Ngozi is `Javascript`, the groceries are `values` then the container which each groceries item goes into is the `variable`. Lastly, the name on each container is the `identifier`. I don try :v: :joy:


Javascript variable identifiers must follow these rules.

- Name must start with letters (a-z)(A-Z), underscore(_) or dollar sign($).
- Number can be included but it must be after the first letter. e.g `item3`
- Javascript variables are case sensitive.`x` is different from `X`.



    let x = 25;
    let X = 12;
    console.log(x);  // 25
    console.log(X); // 12



There are two ways of declaring a variable in Javascript.
- Let
- Const also is known as Constant

For the most part, both `let` and const are the same the only difference they have is you can reassign a value to `let` while you *cannot* reassign a value to `const` because it will throw an error. 
**Note:** Use `let` to declare variables which value can change in the future but use `const` for values can won't change ever.




Javascript variables can take in any data type like string, number, object etc.

    const location = "Yenagoa"; // String
    let phone = 01234567;
    const cart = {orange: 6, type: "American Citrius"};
 

We will look at data types shortly in the next section. Each statement ends with a semicolon `;`. This `;` semicolon is telling Javascript that is the end of the statement. Although it is not compulsory to end your statement with a `;` semicolon. It is advisable for the sake of clean code.


### Single Line Variable Declaration
Variable can be declared in one line. It is shorter.

    let color = 'Red', shade = 'Dark, family = 'Tomatoe';

The declaration only takes one keyword which can be either `let` or `const` each new variable is declared after a comma `,`.



### Scoping 

In Javascript, there are two types of scopes. The `Local` and `Global` scope. The `let` and `const` are both `block` scope. This means they can only be accessed within the block statement it was been created in. Although they can also possess the local and global scope. 

Below is a simple example of a block statement.

     for(){
      // This is a block statement
    }

Going further let take a quick look at how the scoping works.

#### Global Scope
The global scope can be accessed from any function.

    const color = 'Yellow';

    function addColor() {
        return color;
    }

    console.log(addColor()); // Yellow


The above example returns 'Yellow' which was declared outside the function. This is what `Global` scoping does.


#### Local Scope
A local scope variable is only accessible within the block or function it was created in.


    const color = 'Yellow';

    function addColor() {
        //let color = 'Red';
        return color;
    }

    console.log(addColor()); // Red


In this example, the variable `color` declared inside the function takes precedence against the variable `color` declared outside the function. The `local` variable will always take **effect** against a `Global` variable.







# Data Types in Javascript
Our Javascript variable can hold any type of value. Helping the computer determine what type of value is, is why we have data types. Data types help the computer to operate on variables. Without data types, the computer will certainly be confused about what operation it should perform. Because Javascript is dynamically typed, it can automatically determine and assign a data type to a variable value. For example:

    let add = 16 + "16";

    console.log(add); //1616

Javascript can automatically identify that the first `16` is a number and the second `16` is a string. Normally, in Javascript numbers are identified because they don't have an opening and closing quotes **""** while strings have an opening and closing quotes **""**.


There are eight(8) data types available in Javascript.
Number
String
Boolean
Null
Undefined
Objects
Array


## NUMBER
Numbers are integers. They are the regular numbers we write every day.

Although numbers can be written with or without decimal like so;

    let number1 = 12345;
    let number2 = 23.009;

Also notice that numbers are written without quotes.

## STRING
Strings are letters or text. Strings must be written with opening and closing quotes, the quotes can either be double `""` or single `''`like so.

    let subject = "Javascript";
    let level = 'Beginner';


### BOOLEAN
Boolean only has two values which are `true` or `false`. It is more like saying `yes` or `no`. Boolean can be used to determine a condition in Javascript.

    let bigNumber = 6 < 2;
    console.log(bigNumber); // false

## NULL
Null means *nothing*. The value is doesn't exist.

    let amount = null;
    console.log(amount); // null


## Undefined
Undefined in Javascript means the value has not been assigned to a variable.

    let message;
    console.log(message); // undefined.

Noticed I didn't use the `=` to assign a value to the `message` variable. The `undefined` is useful when you wish to use a variable in the future but you are not sure of the value yet to be assigned to it. An example can be user input.


## OBJECTS
Object can store more than one data collections. Objects process more complexity.

     const items = {
      food: "Bole and Fish",
      price: 500,
      portion: 2,
      addSauce: true
    }

Objects hold `key: value` pair. The example above declares a variable called Items. Inside the curly braces `{}` are different pairs. Starting from the left-hand side we have the key `food` and the value `Bole and Fish`. Also, notice that objects can hold different data types like `string` `number` `boolean` as stated in the above example. 

Object is a bit broad. We will engage more on Object in the future.

## ARRAYS
Arrays fall under objects. An array can hold more than one data value, these values can be string, number, boolean. Arrays are written with an opening and closing square brackets **[]**.

    const phones = ["Samsung", "Iphone", "Nokia", "Tecno"];

    console.log(phones); //(5) ["Samsung", "Iphone", "Nokia", "Tecno"]



## The Typeof Operator
Typeof() operator can help us determine the type of Javascript value.

    const movie = "The Hustle";
    const  year = 2019;
    let interesting = true;
    let category = undefined;


    console.log(typeof(movie)) // string
    console.log(typeof(year)) // number
    console.log(typeof(interesting)) // boolean
    console.log(typeof(category)) // undefined



### Primitives
They are values that can only contain one data. They do not hold extra methods or properties just like Object does. *Primitives* are *immutable*, this means their value cannot be changed. The following are *primitives*.

- String
- Number
- Boolean
- Null
- Undefined


Thank you for reading through, I believe I have been able to break down some concepts that were confusing to you. Our next topic will be on *Javascript Syntax*.

### Recommended Resources

[Mozilla Developer Network - MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures "JavaScript data types and data structures")

[Javascript Info](https://javascript.info/types "Data types")

[Codeburst](https://codeburst.io/javascript-essentials-types-data-structures-3ac039f9877b "JavaScript Essentials: Types & Data Structures")


I still remain your Celebrity Developer :fire:. You can reach out to me on [Twitter](https://twitter.com/celebritydev "Celebrity Developer").