# JS Tip of the Day: Spreading Values

**URL:** <https://forum.kirupa.com/t/js-tip-of-the-day-spreading-values/643161>\
**Category:** web dev\
**Created:** [March 6, 2020, 4:50pm UTC](https://forum.kirupa.com/t/js-tip-of-the-day-spreading-values/643161 "2020-03-06T16:50:24Z")\
**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:** [March 6, 2020, 4:50pm UTC](https://forum.kirupa.com/t/js-tip-of-the-day-spreading-values/643161/1 "2020-03-06T16:50:24Z")

</div>

**Spreading Values**  
Version: ES2015 (array, function), ES2018 (object)  
Level: Beginner

Spreading is an operation that can be performed on values in JavaScript to copy their properties into another location. Spread values are denoted by a preceding 3 dots (`...`). There are three kinds of spreading:

1. Array spreading
2. Function spreading
3. Object spreading

Array spreading is performed in array literals (`[]`) and copies values shallowly from any other iterable value into the new array. Each iterable value in the spread value is then placed as individual elements within the array.

```javascript
let missing = [3, 4];
let caughtThemAll = [1, 2, ...missing, 5];
console.log(caughtThemAll); // [1, 2, 3, 4, 5]

```

Function spreading is performed in function call argument lists and copies values shallowly from any other iterable value into the list of arguments passed to the function call. The use of spreading in functions effectively removes the need for the `apply()` Function method which allows arrays to be used as argument lists.

```javascript
function goForthAndMultiply (a, b, c) {
    return a * b * c;
}
let numbers = [2, 3, 7];
let result = goForthAndMultiply(...numbers);
console.log(result); // 42 (2 * 3 * 7)

// same as
goForthAndMultiply.apply(null, numbers);

```

Object spreading is performed in object literals (`{}`) and copies enumerable, non-inherited properties shallowly from any other value into the new object.

```javascript
let defaultOptions = { name: 'volume', value: 0 };
let userOptions = { value: 11 };
let options = { ...defaultOptions, ...userOptions };
console.log(options); // { name: 'volume', value: 11 }

```

Spreading objects is unique in that it copies keys and values and it doesn’t require an iterable as was the case with array and function call spreading. In fact any value can be spread in an object, even `null` and `undefined`, and no error will be thrown. If you try to spread a non-iterable (such as `null` and `undefined`) into an array or a function call, you will get an error.

```javascript
let caughtNothing = [...null]; // TypeError: not iterable
goForthAndMultiply(...null); // TypeError: not iterable
let optionless = { ...null }; // Ok, = {}

```

More info:

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