Destructuring makes it possible to unpack values from arrays, or properties from objects, into distinct variables.
Advantages
- Makes code concise and more readable.
- We can easily avoid repeated destructuring expression.
Some use cases
- To get values in variable from Objects, Array.
let array = [1, 2, 3, 4, 5];
let [first, second, ...rest] = array;
console.log(first, second, rest);
//expected output: 1 2 [3,4,5]
let objectFoo = { foo: 'foo' };
let { foo: newVarName } = objectFoo;
console.log(newVarName);
//expected output: foo
// Nested extraction
let objectFooBar = { foo: { bar: 'bar' } };
let { foo: { bar } } = objectFooBar;
console.log(bar);
//expected output: bar
- To change only desired property in an object.
let array = [
{ a: 1, b: 2, c: 3 },
{ a: 4, b: 5, c: 6 },
{ a: 7, b: 8, c: 9 },
];
let newArray = array.map(({ a, ...rest }, index) => ({
a: index + 10,
...rest,
}));
console.log(newArray);
/* expected output: [
{
"a": 10,
"b": 2,
"c": 3
},
{
"a": 11,
"b": 5,
"c": 6
},
{
"a": 12,
"b": 8,
"c": 9
}
]*/
- To extract values from parameters into standalone variables.
// Object destructuring:
const objectDestructure = ({ property }: { property: string }) => {
console.log(property);
};
objectDestructure({ property: 'foo' });
//expected output: foo
// Array destructuring:
const arrayDestructure = ([item1, item2]: [string, string]) => {
console.log(item1 , item2);
};
arrayDestructure(['bar', 'baz']);
//expected output: bar baz
// Assigning default values to destructured properties:
const defaultValDestructure = ({
foo = 'defaultFooVal',
bar,
}: {
foo?: string;
bar: string;
}) => {
console.log(foo, bar);
};
defaultValDestructure({ bar: 'bar' });
//expected output: defaultFooVal bar
- To get dynamic keys value from object.
const obj = { a: 1, b: 2, c: 3 };
const key = 'c';
let { [key]: val } = obj;
console.log(val);
//expected output: 3
- To swap values.
const b = [1, 2, 3, 4];
[b[0], b[2]] = [b[2], b[0]]; // swap index 0 and 2
console.log(b);
//expected output : [3,2,1,4]
- To get a subset of an object.
const obj = { a: 5, b: 6, c: 7 };
const subset = (({ a, c }) => ({ a, c }))(obj);
console.log(subset);
// expected output : { a: 5, c: 7 }
- To do array to object conversion.
const arr = ["2024", "17", "07"],
date = (([year, day, month]) => ({year, month, day}))(arr);
console.log(date);
/* expected output: {
"year": "2024",
"month": "07",
"day": "17"
} */
- To set default values in function.
function someName(element, input, settings={i:"#1d252c", i2:"#fff", ...input}){
console.log(settings.i);
console.log(settings.i2);
}
someName('hello', {i: '#123'});
someName('hello', {i2: '#123'});
/* expected output:
#123
#fff
#1d252c
#123
*/
- To get properties such as length from an array, function name, number of arguments etc.
let arr = [1,2,3,4,5];
let {length} = arr;
console.log(length);
let func = function dummyFunc(a,b,c) {
return 'A B and C';
}
let {name, length:funcLen} = func;
console.log(name, funcLen);
/* expected output :
5
dummyFunc 3
*/
- To combine arrays or objects.
//combining two arrays
const alphabets = ['A','B','C','D','E','F'];
const numbers = ['1','2','3','4','5','6'];
const newArray = [...alphabets, ...numbers]
console.log(newArray);
//expected output: ['A','B','C','D','E','F','1','2','3','4','5','6']
//combining two objects
const personObj = { firstname: "John", lastname: "Doe"};
const addressObj = { city: "some city", state: "some state" };
const combinedObj = {...personObj, ...addressObj};
console.log(combinedObj);
/* expected output: {
"firstname": "John",
"lastname": "Doe",
"city": "some city",
"state": "some state"
} */
Top comments (0)