JavaScript Fundamentals · Objects · Lesson 21 of 48
Destructuring
Concept
Destructuring
Destructuring pulls values out of objects, or arrays, into their own variables in a single line.
It's especially common in function parameters, letting a function accept an object and immediately unpack just the fields it needs.
By the end of this lesson
- Explain the core idea behind Destructuring.
- Predict output before running a change.
- Test one realistic and one unusual input.
- Use the result to make the next decision.
How to study this page
- 1. Read one concept.
- 2. Change the example.
- 3. Run, compare, and explain.
- 4. Complete the challenge below.
Syntax
const { key1, key2 } = objectName;
const [first, second] = arrayName;ExampleRunnable
const student = { name: "Alex", age: 20 };
const { name, age } = student;
console.log(name, age);Destructuring in a function parameter
function introduce({ name, age }) {
return name + " is " + age;
}
console.log(introduce({ name: "Alex", age: 20 }));Self-check before continuing
Without looking at the example, describe what changes when you modify one input in Destructuring. Then reopen the editor and prove your explanation with a small test.
You are ready to continue when you can predict, test, and explain the result.
Your turn
Destructure title and level from a course object and log them.
Loading editor…
Console