# JS Tip of the Day: Reduce Code with Destructuring

**URL:** <https://forum.kirupa.com/t/js-tip-of-the-day-reduce-code-with-destructuring/643176>\
**Category:** web dev\
**Created:** [February 20, 2020, 2:59pm UTC](https://forum.kirupa.com/t/js-tip-of-the-day-reduce-code-with-destructuring/643176 "2020-02-20T14:59:36Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [February 20, 2020, 2:59pm UTC](https://forum.kirupa.com/t/js-tip-of-the-day-reduce-code-with-destructuring/643176/1 "2020-02-20T14:59:36Z")

</div>

**Reduce Code with Destructuring**  
Version: ES2015  
Level: Intermediate

Destructuring is a process that allows you to copy properties from an object into other individual variables. Destructuring comes in two forms: array and object.

Array destructuring works on any iterable and uses ordering to copy values from the iterable into variables within the current scope.

```auto
let myArray = [1, 2, 3];
let [one, two, three] = myArray;
console.log(one, two, three) // 1, 2, 3

```

The destructuring expression here would be the same as saying:

```javascript
let one = myArray[0];
let two = myArray[1];
let three = myArray[2];

```

Object destructuring, on the other hand, works with any object, but instead of using order, it uses the property names in the object to create new variables.

```auto
let myObject = { a: 1, b: 2, c: 3 };
let { a, c } = myObject;
console.log(a, c); // 1, 3

```

The destructuring expression here would be the same as saying:

```javascript
let a = myObject.a;
let c = myObject.c;

```

Using destructuring this way can reduce the amount of code you write, not just by reducing your object references into single variables, but also by allowing you to do so in a single line of code.

What was covered here so far only scratches the surface of destructuring. There’s a lot more to learn about this feature which will be touched upon later on.

More info:

- [Destructuring on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)