1. Array Destructuring

---

1.1 Basic Usage

Traditional variable assignment requires explicit declaration for each variable:

let first = 10;
let second = 20;
let third = 30;

ES6 simplifies this with destructuring syntax:

let [first, second, third] = [10, 20, 30];
console.log(first, second, third); // 10 20 30

This pattern-matching approach allows values to map directly to variables based on their position in the array.

Nested structures work similarly:

let [framework, [frontend, backend], runtime] = ['TechStack', ['React', 'Node'], 'Deno'];
console.log(framework, frontend, backend, runtime); // TechStack React Node Deno

Selective extraction is possible by skipping unwanted elements:

let [, [, selectedFramework], runtimeEnv] = ['TechStack', ['React', 'Node'], 'Deno'];
console.log(selectedFramework, runtimeEnv); // Node Deno

The rest operator captures remaining elements:

let [primary, ...remaining] = ['React', 'Vue', 'Angular', 'Svelte'];
console.log(primary); // React
console.log(remaining); // ['Vue', 'Angular', 'Svelte']

Incomplete destructuring does not throw errors—unmatched variables become undefined:

let [x, y] = ['OnlyOne'];
console.log(y); // undefined

Partial matching is valid:

let [primaryChoice] = ['React', 'Vue', 'Angular'];
console.log(primaryChoice); // React

1.2 How Destructuring Works

Arrays support destructuring because they implement the Iterator interface. This protocol allows iteration and destructuring operations:

const technologies = ['JavaScript', 'TypeScript'];
console.log(technologies[Symbol.iterator]);

Beyond arrays, Set and Map data structures in ES6 also support destructuring and iteration.

1.3 Default Values

Variables can have fallback values when destructuring fails to match:

let [primary = 'defaultValue', secondary = 'fallback'] = ['custom'];
console.log(primary, secondary); // custom fallback

Important distinction: undefined triggers the default value, but null does not:

let [a, b = 'defaultText', c] = ['Hello', undefined, null];
console.log(a, b, c); // Hello defaultText null

Consider this interview-style question:

let [x = y, y = 1] = [];
console.log(x, y);

Think through the output before checking the result.

2. Object Destructuring

---

2.1 Basic Usage

Object destructuring differs from array destructuring in a key way: position determines values in arrays, while property names determine values in objects. Objects are unordered collections of key-value pairs.

// Variable names must match property names
let { userName, userAge } = { userName: 'developer', userAge: 30 };
console.log(userName, userAge); // developer 30

Property order does not affect the result:

let { userAge, userName, userEmail } = { userName: 'developer', userAge: 30, userEmail: 'test@example.com' };
console.log(userName, userAge); // developer 30
console.log(userEmail); // undefined

Custom variable names are supported using the colon syntax:

let { userAge: customAge } = { userName: 'developer', userAge: 30 };
console.log(customAge); // 30
console.log(userAge); // ReferenceError: userAge is not defined

Nested destructuring works for deeply nested objects:

let { profile: { skills }} = { profile: { name: 'developer', skills: ['JavaScript', 'Python'] } };
console.log(skills); // ['JavaScript', 'Python']

2.2 Object Destructuring Process

Understanding the assignment mechanism:

let { username: username } = { username: 'developer', age: 30 };

The process involves two steps: first, the pattern searches for matching properties in the source object; second, the matched value assigns to the declared variable. ES6 allows shorthand when variable and property names match, so { username } is equivalent to { username: username }.

Therefore, in destructuring syntax, the right side of the colon is the actual assigned variable, while the left side serves as the matching pattern.

2.3 Default Values

Object destructuring supports default values in the same manner as arrays:

let { primaryColor = 'blue' } = {};
let { name, year = 2024 } = { name: 'project' };
console.log(primaryColor, name, year); // blue project 2024

Defaults apply only when the extracted value is undefined:

let { theme = 'dark' } = { theme: undefined };
let { background = 'white' } = { background: null };
console.log(theme, background); // dark null

3. String Destructuring

---

Strings can be destructured aswell, as they are converted to array-like objects:

let [ch1, ch2, ch3, ch4, ch5] = 'hello';
console.log(ch1, ch2, ch3, ch4, ch5); // h e l l o

String properties are accessible through destructuring:

let { length: strLength } = 'ES6';
console.log(strLength); // 3

Strings are internally represented as character arrays, allowing property access and iteration.

4. Function Parameter Destructuring

---

Function parameters support destructuring assignment:

function calculateSum([num1, num2]) {
    return num1 + num2;
}
console.log(calculateSum([5, 3])); // 8

4.1 Parameter Defaults

Object parameters can have default values:

function configure({ debug = false, verbose = true }) {
    return [debug, verbose];
}
configure({ debug: true, verbose: false }); // [true, false]
configure({ debug: true }); // [true, true]
configure({}); // [false, true]

Another approach provides defaults for the entire parameter object:

function setup({ x, y } = { x: 10, y: 20 }) {
    return [x, y];
}
setup({ x: 5, y: 15 }); // [5, 15]
setup({ x: 5 }); // [5, undefined]
setup({}); // [undefined, undefined]
setup(); // [10, 20]

The key difference: the second form applies defaults only when no argument is provided, while the first form applies defaults for individual missing properties.

Consider this example:

let result = [1, undefined, 3].map((value = 'default') => value);
console.log(result);