[JavaScript] 전개 연산자 (Spread Operator)

전개 연산자 (Spread Operator)

// 전개 연산자 (Spread Operator) ...

const a = [1, 2, 3];
const b = [4, 5, 6];

console.log(a); // [1, 2, 3]
console.log(...a); // 1 2 3
console.log(1, 2, 3); // 1 2 3
대괄호 증발, 사이사이 쉼표만 남음.

---

● concat 메소드
: 내가 병합하고자 하는 데이터를 앞에 붙이고, 점 표기법으로 concat 이라는 메소드를 호출하고,
병합 할 데이터를 concat의 인수로 넣어준다. 이것을 통해 병합이 된 새로운 배열이 나오게 되는데,
그것을 c 라는 변수로 받아서 콘솔에 출력하면 아이템 6개의 하나의 배열이 출력이 된다.

const a = [1, 2, 3];
const b = [4, 5, 6];

const c = a.concat(b);
console.log(c); // [1, 2, 3, 4, 5, 6]

const d = [a, b];
console.log(d); // [1, 2, 3], [4, 5, 6]

const e = [...a, ...b];
console.log(e); // [1, 2, 3, 4, 5, 6]

→ 전개 연산자는 배열 데이터의 대괄호를 날려주는 역할을 한다.

---

전개 연산자는 배열 데이터 뿐만 아니라,
객체 데이터에서도 사용할 수 있다.

const a = { x: 1, y: 2 };
const b = { y: 3, z: 4 };

const c = Object.assign({}, a, b);
console.log(c); // {x: 1, y: 3, z: 4}
객체 데이터 각각의 속성은 '고유' 해야되기 때문에 기존에 y 라는 속성은
새로운 b 라는 변수의 y 속성으로 덮어쓰기가 되었다. (그래서 2가 아니라 b 변수의 3이 출력됨.)

const d = { a, b };
console.log(d); // {a: { x: 1, y: 2}, b: {y: 3, z:4 }}

const e = { ...a, ...b };
console.log(e); // {x: 1, y: 3, z: 4}

---

function fn(x, y, z) {
  console.log(x, y, z);
}

fn(1, 2, 3); // 1 2 3

const a = [1, 2, 3];

fn(a[0], a[1], a[2]); // 1 2 3
fn([1, 2, 3]); // [1, 2, 3] undefined undefined
→ 배열 데이터는 '하나의 데이터'이기 때문에, 이 데이터 자체가 바로 x 라는 매개변수로만 들어가고,
  y나 z는 아무것도 들어오지 않기 때문에 암시적으로 undefined가 된다.
fn(a); // [1, 2, 3] undefined undefined
fn(...a); // 1 2 3
→ 배열 데이터의 대괄호 [] 와 객체 데이터 {} 를 전개연산자를 통해 날려버린다.