JavaScript — Variables

A guide to explaining how to work with variables in JavaScript

3 min readApr 8, 2021

In computer science, the simplest or most complex operation is based on operations using data. Variable are spaces where we can assign and store those data, before, during or after any operation. JavaScript considers eight different data types which are:

Primitives:

undefined: A variable without a value
null: An empty values
boolean: Can only have two values, true or false.
string: A series of characters
number: Any numbers, integers or decimals

Non-primitives:

object: Structure that can represent everything
symbol: Built-in object to return a unique primitive value
bigint: large integers with arbitrary precision

Variables by default can store distinct values at many times. Before use variables are required to declare it using the keyword let and then to give a name to this variable.

let colour;

We can further use the assignment operator =to store values into this variable at the declaration or any other moment after setting the variable.

colour = ‘orange’;

If the variable is set as a read-only variable using the keyword constthe value of this variable can not be replaced after the declaration. In this case, the variable should be initialized with some value at the declaration moment.

const age = 12;

Every declared variable without value is uninitialized variables receiving the undefined value. Any arithmetical operation on an undefined variable will result in a Not a Number NaNvalue. String concatenate with an undefinedvariable will get a literal string of undefined.

let juice = colour;

Use the camelCase pattern for multi-word named variables or functions are considered a best practice in JavaScript algorithms. It is recommended nominated words with lower case letters and only the first letter of the other words with the upper case letter.

let hairColor = ‘blonde’;

There is another keyword to declare variables in JavaScript called var. The difference between varand let is variables defined with the keyword varcan be overwritten without throwing errors meanwhile variables defined with letcan only be declared once.

let height = 170;
let height = 130;

Console:

Uncaught SyntaxError: Identifier 'height' has already been declared

Another difference between keywords varand letis the scope. Variables declared with the keyword varwill have global scope, which means after declared can be accessed in all the code, inside or outside a block code.

var box = [];
for ( var item = 0; item < 3; item++) {
   box.push(item);
}console.log('Box: ', box);
console.log('Item: ', item)

Console:

Box: [0, 1, 2]
Item: 3

However, the variable declared using the keyword let exists just inside the block where it was declared.

var box = [];
for ( let item = 0; item < 3; item++) {
   box.push(item);
}console.log(box);
console.log(item);

Console:

ReferenceError: item is not define

In JavaScript, there is a default behaviour called Hoisting. By hoisting, variables can be used before it has been declared because in run time the hoisting mechanism will store the functions in memory and declare the variables before running the functions, wheresoever the variables declarations will be into the scope. Here we reach an extra difference between the keywords letand var.

weightLoss = 100 - 80;console.log(`I have lost ${weightLoss} kg!`);var weightLoss;

Console:

I have lost 20 kg!

Declaring variables using the varkeyword after calling it works well because in run time the variable is declared and initialized before running the functions, meanwhile, using the let or constkeyword, in this case, will throw an error because the variable will be declared before running the functions but uninitialized. Uninitialized variables are not suitable to use.

weightLoss = 100 - 80;console.log(`I have lost ${weightLoss} kg!`);let weightLoss;

Console:

ReferenceError: weightLoss is not defined

References

ECMAScript® 2022 Language Specification

Edit description

tc39.es