WebStorm 2019.1 Help

Destructuring in JavaScript

Destructuring lets you easily unpack values from arrays and objects into variables. This functionality has a very concise syntax that is often used when you need to pass data in your application. Learn more about destructuring from Exploring ES6.

In WebStorm, you can simplify fragments of code in which you are getting multiple values out of an array or an objects using a number of intention actions and quick-fixes.

  • Place the cursor at the value from an array or an object, press Alt+Enter, and then select Replace with object destructuring or Replace with array destructuring from the list.

    If some of the values from an array or an object are not used, these elements will be skipped:

Keep the original assignments

  • Press Alt+Enter and then select Introduce object or array destructuring.

    This intention action can be very handy when working with React class components:

  • Alternatively, place the cursor at the value from an array or an object and then select Refactor | Extract | Object or Array Destructuring from the context menu. See Extract Object or Array Destructuring for details.

Generate destructuring parameters for functions

  • Place the cursor at the parameters of a function, press Alt+Enter, and then select Convert parameters to object from the list.

Some other WebStorm actions also default to destructuring. For example, consider the Insert ‘require()’ quick-fix that works in Node.js applications with CommonJS modules:

Destructuring: Insert ‘require()’ quick-fix in Node.js app
Last modified: 25 March 2019