Variables & Constants

JavaScript · 10 entries

let Declaration

syntax

let variableName = value;

example

let score = 0;
score = 10;
console.log(score);

output

Note Block-scoped. Cannot be re-declared in the same scope. Preferred for values that change.

declare variablemutable variableblock scope variablelet vs var

const Declaration

syntax

const variableName = value;

example

const API_URL = "https://api.example.com";
const cart = ["apple"];
cart.push("banana"); // allowed
console.log(cart);

output

["apple", "banana"]

Note Block-scoped. Must be initialized at declaration. The binding is immutable, but object/array contents can still change.

constant variableimmutable bindingconst object mutationdeclare constant

var Declaration (Legacy)

syntax

var variableName = value;

example

function demo() {
  if (true) {
    var leaked = "visible outside block";
  }
  console.log(leaked);
}
demo();

output

"visible outside block"

Note Function-scoped, not block-scoped. Hoisted to the top of the function. Avoid in modern code -- use let or const instead.

var keywordfunction scopehoistinglegacy variablevar vs let

Array Destructuring

syntax

const [a, b, ...rest] = array;

example

const rgb = [30, 120, 255];
const [red, green, blue] = rgb;
console.log(green);

const [first, , third] = ["a", "b", "c"];
console.log(first, third);

output

120
"a" "c"

Note Use commas to skip elements. Works with any iterable, not just arrays.

unpack arrayarray destructuringextract array elementsswap variables

Object Destructuring

syntax

const { key1, key2: alias } = object;

example

const user = { name: "Lina", role: "admin", id: 42 };
const { name, role, id: userId } = user;
console.log(name, userId);

output

"Lina" 42

Note Use colon to rename. Combine with defaults: const { theme = "light" } = settings;

unpack objectobject destructuringrename destructured propertyextract object values

Nested Destructuring

syntax

const { outer: { inner } } = obj;

example

const response = {
  data: { user: { name: "Kai", scores: [95, 88] } }
};
const { data: { user: { name, scores: [latest] } } } = response;
console.log(name, latest);

output

"Kai" 95

Note Deeply nested destructuring can hurt readability. Consider extracting in steps for complex structures.

deep destructuringnested object destructuringextract nested value

Spread Operator

syntax

const merged = [...arr1, ...arr2];
const merged = { ...obj1, ...obj2 };

example

const defaults = { theme: "light", lang: "en" };
const prefs = { theme: "dark", fontSize: 16 };
const config = { ...defaults, ...prefs };
console.log(config);

output

{ theme: "dark", lang: "en", fontSize: 16 }

Note Later properties overwrite earlier ones. Only performs a shallow copy -- nested objects are still shared by reference.

spread arrayspread objectmerge objectscopy arrayshallow copy

Rest Parameters

syntax

function fn(...args) {}

example

function sum(...numbers) {
  return numbers.reduce((total, n) => total + n, 0);
}
console.log(sum(5, 10, 15));

output

Note Rest must be the last parameter. Unlike the old arguments object, rest gives you a real Array with all array methods.

rest parametersvariable argumentscollect argumentsvariadic function

Destructuring with Defaults

syntax

const { key = defaultValue } = obj;
const [a = defaultValue] = arr;

example

const { host = "localhost", port = 3000 } = { port: 8080 };
console.log(host, port);

output

"localhost" 8080

Note Defaults only apply when the value is undefined, not when it is null or other falsy values.

default values destructuringfallback valuedestructuring default

Variable Swapping

syntax

[a, b] = [b, a];

example

let x = "hello";
let y = "world";
[x, y] = [y, x];
console.log(x, y);

output

"world" "hello"

Note No temporary variable needed. Works with any number of variables: [a, b, c] = [c, a, b];

swap variablesexchange valuesswap without temp