JavaScript Variables - Full Notes

Objectives: JavaScript Variables - Full Notes

JavaScript Variables - Full Notes

JavaScript Variables - Complete Notes

1. What is a Variable?

Plain Definition

A variable is a labeled storage location in memory used to store data that can be used or changed later.

In JavaScript

A variable is a named reference to a value stored in memory. You create it with var, let, or const.

let age = 25; // variable name: age, value: 25

In Compiler/Interpreter

When declaring let x = 10;, the JavaScript engine:

  1. Parses the code and identifies it as a variable declaration.
  2. Tokenizes it into keywords and symbols.
  3. Builds an Abstract Syntax Tree (AST).
  4. Allocates memory for the variable in the current scope.
  5. Stores the initial value in that memory.

2. How Variables Work in JavaScript

Variables hold references to values in memory. JavaScript is loosely typed, meaning a variable can change type during execution.

let box = 5;       // number
box = "Hello";     // now it's a string

3. Types and Categories

By Keyword

Keyword Scope Redeclaration Reassignment Hoisted Initialized
var Function/global Yes Yes Yes undefined
let Block No Yes Yes Not initialized
const Block No No Yes Must be initialized

By Data Type

Primitive Types: String, Number, BigInt, Boolean, Undefined, Null, Symbol.

Reference Types: Object, Array, Function, Date, Map, Set, etc.

4. Naming Rules

  • Must start with a letter, underscore (_), or dollar sign ($).
  • Can contain letters, digits, underscores, and dollar signs after the first character.
  • Case-sensitive.
  • Cannot be a reserved JavaScript keyword.
let firstName, _age, $salary2025; // valid
let 2ndName; // invalid
let let;     // invalid

5. Memory and Engine Perspective

When a variable is declared, the JavaScript engine:

  1. Allocates space in memory.
  2. Links the variable name to that memory location.
  3. Stores the value in that location.

Primitive values are stored directly. Reference types store a pointer to the object’s memory location.

6. Scope and Lifetime

  • Global Scope – accessible everywhere.
  • Function Scope – accessible only inside the function.
  • Block Scope – accessible only inside curly braces.
{
  let x = 10; // block scope
}
console.log(x); // error

Variables exist until their scope ends and they are garbage collected.

7. Hoisting

JavaScript moves variable declarations to the top of their scope before execution.

console.log(a); // undefined
var a = 5;

console.log(b); // ReferenceError
let b = 5;

8. Examples

let name = "Alice";
const PI = 3.14159;
var country = "Tanzania";

let score = 50;
score = score + 10; // 60

function greet(user) {
    let message = "Hello, " + user;
    console.log(message);
}
greet("Mwala");

let arr = [1, 2, 3];
let copy = arr;
copy.push(4);
console.log(arr); // [1, 2, 3, 4]

9. Special Cases

const user = {name: "John"};
user.name = "Mike"; // allowed
user = {};          // error

Avoid using var in modern JavaScript to prevent accidental overwriting of global variables.

10. Designing Variables in Your Own Language

  • Decide on static or dynamic typing.
  • Choose scoping rules: block, function, or both.
  • Implement a symbol table to map names to memory addresses.
  • Decide on immutability rules.
  • Handle hoisting or disallow it.
  • Implement garbage collection or manual memory freeing.

Memory Model Example

[ Variable Name ] → [ Memory Address ] → [ Stored Value ]
   age           →     0x0012FFAA     →     25
   name          →     0x0012FFBB     →   "John"
   arr           →     0x0012FFCC     →   ref → [1,2,3]

Reference Book: N/A

Author name: SIR H.A.Mwala Work email: biasharaboraofficials@gmail.com
#MWALA_LEARN Powered by MwalaJS #https://mwalajs.biasharabora.com
#https://educenter.biasharabora.com

:: 1::