Skip to main content

Destructuring assignment in JavaScript

Data Types: Destructuring Assignment

What is a de-structuring assignment, and what are two data structures commonly use it in JavaScript?​

View Answer:
Interview Response: Destructuring assignment allows us to “unpack” arrays or objects into variables, which is sometimes more convenient. Destructuring also works great with complex functions with many parameters and default values.

Technical Response: De-structuring assignment is a special syntax that allows us to “unpack” arrays or objects into many variables, which is sometimes more convenient. De-structuring also works great with complex functions with many parameters, default values, and more. We can use destructuring on both objects and arrays in JavaScript. It is a “destructuring assignment” because it “destructures” by copying items into variables. But the array itself is not modified.

Code Example:

// we have an array with the name and surname
let arr = ['John', 'Smith'];

// destructuring assignment
// sets firstName = arr[0]
// and surname = arr[1]
let [firstName, surname] = arr;

alert(firstName); // John
alert(surname); // Smith

// Another example using the split() method

let [firstName, surname] = 'John Smith'.split(' ');
alert(firstName); // John
alert(surname); // Smith

/////////////////////////////////////////////

// DESTRUCTURING OBJECTS

const hero = {
  name: 'Batman',
  realName: 'Bruce Wayne',
};

const { name, realName } = hero;
name; // => 'Batman',
realName; // => 'Bruce Wayne'

If you want to ignore or skip an array element to be destructured (on the right-hand side of the assignment), what delimiter can you use when destructuring an array?​

View Answer:
Interview Response: We can skip unwanted elements of an array by adding extra space and a comma as a delimiting block.

Code Example:

// second element is not needed
let [firstName, , title] = [
  'Julius',
  'Caesar',
  'Consul',
  'of the Roman Republic',
];

console.log(title); // Consul

What kind of structures work with destructuring in JavaScript?​

View Answer:
Interview Response: Destructuring works with any iterable structure, including arrays, objects, Sets, and strings on the right-hand side of the assignment.

Code Example:

let [a, b, c] = 'abc'; // ["a", "b", "c"]
let [one, two, three] = new Set([1, 2, 3]);

Is there a method you can use to destructure and loop over an object?​

View Answer:
Interview Response: We can use the Object.entries(object) method to loop over an object and a combination of [key, value] destructuring.

Code Example:

let user = {
  name: 'John',
  age: 30,
};

// loop over keys-and-values
for (let [key, value] of Object.entries(user)) {
  alert(`${key}:${value}`); // name:John, then age:30
}

// The similar code for a Map is simpler, as it’s iterable:
let user = new Map();
user.set('name', 'John');
user.set('age', '30');

// Map iterates as [key, value] pairs, very convenient for destructuring
for (let [key, value] of user) {
  alert(`${key}:${value}`); // name:John, then age:30
}

Can you explain the swapping of variables using destructuring in JavaScript?​

View Answer:
Interview Response: There is a trick for swapping. We have to create a temporary array of the variables on the left side and then swap the variables on the right side in another array. We can swap more than two variables this way in JavaScript.

Code Example:

let guest = 'Jane';
let admin = 'Pete';

// Let's swap the values: make guest=Pete, admin=Jane
[guest, admin] = [admin, guest];

alert(`${guest} ${admin}`); // Pete Jane (successfully swapped!)

Is there a way to handle mismatched arrays that we need to destructure in JavaScript?​

View Answer:
Interview Response: To access the extra variables on the right side, we can use the (...rest) operator to access the remaining variables.

Technical Response: Yes, if the array is longer than the list at the left, the “extra” items are omitted. To access the extra variables on the right side, you can use the (...rest) operator to access the remaining variables. We can use any other variable name in place of the rest. Just make sure it has three dots before it and goes last in the destructuring assignment. If the array is shorter than the list of variables at the left, there are no errors, and missing values are considered undefined.

Code Example:

let [name1, name2] = ['Julius', 'Caesar', 'Consul', 'of the Roman Republic'];

alert(name1); // Julius
alert(name2); // Caesar
// Further items are not assigned anywhere

/// HOW TO FIX AND ACCESS REMAINING VARIABLES ///

// Rest Operator Implementation
let [name1, name2, ...rest] = [
  'Julius',
  'Caesar',
  'Consul',
  'of the Roman Republic',
];

// rest is array of items, starting from the 3rd one
alert(rest[0]); // Consul
alert(rest[1]); // of the Roman Republic
alert(rest.length); // 2

What is the rule regarding the naming convention of a rest operator?​

View Answer:
Interview Response: There are no restrictions on what you name your rest operator in general. You should use a relative name for the rest operator, such as (…title) with three preceding dots.

Code Example:

let [name1, name2, ...titles] = [
  'Julius',
  'Caesar',
  'Consul',
  'Roman Republic',
];
// now titles = ["Consul", " Roman Republic"]

If you implement destructuring on empty values, what gets returned?​

View Answer:
Interview Response: There are no errors if the array is shorter than the list of variables at the left. Missing values are considered undefined on return.

Code Example:

let [firstName, surname] = [];

alert(firstName); // undefined
alert(surname); // undefined

What is an excellent destructuring technique you can use to eliminate the return of undefined array values?​

View Answer:
Interview Response: The best way to handle missing values during destructuring is to set default values to potentially missing values using the assignment operator.

Technical Response: Setting default values to possibly missing values is the best technique to manage missing values during destructuring. This approach gets accomplished by assigning a new default using the equal (=) operator. More sophisticated phrases or function calls are used as default values, and they only get evaluated if the value is not supplied.

Code Example:

// default values
let [name = 'Guest', surname = 'Anonymous'] = ['Julius'];

alert(name); // Julius (from array)
alert(surname); // Anonymous (default used)

// runs only prompt for surname
let [name = prompt('name?'), surname = prompt('surname?')] = ['Julius'];

alert(name); // Julius (from array)
alert(surname); // whatever prompt gets

Can you use destructing on objects in JavaScript?​

View Answer:
Interview Response: We can use destructing on any iterable, including objects in JavaScript.

Technical Response: We can use destructing on any iterable, including objects in JavaScript. There should be an existing object on the right side of the assignment operator, and the left side contains an object-like “pattern” for corresponding properties. In the simplest case, that is a list of variable names in {...}.

Code Example:

// The basic syntax
// let {var1, var2} = {var1:…, var2:…}
let options = {
  title: 'Menu',
  width: 100,
  height: 200,
};

let { title, width, height } = options;

console.log(title); // Menu
console.log(width); // 100
console.log(height); // 200

What is the distinction between array destructuring and object destructuring?​

View Answer:
Interview Response: Object destructuring is like array destructuring, with one exception, instead of values getting pulled out of an array, object keys and values get pulled out of an object.

Technical Response: Object destructuring is like array destructuring, with one exception, instead of values getting pulled out of an array, object keys and values get pulled out of an object. In an array, the order of the elements is relevant, and it depends on your intent to handle the elements, such as swapping variables. However, the rule for arrays does not apply to objects, and order is insignificant.

Code Example:

// changed the order in let {...}
let { height, width, title } = { title: 'Menu', height: 200, width: 100 };
note

In an array, the order of the elements is relevant. It depends on your intent, the rule for arrays does not apply to objects, and order is insignificant.

Is it feasible to use the destructuring procedure to modify the name of an object variable?​

View Answer:
Interview Response: If we want to assign a property to a variable with another name. We can set the new or shortened name by implementing a semi-colon in the destructing process. The colon shows what goes where and specifies the new or shortened name.

Code Example:

let options = {
  title: 'Menu',
  width: 100,
  height: 200,
};

// { sourceProperty: targetVariable }
let { width: w, height: h, title } = options;

// width -> w
// height -> h
// title -> title

console.log(title); // Menu
console.log(w); // 100
console.log(h); // 200

How do you handle potentially missing object properties using destructuring in JavaScript?​

View Answer:
Interview Response: We can set default values using the assignment (=) operator. Like with arrays or function parameters, default values can be any expressions or function calls.

Technical Response: If the object is missing object property, you can use destructuring to set a new property and value to reference the object. We can set default values using the assignment (=) operator. Default values, like arrays or function parameters, can be any expressions or function calls, and they get evaluated if no value is specified.

Code Example:

let options = {
  title: 'Menu',
};

let { width = 100, height = 200, title } = options;

alert(title); // Menu
alert(width); // 100
alert(height); // 200

// In the code below prompt asks for width, but not for title:
let options = {
  title: 'Menu',
};

let { width = prompt('width?'), title = prompt('title?') } = options;

alert(title); // Menu
alert(width); // (whatever the result of prompt is)

If you want to shorten an object property and supply a value to that property, what is the process used to implement this in JavaScript?​

View Answer:
Interview Response: If you want to shorten a property and supply a value to a property, we can combine both with a colon and assign a shortened property name. The semi-colon sets the new shortened property name, and the assignment operator assigns a new value.

Code Example:

let options = {
  title: 'Menu',
};

let { width: w = 100, height: h = 200, title } = options;

alert(title); // Menu
alert(w); // 100
alert(h); // 200

When working with an object, is there a way to extract only the properties?​

View Answer:
Interview Response: If we have a complex object with many properties, we can extract what we need by using destructuring to extract specific properties.

Code Example:

let options = {
  title: 'Menu',
  width: 100,
  height: 200,
};

// only extract title as a variable
let { title } = options;

alert(title); // Menu

What if the object has more properties than we have variables? Can we take some and then assign the “rest” somewhere?​

View Answer:
Interview Response: We can use the rest pattern, just like we do with array destructuring. Using the rest pattern, we can assign properties and collect the rest if necessary.

Code Example:

let options = {
  title: 'Menu',
  height: 200,
  width: 100,
};

// title = property named title
// rest = object with the rest of properties
let { title, ...rest } = options;

// now title="Menu", rest={height: 200, width: 100}
alert(rest.height); // 200
alert(rest.width); // 100
note

Some older browsers do not support it (IE, use Babel to polyfill it), but it works in modern ones.

What are some of the issues you can run into with destructuring objects?​

View Answer:
Interview Response: The most significant issue is the curly brackets that encapsulate the properties. Since objects use block scoping, an issue can arise when you separate the variable initialization from the destructuring properties on a new line. The problem is that JavaScript treats {...} in the main code flow (not inside another expression) as a code block. We can wrap the expression in parentheses to show JavaScript that it is not a code block (...).

Code Example:

let title, width, height;

// error in this line
{title, width, height} = {title: "Menu", width: 200, height: 100};

/// FIX: YOU CAN WRAP IT IN PARENTHESES ///

let title, width, height;

// okay now
({title, width, height} = {title: "Menu", width: 200, height: 100});

alert( title ); // Menu

Can we use more complex left-side patterns to extract deeper portions if an object or an array contains other nested objects and arrays?​

View Answer:
Interview Response: Yes, we can build a generic object that references the original. Because JavaScript allows you to choose your properties, it is possible to build a generic object with properties referencing the original object.

Technical Response: We can use more complex left-side patterns to extract deeper portions. You can build a generic object that references the original. Because JavaScript allows you to choose your properties, it is possible to build a generic object with properties referencing the original object.

Code Example:

let options = {
  size: {
    width: 100,
    height: 200,
  },
  items: ['Cake', 'Donut'],
  extra: true,
};

// destructuring assignment split in multiple lines for clarity
let {
  size: {
    // put size here
    width,
    height,
  },
  items: [item1, item2], // assign items here
  title = 'Menu', // not present in the object (default value is used)
} = options;

alert(title); // Menu
alert(width); // 100
alert(height); // 200
alert(item1); // Cake
alert(item2); // Donut