Working with Variables in JavaScript

Intro to JavaScript

Note

• JavaScript is a dynamically typed language, meaning that variables can hold values of any type without explicit declaration.

What Are Variables in JS?

---

• in JavaScript, variables are containers for storing data values .
• They allow you to name and reuse values (e.g., numbers, strings, booleans, objects) throughout your code.

Best Practices for Using Variables

---

Note

• Use let and const: Prefer let and const over var.
  • const should be used for variables whose values shouldn’t change, and let for variables that can be reassigned.
• Use meaningful names: Use descriptive variable names that make it clear what the variable holds.
• Avoid single-letter variable names unless in a limited scope (e.g., i for loop counters).
• Minimize global variables: Limit the use of global variables as they can lead to unexpected behavior and conflicts.
• Follow naming conventions: Use camelCase for variable names, starting with a lowercase letter. const variables that are constants should be in uppercase.

Declaring Variables

---

JavaScript offers three keywords for declaring variables: var, let, and const. Each has distinct behavior.

1. var (Legacy)

• The traditional way to declare variables. It has function scope or global scope if declared outside a function.
• Variables declared with var can be redeclared and reassigned.

Example: Declaring variables with var

var name = "Alex";
var name = "Sam"; // Redeclaration OK
name = "Jess";    // Reassignment OK
console.log(name); // "Jess"

javascript

• Issue: Hoisting (moved to top of scope) can lead to bugs.

console.log(x); // undefined (not an error!)
var x = 5;

javascript

2. let (Modern)

• Introduced in ECMAScript 6 (ES6, 2015).
• Block-scoped, can be reassigned but not redeclared in the same scope.
• let provides better control over variable scoping compared to var

Example: Declaring variables with let

let age = 25;
age = 26;         // OK
let age = 30;     // Error: Cannot redeclare
console.log(age); // 26

javascript

3. const (Modern)

• Also introduced in ES6, const is used to declare variables that cannot be reassigned or redeclared after their initial value has been set.
• const is block scoped.

Note

• Objects/arrays const variables hold can be mutated.

Example: Declaring variables with const

const pi = 3.14;
pi = 3.15;        // Error: Assignment to constant
const person = { name: "Alex" };
person.name = "Sam"; // OK (object mutation)
console.log(person.name); // "Sam"

javascript

Note

• Use let for variables that change.
• Use const for values that won’t be reassigned.
• Avoid var unless working with legacy code.

---

Variable Assignment

Variables are assigned values using the = operator.

• For const variables, the value must be assigned during declaration and cannot be reassigned afterward.

Example: Assigning value to a JS variable

let name = "Josée"; // Assign a string to 'name'
name = "Bob"; // Reassign the value of "Bob" to 'name'

javascript

Variable Scope

The scope of a variable determines where in the code the variable can be accessed.

Note

1. Global scope: A variable declared outside any function or block is in the global scope and can be accessed from anywhere in the code.

2. Function scope: Variables declared with var inside a function are scoped to that function. They are not accessible outside the function.

3. Block scope: Variables declared with let and const inside a block (e.g., inside {}) are limited to that block.

Global Scope

• Declared outside functions, accessible everywhere.

let globalVar = "I'm everywhere";
function logIt() {
    console.log(globalVar); // "I’m everywhere"
}
logIt();

javascript

Function Scope (var)

• var is limited to the function it’s declared in.

function test() {
    var localVar = "I'm local";
    console.log(localVar); // "I’m local"
}
test();
console.log(localVar); // Error: localVar is not defined

javascript

Block Scope (let, const)

• let and const are limited to {} blocks (e.g., if, for).

if (true) {
    let blockVar = "I'm trapped";
    console.log(blockVar); // "I’m trapped"
}
console.log(blockVar); // Error: blockVar is not defined

javascript

---

Example of Scoping:

// Global scope
let globalVar = "I am global";

function testScope() {
  var functionVar = "I am inside the function"; // Function scope
  let blockVar = "I am inside a block"; // Block scope

  if (true) {
    let innerBlockVar = "I am inside an if block"; // Block scope
    console.log(innerBlockVar); // Accessible here
  }

  // console.log(innerBlockVar); // Error: innerBlockVar is not defined outside the if block
}

testScope();
// console.log(functionVar); // Error: functionVar is not defined outside the function
console.log(globalVar); // Accessible globally

javascript