the difference between var, let, and const
var, let, and const are ways to declare variables.
It is important to use these declarations the right way because they were made to benefit the developer and make code easier to understand.
they are declared and defined like this
JavaScript
// it is block scoped
// should only be used for stuff that is constant
// can not be reassign
const name = "Brian";
// it is block scoped
// can be assign and reassign
let age = 18;
// it is function scoped
// can be assign and reassign
var state = "California"
first let’s talk about scope in JavaScript
Scope is the way JavaScript finds declarations.
There are Block scope and Function scope.
what is Block scope
A Block scope is defined with curly braces.
Using var in a Block scope doesn’t prevent the variables from being accessible outside it.
Using const or let in a Block scope prevents the variables from being accessible outside it.
JavaScript
{
var varDeclaration = "I am a var in a block scope";
console.log(varDeclaration); // I am a var in a block scope
}
// varDeclaration is accessible outside the block scope
console.log(varDeclaration); // I am a var in a block scope
{
let letDeclaration = "I am let in a block scoped";
console.log(letDeclaration); // I am let in a block scoped
}
console.log(letDeclaration);
// Uncaught ReferenceError: letDeclaration is not defined
{
const constDeclaration = "I am a const in a block scoped";
console.log(constDeclaration); // I am a const in a block scoped
}
console.log(constDeclaration);
// Uncaught ReferenceError: constDeclaration is not defined
Anything with a opening curly braces and closing curly brace creates a Block scopes.
Examples of Block scopes are if else statements and for loops.
What is Function Scope
Function scope is anything inside a function. Everything declared inside a function isn’t accessible outside it.
JavaScript
const sayApples = "Apples from global scope";
function sayFruit () {
let sayApples = "Apples from sayFruit()";
const sayBananas = "Bananas from sayFruit()";
var sayOranges = "Oranges from sayFruit()";
console.log(sayApples);
}
sayFruit(); // Apples from sayFruit()
console.log(sayApples); // Apples from global scope
console.log(sayBananas);
// Uncaught ReferenceError: sayBananas is not defined
console.log(sayOranges);
// Uncaught ReferenceError: sayOranges is not defined
When executing sayFruit() “Apples from sayFruit()” is printed instead of “Apples from global scope” because the variable sayApples in the function is defined in the same scope as where console.log() is executed.
When looking for variables it starts at where the variable is referenced and it goes up scope until it reaches the global scope.
The significance of var
var can be redeclared and reassigned.
JavaScript
var fruit = "Orange";
fruit = "Apple";
var fruit = "Banana";
console.log(fruit); // Banana
var is hoisted and initialized to undefined.
JavaScript
console.log(hoisted); // undefined
var hoisted = "hi";
var doesn’t care about block scope.
If there is no var declaration JavaScript assumes you meant to make it a variable and puts it in the global scope.
JavaScript
if (true) {
var fruit = "Orange";
}
if (true) {
vegetable = "Carrot";
}
console.log(fruit); // Orange
console.log(vegetable) // Carrot
why var sucks
it pollutes the global scope.
JavaScript
for (var i = 0; i < 10; i++) {
// code
}
// i is on the global scope even though we don't need it
console.log(i); // 10
Allows variables to be redeclared.
JavaScript
var task = "be cool.";
if (true) {
var task = "be awesome.";
}
console.log(task) // be awesome.
The global scope version of the variable is changed.
The significance of let
let is usually the variable declaration that is used over var because it has better features than var does.
It can not be redeclared but can be redefined.
JavaScript
let favoriteJuice = "Orange juice";
favoriteJuice = "Apple juice";
console.log(favoriteJuice); // Apple juice
let favoriteJuice = "Cranberry juice";
// Uncaught SyntaxError: Identifier 'favoriteJuice' has already been declared
let is hoisted but not initialized.
JavaScript
console.log(hoisted);
// Uncaught ReferenceError: hoisted is not defined
let hoisted = "Hi I am hoisted but not initialized";
let uses block scope which means it can only be access in the scope it was defined in.
JavaScript
let favoriteFruit = "Oranges";
if (true) {
let favoriteFruit = "Bananas";
console.log(favoriteFruit); // Bananas
}
console.log(favoriteFruit); // Oranges
why use let over var
let doesn’t pollute the global scope.
JavaScript
for (let i = 0; i < 10; i++) {
// code
}
console.log(i)
// Uncaught ReferenceError: i is not defined
let is Block scope which means the problems we had with var doesn’t apply to let.
The significance of const
variables declared with const should hold values that are constant.
const cannot be redeclared or reassigned.
JavaScript
const isJavaScriptCool = true;
isJavaScriptCool = false;
// Uncaught TypeError: Assignment to constant variable.
const isJavaScriptCool = "maybe";
// Uncaught SyntaxError: Identifier 'isJavaScriptCool' has already been declared
const must be initialized when declared.
Just like let const is hoisted but not initialized.
JavaScript
console.log(hoisted);
// Uncaught ReferenceError: hoisted is not defined
const hoisted = "Hi I am hoisted but not initialized";
const variable declarations are block scoped like let
JavaScript
if (true) {
const areYouAwesome = true;
console.log(areYouAwesome); // true
}
console.log(areYouAwesome);
// Uncaught ReferenceError: areYouAwesome is not defined
const isn’t really constant
Some values can be changed with a const variable declaration.
values can be changed in objects.
const beanBurritoRecipe = {
tortilla: "flour",
bean: "pinto beans"
}
beanBurritoRecipe.tortilla = "corn";
console.log(beanBurritoRecipe)
// { "tortilla": "corn", "bean": "pinto beans" }
Add, modify, and remove elements from an array.
JavaScript
const numbers = [1, 2, 3];
numbers.pop();
console.log(numbers); // [1, 2]
numbers.push(5);
console.log(numbers); // [1, 2, 5]
numbers[1] = 10;
console.log(numbers); // [1, 10, 5]
summary of the differences
Most if not all the time use let and const.
-
let and var don’t have to be initialized when declared. const has to be initialized when declared.
-
var can be redefined and redeclared, let can be redefined but not redeclared, const can’t be redefined or redeclared.
-
var declarations are globally or function scoped while let and const are block scoped.
-
use const when wanting to declare a variable that shouldn’t change.