Next ❯

JavaScript Basics

  • This lesson covers the fundamental syntax and core concepts of JavaScript.

  • What is a Variable ?

    A variable is a container used to store data in a program.

    In JavaScript, variables store values such as:

    • Numbers

    • Strings

    • Boolean values

    • Objects

    • Arrays

    • Functions

    Simple Definition

    A variable is a named memory location used to store data that can be used and changed during program execution.

    Real-Life Example

    Think of a variable like a labeled box.

    • Box name: age

    • Box value: 20

    If the value changes, the box name stays the same.

    Why Do We Need Variables ? 

    Variables help us to:

    • Store user input

    • Reuse values

    • Perform calculations

    • Write dynamic programs

    • Avoid hard-coded values

    JavaScript Variable Declaration

    JavaScript provides three keywords to declare variables:

    1. var

    2. let

    3. const

    var Keyword

    Introduction to var

    var is the oldest way to declare variables in JavaScript.

    It was used before ES6 (2015).

    Syntax

    var name = "Rahul";

    Characteristics of var

    • Function-scoped

    • Can be redeclared

    • Can be reassigned

    • Hoisted (initialized as undefined)

    • Not block-scoped

var Keyword

Demonstrates how var allows redeclaration and behaves in JavaScript. 

var x = 10;
var x = 20;

console.log(x); // 20
  • This can cause bugs in large programs.

var Scope Behavior

Shows that var is not block-scoped and can be accessed outside the block. 

if (true) {
  var a = 100;
}

console.log(a); // 100

  • Even though a is declared inside if, it is accessible outside.

    Problem with var

    • No block scope

    • Causes unexpected behavior

    • Difficult to debug in large codebases

    Because of these issues, var is not recommended in modern JavaScript.

    let Keyword

    Introduction to let

    let was introduced in ES6 (2015) to solve problems of var.

    Syntax

    let city = "Delhi";

    Characteristics of let

    • Block-scoped

    • Cannot be redeclared in the same scope

    • Can be reassigned

    • Hoisted but not initialized

    • Safer than var

let Block Scope

Demonstrates that let is block-scoped and cannot be accessed outside the block. 

if (true) {
  let b = 50;
}

// console.log(b); // Error
  • b is only available inside the block.

let Reassignment and Redeclaration Rules

Shows that let allows reassignment but does not allow redeclaration. 

let count = 1;
count = 2;

console.log(count); // 2

let x = 10;
// let x = 20; // Error

  • Why let is Better Than var

    • Prevents accidental redeclaration

    • Provides proper block scope

    • Makes code predictable

    const Keyword

    Introduction to const

    const is used to declare constant variables, meaning their value cannot be changed.

    Introduced in ES6.

    Syntax

    const PI = 3.14;

    Characteristics of const

    • Block-scoped

    • Cannot be redeclared

    • Cannot be reassigned

    • Must be initialized at declaration

    • Most secure variable type

const Reassignment and Redeclaration

Shows that const does not allow reassignment and must be initialized. 

const x = 10;
x = 20; // Error

// const y; // Error
const y = 5;

  • Important Note (Objects & Arrays)

    const does not mean the value inside an object or array cannot change.

const with Arrays and Objects

Shows that const prevents reassignment but allows modifying array or object contents. 

const colors = ["red", "blue"];
colors.push("green");

console.log(colors);
  • This works because the reference is constant, not the content.

const with Object Modification

Shows that object properties can be updated even when declared with const. 

const user = {
  name: "Amit"
};

user.name = "Rohit";

console.log(user.name);

  • Allowed behavior.

    Scope Comparison

    KeywordScope
    varFunction scope
    letBlock scope
    constBlock scope

    Redeclaration & Reassignment Comparison

    KeywordRedeclareReassign
    varYesYes
    letNoYes
    constNoNo

    Hoisting Overview

    var

    console.log(a);

    var a = 10;

    Output:

    undefined

    let and const

    console.log(b);

    let b = 10;

    Results in error due to Temporal Dead Zone.

    Best Practices 

    • Avoid using var

    • Use const by default

    • Use let only when value must change

    • Write clear and readable variable names

    • Follow consistent naming conventions

    Naming Rules for Variables

    • Must start with letter, _, or $

    • Cannot start with number

    • Cannot use reserved keywords

    • Case-sensitive

      Valid:

      let userName;

      let _count;

      let $price;

      Invalid:

      let 1name;

      let let;

      Real-Life Analogy Summary

      • var → Old open cupboard

      • let → Lockable drawer

      • const → Sealed box

    Next ❯