Different Variables and Datatypes in JavaScript

Variables store data types. JavaScript has different types of variables which are confusing on when to use for some developers and they are the let, const and var keywords. JavaScript also has various data types which are arrays, functions, strings, numbers, booleans and others. In this article, we will understand what they are, when and how to use these data types and variables using  good code examples.

Values are stored in variables. Variables are comparable to containers used to store items. Just as items are stored in a container, or even a box, values or data are stored in variables. To do this, you simply assign them to said variables.

We use the assignment operator to assign these values. Let us consider the assignment of a value to a variable. We begin by using the variable keyword ‘var’, then, we give the variable a specific name, next we use the assignment operator, and finally, we place the value.

var values = "I am the stored value";

In the preceding example, the variable has the var keyword and it has the name ‘values.’ Additionally, the value contained in the variable is “I am the stored value”.

So how do we access the stored value? We simply use JavaScript commands to access the stored variable. We can either use the console.log command to print it into the console. 

var value = "I am the stored value";
console.log(value);

Or we use the document.write method to print it into the HTML document.

var value = "I am the stored value";
document.write(value)

There are several types of keywords used to declare variables in JavaScript, these are:

1. The keyword var
2. The keyword const
3. The keyword let

The Var Keyword

When we need to access variables declared inside a block of code from outside the block, we use the var keyword because it gives us that access to the variable. For example:

var value = "first value";
value = "second value";
document.write(value)

Looking at the example above, initially we assigned the first value to a variable. Later on, we reassigned a second value to that same variable. This automatically changes the value contained in that variable to the second assigned value. This is possible because of the var keyword used to declare the variable.

Different values can be assigned and reassigned to a specific variable declared with the var keyword. Variables declared within a functional scope, on the other hand, are not accessible outside of the functional scope.

Prior to the introduction of the let and const keywords in the Es6 standard, the var keyword was the only keyword we could use in declaring variables. 

The Const Keyword

It was added in the Es6 standard. The keyword const stands for constant. We cannot access any variable declared with the const keyword outside the block of code.

The const variable is very strict. It does not permit access to values outside a block of code, nor does it permit access to values from functional scope. It is so strict that it does not allow us to reassign values  to a specific variable that has its own value.

Consider the following example:

const value = "first value";
value = "second value"
Console.log(value);

This will print out an error message because we can’t reassign values to variables using the const keyword.

The Let Keyword

This keyword was also provided in the Es6 standard. We cannot access a variable declared with the let keyword outside of the block of code.

The let keyword is also strict, but not as strict as the const keyword. It does not permit access to declared values outside of a block of code, nor does it permit access to values from functional scope. It does, however, allow us to reassign values to variables.

Here is an example:

let value = "I am a value";
value = "I can be reassigned";
console.log(value);

We understand how variables work. Now, let’s look at what JavaScript variables contain. As previously stated, values or data types are stored in variables. These data types are classified as primitive or non-primitive.

Primitive Data Types

Strings, numbers, booleans, null, and undefined are all primitive data types.

What exactly are strings? These are values that are placed between single quotes, double quotes, or backticks. Here are several examples of possible strings:

var stringOne = 'i am a string placed in between single quotation marks';
console.log(stringOne);
var stringTwo = " i am a string placed between double quotation marks";
console.log(stringTwo);
var stringThree = `i am a string placed in backticks`;
console.log(stringThree)

Number data types are integers, exponentials or even floating points. We do not place them in between quotation marks. Here are few examples showing different examples of number data types:

//An example of an integer
var numOne = 5;
console.log(numOne);
//An example of floating points
var numTwo = 5.765;
console.log(numTwo)

Boolean is a data type that returns true and false values, just like having a yes and a no option. In the example below, the bool will return true because 5 is actually less than 10.

let bool = 5 < 10;
console.log(bool)//true

In this second example on boolean below, 10 is less than 5 so the false value will be returned. 

let bool = 10 < 5;
console.log(bool); //false

Null is a datatype in JavaScript that represents empty values. It is an object that is assigned to a variable as a representation of no value. Here is an example:

var value = null;
console.log(value);

Undefined is the last non-primitive data type we will look at in this article. When we declare a variable and it has no value assigned to it yet, we say it is undefined. Look at the lines of code below:

var value;
console.log(value);// This will print out undefined as the value

Non-Primitive Data Types

Object is a non-primitive data type in JavaScript. Arrays and functions are part of ‘object’ data type in JavaScript. In this section we will treat objects, arrays, and functions individually, and see how we can declare them with some examples.

Objects have a key and a value and are enclosed in a curly bracket.

Here is an example of an object:

var obj = { name: "faith",
            age: 70,
            online: true
        }
console.log(obj);

In the above example, the object Obj contained three distinct primitive data types. The value of the first key, name, is a string named faith, and the value of the second key, age, is a number datatype. In contrast, a boolean with a true value represents the third data type.

What is an array? It is a list of data or values enclosed in square brackets. Arrays can contain data of the same or different types. Their index references their values. To understand what an array is, let’s make one.

let num = [1,2,3];
console.log(num);

This prints out all the values in the array into the console.

We also used the array’s indexes to access the values individually in the example below:

let num = [36,21,13];
console.log(num[0]);

Since we count from zero in programming, we access the first number on the array list as index 0, and the second number on the list becomes index 1. That is, 36 which is the first number on the list in the above example  is index 0, while index 1 is the second number on the list which is 21 and so on. 

To check if arrays are classified under the object data type, we use the typeof operator. Here is an example:

let num = [1,2,3];
console.log(num);//This will return the numbers in the list
typeof(num);This will return the object data type

Going forward, let us talk about functions. Functions can have properties and methods just like any other object; they are first-class objects. We can also call them, which sets them apart from other objects.

Functions are the basic building blocks of JavaScript. They are code blocks that perform a specific task. Functions are executed only when called.

We occasionally require similar actions in multiple locations. Functions solve this. They allow us to call codes as many times as we want. Consider the following examples:

function func(name, age){
    document.write('My name is'+ name +'and i am'+ age + 'years old');
}
 
func('faith', 29);

We have just declared a function in the example above. First we used the keyword function, and next we gave the function a name which is func. Then we passed in some parameters inside the provided parentheses, name and age. We opened a curly bracket, passed in some commands and closed it using the closing curly bracket. Finally we executed the command passed in the blocks of code by calling the function func. We also passed in the needed value in the parentheses provided while calling the function.

JavaScript provides built-in functions which are prompt, confirm, and alert. Here are some examples:

alert('i am an alert!');

The alert method passes information to the user. This will pop up on the screen showing a box with the text passed in.

if (confirm("click a button!")) {
    text = "You pressed the ok button!";
  } else {
    text = "You pressed Cancel button!";
  }

You can use the confirm box to verify information.

Conclusion

We talked about the very basics of JavaScript variables and datatypes every beginner should know when starting out with JavaScript. Variables and datatypes are the building of  blocks of JavaScript. Let, const and var are all different keywords you can use to declare variables. If you want to learn more about JavaScript, take a look at this article on JavaScript DOM manipulations. Take up the code examples, practice more and discover the power of JavaScript. Happy coding!