JavaScript Variables and Data Types

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 ✌️ 😂

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

Javascript Info

Codeburst

I still remain your Celebrity Developer 🔥. You can reach out to me on Twitter.