Destructuring Overview
JavaScript provides syntax to destructuring of three data types:
Object Destructuring
The basic syntax:
const { prop1: prop1Value, prop2: prop2Value, prop3: prop3Value } = myObject;
The old verbose method:
let student = {
firstName: "John",
lastName: "Smith",
score: 90
}
const fName = student.firstName;
const lName = student.lastName;
const theScore = student.score;
console.log('First Name:', fName); // RESULT: "John"
console.log('Last Name:', lName); // RESULT: "Smith"
console.log('Score:', theScore); // RESULT: 90
With Object Destructuring:
let student = {
firstName: "John",
lastName: "Smith",
score: 90
}
const {
firstName: fName,
lastName: lName,
score: theScore
} = student;
console.log('First Name:', fName); // RESULT: "John"
console.log('Last Name:', lName); // RESULT: "Smith"
console.log('Score:', theScore); // RESULT: 90
The property names can be used as the variables, as well:
const {
firstName: firstName,
lastName: lastName,
score: score
} = student;
console.log('First Name:', firstName); // RESULT: "John"
console.log('Last Name:', lastName); // RESULT: "Smith"
console.log('Score:', score); // RESULT: 90
As easy as destructuring is already, it can get even easier. There is a shorthand syntax that allows using the property names alone. The JS engine will automatically make a variable using the property's name and assign the property's value.
const {
firstName,
lastName,
score
} = student;
console.log('First Name:', firstName); // RESULT: "John"
console.log('Last Name:', lastName); // RESULT: "Smith"
console.log('Score:', score); // RESULT: 90
Array Destructuring
The basic syntax for arrays is the same as Objects. A variable name will be assigned to the to the index position within the [] like:
const [ value1, value2, value3 ] = myArray;
The old verbose method:
const courses = ['Angular', 'React', 'Node']
const course1 = courses[1];
const course2 = courses[2];
const course3 = courses[3];
console.log('Course 1:', course1); // RESULT: "Angular"
console.log('Course 2:', course2); // RESULT: "React"
console.log('Course 3:', course3); // RESULT: "Node"
With Array Destructuring:
let student = {
firstName: "John",
lastName: "Smith",
score: 90
}
const [course1, course2, course3] = courses;
console.log('Course 1:', course1); // RESULT: "Angular"
console.log('Course 2:', course2); // RESULT: "React"
console.log('Course 3:', course3); // RESULT: "Node"
Function Destructuring
Function Destructuring allows for an object to be passed as a function parameter with the possibility for default values to be set. The Object would need to be wrapped in the standard JS curly brackets functionName({param1:value, param2:value,param3:value}
The old verbose method:
// The old way without defaults
function peopleFunction(name, age) {
...logic here
}
// The old way with defaults
function peopleFunction() {
var args = arguments[0] === undefined ? {} : arguments[0];
var name = opts.name === undefined ? 'Default user' : opts.name;
var age = opts.age === undefined ? 'N/A' : opts.age;
...logic here
}
With Destructuring:
// Without defaults
function peopleFunction() {
...logic here
}
peopleFunction({
name: "John",
age: 37
})
// With defaults
function peopleFunction({
name = 'Default user',
age = 'N/A'
}) {
...logic here
}
peopleFunction({
name: "John",
age: 37
})
One Reply to “Destructuring in JavaScript”