typescript:operator

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

--- typescript:operator [2023/11/19 00:06] – [Apply] taekgu
+++ typescript:operator [2025/04/15 10:05] (현재) – 바깥 편집 127.0.0.1
@@ 줄 1: / 줄 1: @@
+====== 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.