Variables

Variables are used to store and accessing data within a program. They serve as containers for holding values, and each variable has a name that identifies it and a value that represents the data it holds.

Think of variables as a way to name a "slot" in computer memory used to hold data.

Variables are ubiquitous in programming regardless of programming language!

There are 3 main ways to declare data in Javascript: var, let and const.

Var

var x = 10;
var y = 'Hello';

• var was traditionally used in JavaScript for variable declaration before the introduction of let and const.
• ** Variables declared with var can have function scope or global scope, meaning they are accessible throughout the function in which they are declared, or globally if declared outside of any function. (more on this in Scope notes! ✨)

mini intro on scope

// global scope ✨
var x = 10;
var y = 'Hello';

function exampleFunction() {
  // function scope ✨
  var z = 5;
}

• ** Variables declared with var can be re-declared and updated within the same scope without any errors.

// Initial declaration and assignment
var x = 10;
console.log(x); // Output: 10

// Re-declaration and update
var x = 20; // Re-declaration of variable x
console.log(x); // Output: 20

// Updating the value
x = 30; // Update the value of x
console.log(x); // Output: 30

to note: lines labeled ** is the difference between Var and Let which will be discussed later.

Let

let a = 10;

• let was introduced in ECMAScript 6 (ES6) and provides ** block-scoping.
• Variables declared with let are limited in scope to the block, statement, or expression in which they are defined.

var block scope

// block scope ✨
if (true) {
  var x = 10;
  console.log(x); // 10
}

console.log(x); // 10

let block scope

// block scope ✨
if (true) {
  let x = 10;
  console.log(x); // 10
}

console.log(x); // ERROR!!! ❗️

• ** Variables declared with let can be reassigned but not re-declared within the same scope.

to note: lines labeled ** is the difference between Var and Let which will be discussed later.

Const

• const also introduced in ES6, behaves similarly to let but with one key difference: variables declared with const must be assigned a value when they are declared, and this value cannot be changed afterwards.
• Variables declared with const have block-scoping like let.

What's the difference between Var and Let?

The main differences between var and let in JavaScript lie in their scoping rules and hoisting behavior.

Scoping Rules

• var: function-scoped or globally scoped
• let: block scoped

Hoisting for Variables

• Variables declared with var are hoisted to the top of their scope during the compilation phase, which means that they are accessible before they are declared. However, their initialization (assignment) is not hoisted.

console.log(x); // returns undefined
var x = 20;

• Variables declared with let are also hoisted to the top of their scope, but they are not initialized until the line of code where they are declared is reached during runtime. Accessing a let variable before its declaration results in a ReferenceError.

console.log(x); // ReferenceError ❗️
let x = 10;

Summary - key features

Feature	var	let	const
Introduced In	ECMAScript 1 (ES1)	ECMAScript 6 (ES6)	ECMAScript 6 (ES6)
Scope	Function or Global	Block	Block
Hoisting	Yes but initialized undefined if declaration is not reached	Yes but not initialized => cause ReferenceError	Yes but not declared and initialized => cause ReferenceError
Re-declaration	Allowed	Not Allowed	Not Allowed
Reassignment	Yes	Yes	No (Value cannot change)
Must be Initialized	No	No	Yes