DEV Community

Karen Molina
Karen Molina

Posted on • Updated on

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"
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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.

Discussion (3)

Collapse
gfierro profile image
Greg Fierro

Hi Karen ! Fantastic article. Keep up the good work in contributing your knowledge of JS.
I have to agree though with Derrick's comment about proof reading articles before submitting them for publication. You are not alone! I have noticed a large percentage of articles her in dev.to need major redactions. This my be due to English not being the author's primary language. I totally understand this. So I volunteer to proof read any future articles you might want to contribute. :-)

Collapse
drex7 profile image
Derrick Asamoah

Great article, but it'd be better if you let someone proofread your articles before posting it.

Collapse
voidrizoma profile image
Karen Molina Author

Hi Derrick!
Thanks for the feedback! :D