— JavaScript — 2 min read
Generally speaking, I would say everybody loves the destructuring assignment, and for good reasons. Next, I list some of the amazing things one can achieve with destructuring in JavaScript.
1const user = { username: "captain", email: "captain@email.com", age: 30 };2const { username, age } = user;
1const user = { email: "captain@email.com", age: 30 };2const { username = "unknown", age } = user;3// you can now use username with value 'unknown'
1const user = { username: "captain", email: "captain@email.com", age: 30 };2const { username, age: userAge } = user;3// you know have age value 30 in the variable userAge
1const user = { username: "captain", age: { value: 30, label: "30 years old" } };2const {3 username,4 age: { label },5} = user;6// you can now use label directly
1const rgb = [200, 255, 100];2const [red, green, blue] = rgb;3// the variables red, green and blue match the elements order in rgb array
Set
)1let [a, b, c] = "abc"; // ["a", "b", "c"]2let [one, two, three] = new Set([1, 2, 3]);
1let a = 1;2let b = 2;3[b, a] = [a, b];
1const arr = [1, 3, 2, 4, 5];2[arr[1], arr[2]] = [arr[2], arr[1]];3// arr is now [1, 2, 3, 4, 5]
1const rgb = [200, 255, 100];2// skip the first two items3// assign the only third item to the blue variable4const [, , blue] = rgb;
1const color = ["#FF00FF", [255, 0, 255], "rgb(255, 0, 255)"];2// use nested destructuring to assign red, green and blue3const [hex, [red, green, blue]] = color;4console.log(hex, red, green, blue); // #FF00FF 255 0 255
1function getUserInfo({ username, email }) {2 return `Username: ${username}; Email: ${email}`;3}4const user = { username: "captain", email: "captain@email.com" };5const userInfo = getUserInfo(user);
The most significant dilemma of destructuring it's related with the fact that relies on properties of nested structures that can only be evaluated at runtime, let me give you an example.
1function addEmailToList(list, { email }) {2 if (email) {3 list.push(email);4 }5}6const list = ["a@mail.com", "b@mail.com"];7const user = undefined;8
9addEmailToList(list, user);10// Uncaught TypeError: Cannot destructure property `email` of 'undefined' or 'null'
On the other hand, if you write this without destructuring, you won't make assumptions on the user, you can double check whether the given user is valid.
1function addEmailToList(list, user) {2 if (user && user.email) {3 list.push(user.email);4 }5}6const list = ["a@mail.com", "b@mail.com"];7const user = undefined;8
9addEmailToList(list, user);
Just a note, for you to be conscious that as in default assignment default parameters the null
value it's not considered false, thus you can't fall back to some default value in destructuring a property whose value is null
.
1function formatAddress(info) {2 const { country = "-", city = "-" } = info;3 return `${country}, ${city}`;4}5
6const info = { country: "Portugal", city: null };7const result = formatAddress(info);8// "Portugal, null" it's what you get instead of "Portugal, -"
Every feature above mentioned exists for you to use, but we should find a balance (as in everything else in life). Below I list a few guidelines/rules that will help you find the balance when using destructuring.
You might have noticed some previous warning sings (⚠️) in some of the listed usages of destructuring. I left those signs there because I consider those use cases potentially harmful.
snake_case
it uses now camelCase
just because it made more sense from an aesthetic point of view. Now your marvelous single page application is burning and falling into pieces because you were unsafely accessing this property when you could have protected yourself against it.If you liked this article, consider sharing (tweeting) it to your followers.