Coding Interview: Variables, data types, scope and hoisting in JS

Hi!

Some of things we have to know about JS are: variables, data types, scope and hoisting. Why? 'Cause every time we use, transform and manipulate a lot of data. No matter if the data came from our services or the frontend.

Data Types

The Data types are important in every programming languages. In JS we have two classes of types: primitives and objects. Primitives contains different data types:

• Boolean: represent two logical values; true and false.
• Null: literal represent a null value.
• Undefined: A variable has not been assigned a value.
• Number: Any number
• BigInt: In JS we got two types of numbers, the BigInt means that we have to assign one exact value as: 2n ** 53n
• String: represent textual data. Example: "Hola olla"

Variables

A variable is a container for a data or value. In Javascript we have 3 ways to declare it:

• var
• let
• const

var

Before EcmaScript 6, we use only the keyword var to storage our values. But with only one way to declare variables, we got a problem, all the var variables can be redeclared and updated.

//var

var sayHello = "Hola olla"

console.log(sayHello) // "Hola olla"

var sayHello= "Hi!"

console.log(sayHello) // "Hi"

let

When ES6 arrived, the problem about updated the variables with var, has ended. Specially when we use variables inside curly brackets. So, ES6 introduce with let a new scope: the block scope.

//let 

let sayHello = "Hola olla"

console.log(sayHello) // "Hola olla"

sayHello = "Hi!"
console.log(sayHello) // "Hi"

let sayHello= "Hi!"

console.log(sayHello) // error: Identifier 'sayHello' has already been declared

const

Meanwhile let resolve the updated problem. Const resolve both problems. With const we can't updated or redeclared variables.

// const

const sayHello = "Hola olla"

console.log(sayHello) // "Hola olla"

sayHello = "Hi!" // error: Assignment to constant variable. 

const sayHello= "Hi!" // error: Identifier 'sayHello' has already been declared

Scope

Ok, let's talks about scope. The scope determines the visibility or accessibility of variables. We have 3 types of scope: 1) Global scope, 2) Function scope, 3) block scope. But I want to add the local scope and the module scope.

• Global scope: All the variables declared outside any function have global scope.

• Function scope: When we create any new functions, each function creates a new scope. That's mean, all the variables declared inside the function, don't be accesible from any other functions outside. Other way to recognize the functions scope can be as local scope. All variables declared within a functions, are local variables.

• Block scope

The block scope has been introduced in ES6, with let and const. That's means, every variables declared inside the curly brackets { }, can't be accessed in other scope.

• Module scope

When we create modules, any variables declared outside functions, can be considered as global variables, but no. Any variable declared inside the module just can be accessed inside that module, unless the module is explicitly exported.

Hoisting

Sometimes JS is weird. And hoisting can be part of that strange things. The hoisting is a behavior in any variable or function can be used before declare it. That happened more before ES6, when we use the keyword var.

After ES6, the hoisting is a default behavior of moving any declarations to the top of their scope. Remember, with let and const we have the block scope. So, any declaration is moved to the top.

Also, one more thing to know is, JS hoists the declarations but cannot initialized. For example, if we have a var declaration, this will be initialized with an undefined value as default.

I think hoisting is confused in the beginning, but, each time when JS has been compiled, all the declarations and functions are assigned in some memory space. So, the hoisting, move all declarations at top, to save that's declarations in the memory. Really, all the code stay how we wrote them.