[Javascript] Spread syntax 란?

Spread Syntax

 

Spread Syntax는 전개 구문이라 불리고 이는 객체나 배열의 요소를 말그대로 전개하거나 분해할 때 사용한다.

단순 전개부터 apply()를 대체하거나 인스턴스 생성, 배열 복제/연결, 객체 복제 등에 사용할 수 있다.

var obj = { a: 1, b: 2 };
var obj2 = { ...obj };
console.log(obj2); // Object { a: 1, b: 2 }

var n = [1, 2, 3];
console.log(n); // Array(3) [ 1, 2, 3 ]
console.log(...n); // 1 2 3

 

✔ 함수에서의 Spread Syntax 사용

function fn(a, b, c) {
  return '' + a + b + c;
}

 

fn(...[3, 2, 1]); // 321

var arr = [10, 30, 5];
Math.min(...arr); // 5

var arr = [7, 8];
fn(...[6], ...arr) // 678

 

 

✔ 배열에서의 Spread Syntax 사용

👉 Concat

Concat로 사용하던 방식을 spread syntax로 사용하면 된다.

var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];

var arr3 = arr1.concat(arr2); // [1, 2, 3, 4, 5, 6]

 

 

var arr4 = [...arr1, ...arr2];

 

var def = ['d', 'e', 'f'];
var alphabet = ['a', 'b', 'c', ...def, 'g'];
alphabet; // ["a", "b", "c", "d", "e", "f", "g"]

 

👉 Clone

원본을 복제한 새 배열을 만드는 방법이다:

var arr = [1, 2, 3];
var arr2 = [...arr];
arr === arr2; // false
arr2; // [1, 2, 3]

 

하지만 아래처럼 deep copy가 아닌 shallow copy이기에 중첩된 object에 대해서는 완전한 복제를 보장하지 못한다.

 

var arr = [[1, 2], [3]];
var arr2 = [...arr];

arr[0]; // [1, 2]
arr2[0].pop(); // 참조하는 배열을 수정해서 arr도 영향을 받음.
arr[0]; // [1]

 

 

✔ Object 에서의 Spread Syntax 사용

👉 Concat

var obj1 = { foo: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };

var mergedObj = { ...obj1, ...obj2 }; // obj2.foo가 obj1.foo를 덮어쓰게 됨
mergedObj; // Object { foo: "baz", x: 42, y: 13 }

 

 

👉 Clone

var obj = { foo: 'bar', x: 42 };

var clone1 = { ...obj };
clone1; // Object { foo: "bar", x: 42 }
clone1 === obj; // false

var clone2 = { ...obj, x: '사십이', c: 1 }; // obj에서 x는 재할당하고 c를 추가한 새 배열 객체 반환
clone2; // Object { foo: "bar", x: "사십이", c: 1 }

 

배열과 마찬가지로 얕은 복사(shallow copy)다:

var obj = { foo: { a: 1, b: 2 } };

var clone4 = { ...obj };

obj.foo.a; // 1
clone4.foo.a = 3;
obj.foo.a; // 3

 

❌ 나머지 구문

구조 분해 할당 표현식에서 사용할 땐 전개 구문 대신 나머지 구문이라 부르며 모양만 같지 완전히 다른 구문이다:

var [min = 0, max = Infinity, ...rest] = [1, 2, 3, 4, 5];
min; // 1
max; // 2
rest; // [3, 4, 5]

var { x = 24, b = 48, ...y } = { a: 1, b: 2, c: 3, d: 4 };
x; // 24
b; // 2
y; // { a: 1, c: 3, d: 4 }