Variables & Datatypes - Zero to Master Javascript Series

Hello Friends 👋,
Next up in our Zero to Master Javascript series is Variables & Datatypes. Let's dive right in!

Variables

What are Variables?

A variable is a container that stores a value, so you can reference and use it later in the program. Variables are not the value in themselves, they are simply a reference that houses the real value, technically, you can view a variable as a space in the computer memory that has an address and contains a particular value.

There are two standard ways to declare a variable in Javascript, these includes:

1. Let
2. Const

Let's talk about these two extensively.

Variable Declaration

As previously said, there are two standard ways in which variables are declared in Javascript, this includes Let & Const.

Declaration using Let

There are a number of properties associated with variables declared using let keyword, these include the following.

1. Variables can be assigned with new values when declared with Let. For instance,

1. let username = "dami_alagbala";
2. console.log(username);

On line 1, we declared a variable called username using the let keyword and on line 2, we printed it out to the console. If you open your browser's console, you should find the value of username in there, in our case "dami_alagbala".
So to prove our first point, we'll reassign another value to the variable username

3. username = "John Doe"
4. console.log(username);

On line 3, we assigned another value to the variable username, printed it out to the console on line 4, we should see "John Doe" and we can keep changing its value forever. This is made possible because the variable was declared using let keyword.

1. Variables can be declared, then subsequently initialized. The first question that pops into mind is what is the difference between declaration and initialization of a variable? Declaration of a variable simply means allocating space in the computer memory, prepared to house or contain a value, hence during the declaration of variables, we are simply bringing the variable into existence, not necessarily assigning a value to it whereas Initialization simply is the first assignment of value made to a variable.

Having understood this, declaration of a variable with the let keyword allows for declaration first, and then initialization later, now I'm sure you understand what I mean. Some code examples:

let email;  // this is called declaration
email = "johndoe@zioncodes.com"  // initialization

This is permissible because we declared the variable email with let.

Declaration using Const

Let's consider the features of const.

1. Variables declared using const cannot be re-assigned with new values after its first initialization. This means, immediately we assign a value to a variable declared using const, we cannot change the value of the variable For instance,

1. const PI = 3.142;
2. console.log(PI);

On line 1, we declared a variable called PI using the const keyword and on line 2, we printed it out to the console. If you open your browser's console, you should find the value of PI in there, in our case 3.142.
So to prove our first point, we'll try reassigning another value to the variable PI

3. PI = 125;
4. console.log(PI);

On line 3, we assigned another value to the variable username, printed it out to the console on line 4, we should see an error statement, this simply means it's impossible to reassign new values once a variable declared with const has been declared.

1. Variables must be initialized at declaration time. We've extensively looked at the difference between Declaration & Initialization, anyways here's a refresher.

Declaration of a variable simply means allocating space in the computer memory, prepared to house or contain a value, hence during the declaration of variables, we are simply bringing the variable into existence, not necessarily assigning a value to it whereas Initialization simply is the first assignment of value made to a variable.

When declaring a variable with const, it is required to have initialization done at the same time, on the same line.

Some code examples:

// this will fail
const PI;
PI = 3.142;

//this will pass
const PI = 3.142;

When should I use what?

Making inference from all we've learnt above, I think it's pretty clear on when to use either of these declaration keywords, but to further strengthen the point,

Declare your variable using the let keyword when you want to be able to assign new values to the variable you're declaring, otherwise declare with const.

Where does Var come in?

Prior to the ES6 or ES2015 updates made to Javascript, declaration of variables was done using var and it had some problems along the way, one of which was Scoping. This will be extensively treated on another series, the most important thing that you should know is that declaration of variables should be done using either let or const, depending on your use case.

Data Types

Variables in Javascript do not have any type automatically attached, it's an Untyped language. Javascript basically uses inference to decide on what data type is attached to the variable.

In Javascript, we've two major types, these includes

1. Primitive types
2. Reference types

Primitive Types

Primitive types are the most basic types in Javascript and they are not mutable i.e. they cannot be altered. These types include:

1. Number

These include any form of number from negative to positive. e.g 28, -10.45

2. String

Strings are useful for holding data that can be represented in text form and they are represented by a sequence of characters wrapped within a double apostrophe ("").

3. Booleans

These are simply your typical true and false values.

4. Special types

i. Null
ii. Undefined These types are basically used to depict an empty variable in Javascript.

Reference Types

These types include:

1. Object

An object in javascript is a data structure used to store related properties.
For instance, part of the property of a Person can include a name, age, and maybe country. Instead of storing this information in individual variables, we can have them all stored up within a variable called Object.
An object is declared using Curly braces {} and each property with an object is represented by a key-value pair, let's consider examples

let Person = {
      username: "Doc Christy",
      age: 55,
      country: "Nigeria"
}

Notice that there are multiple things happening in the above example, we're declaring the Person object and we're at the same time initializing the object with variables.
We can have these processes split in this fashion:

//first we declare the object
let Person = {};

//secondly we assign properties to it
Person.username = "Doc Christy";
Person.age = 55;
Person.country = "Nigeria";

If you do a console.log(Person), you'll see the object Person printed out containing all the properties we've assigned to it.

Notice that there are two main operations you can do with an object, you can attach a property to an object & assign a value to it, and you can also access a properties value from an Object, both operations can be done using the Dot Notation and Bracket Notation (I'll create a separate post dealing extensively with Object for the sake of brevity).

2. Array

An array in Javascript is a data structure used to store a list of data, this can be numbers, strings, objects e.t.c. In contrast to object accessibility and assignment pattern, arrays use an index that starts from zero, and it is declared by square brackets [].

let shoppingList = ["Coffee", "Pasta", "Eggs"]; 
console.log(shoppingList); // ["Coffee", "Pasta", "Eggs"]

We can also declare the variable shoppingList first, and then assign a list of values to it

let shoppingList = [];

shoppingList[0] = "Coffee";
shoppingList[1] = "Pasta";
shoppingList[2] = "Eggs";

console.log(shoppingList);  // *["Coffee", "Pasta", "Eggs"]*

If all of these looks very strange, don't worry 🙂, we'll be diving deep into Reference types deeply in the next series and you'll understand them better.

3. Function

A function is the smallest reasonable unit of a program aimed at performing one task or the other, usually a single task.

You've gone through a lot already, so I'll save you the details of functions until the next series.

That's it for this series friends 🙂
Leave comments for any questions and nice reactions if you've learnt a lot.

Upcoming series: Objects, Arrays & Function See you in the next series 😉