GaramX

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
====== Spread Operator ======

Spread Operator의 주요 목적은 Array이나 Object의 요소를 퍼뜨리는 것이다. 이것은 예시로 가장 잘 설명된다.

===== Apply =====

일반적인 사용 사례는 함수 인수에 배열을 퍼뜨리는 것이다. 이전에는 Function.prototype.apply 사용해야 합니다:

<code javascript>
function foo(x, y, z) { }
var args = [0, 1, 2];
foo.apply(null, args);
</code>

이제는 아래와 같이 인수앞에 ...을 붙여서 사용하면 된다.
<code javascript>
function foo(x, y, z) { }
var args = [0, 1, 2];
foo(...args);
</code>
여기서 우리는 배열을 인수로 넘겨주었다.

===== Destructuring =====

우리는 destructuring의 한가지 사용법을 보았다.
<code javascript>
var [x, y, ...remaining] = [1, 2, 3, 4];
console.log(x, y, remaining); // 1,2,[3,4]
</code>

The motivation here is to simply make it easy for you to capture the remaining elements of an array when destructuring.
Array Assignment
The spread operator allows you to easily place an expanded version of an array into another array. This is demonstrated in the example below:

<code javascript>
var list = [1, 2];
list = [...list, 3, 4];
console.log(list); // [1,2,3,4]
</code>

You can put the expanded array in at any position, and get the effect you'd expect:

<code javascript>
var list = [1, 2];
list = [0, ...list, 4];
console.log(list); // [0,1,2,4]
</code>

===== Object spread =====

You can also spread an object into another object. A common use case is to simply add a property to an object without mutating the original:

<code javascript>
const point2D = {x: 1, y: 2};
/** Create a new object by using all the point2D props along with z */
const point3D = {...point2D, z: 3};
</code>

For objects, the order of where you put the spread matters. This works something like Object.assign, and does what you'd expect: what comes first is 'overridden' by what comes later:

<code javascript>
const point2D = {x: 1, y: 2};
const anotherPoint3D = {x: 5, z: 4, ...point2D};
console.log(anotherPoint3D); // {x: 1, y: 2, z: 4}
const yetAnotherPoint3D = {...point2D, x: 5, z: 4}
console.log(yetAnotherPoint3D); // {x: 5, y: 2, z: 4}
</code>

Another common use case is a simple shallow extend:

<code javascript>
const foo = {a: 1, b: 2, c: 0};
const bar = {c: 1, d: 2};
/** Merge foo and bar */
const fooBar = {...foo, ...bar};
// fooBar is now {a: 1, b: 2, c: 1, d: 2}
</code>

===== Summary =====

apply is something that you often use in JavaScript, so it's good to have a better syntax where you don't have that ugly null for the this argument. Also having a dedicated syntax for moving arrays out of (destructuring) or into (assignment) other arrays provides a neat syntax for when you are doing array processing on partial arrays.
GaramX

사용자 도구

사이트 도구

문서 도구
