Image of a cloud

Cloud Coding

Var let and const in JS

By: Tristan Pedersen

Var let and const in JS

let and const came out with ES6, they are used for variable declaration. let and const were made to fox some of the issues associated with the variable declaration var that was used before ES6. Scope is the current script or function that these variables are available for use. If the var variable is declared outside of a function it is globally scoped (this means it's available for scope in the whole window). When var declared inside of a function it is locally scoped also known as function scoped. (it is available and only can be accessed within that function.)

For example:

var greeting = "Hey, how are you?";
function greetMe() {
  var greet = "Hey, how are you doing today?";
}

var greeting is globally scoped, because it exists outside of the function. var greet is functionally scoped, so we can only access it within that function. variables declared with var can be redeclared and updated.

For example:

var greet = "Hey";
var greet = "Hey, how are you?";
greet = "This is the new greeting that would show";

Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their scope before code execution.

For example:

console.log(greet);
var greet = "say hello";

Would be interpreted by JavaScript as:

var greet;
console.log(greet);
greet = "say hello";

var variables are hoisted to the top of their scope and initialized with a value of undefined. The problem with var is you could easily change the value of the variable without meaning to, which could lead to many bugs.

var greet = "hey";
var times = 4;
if (times > 2) {
  var greet = "say hi instead";
}

A block is a chunk of code bounded by {}. let is block scoped, a variable declared in a block with let is only available for use within that block. let can be updated within it's scope, but it cannot be redeclared within it's scope.

let greet = "Hey";
greet = "Hi, how are you?";

Will work because you are redeclaring the let variable

let greet = "Hey";
let greet = "Hi, how are you?";

Will result in an error because you are trying to redeclare it.

If the same variable is defined in different scopes there will be no errors. Both instances will be treated as different variables, since they have different block scopes. let declarations are hoisted to the top, but not initialized. If you try to use a let variable before declaration, you'll get a RefferenceError.

Variables declared with const maintain constant values. const declarations are block scoped and they cannot be updated or redeclared. Every const value must be initialized at the time of declaration. Objects declared with const cannot be updated, the properties of the object can though. const declarations are hoisted to the top but not initialized.

const greet = {
    message: "say hello"
    times: 4
}

We cannot do this:

const greet = {
    message: "say hi to the user, instead"
    times: 4
}

We can do this:

greet.message = "say hi to the user, instead";

Summary:var declarations are globally scoped or function scoped while let and const are block scoped. var variables can be updated and redeclared within it's scope; let variables can be updated, but not redeclared; const variables can be neither updated or redeclared. They are all hoisted to the top of the scope but while var variables are initialized with undefined, let and const are not initialized. var and let can be declared without being initialized while const must be initialized during declaration.