[JS] 배열 등을 풀어 헤치는 Spread Operator(스프레드 연산자)

🔥 배열을 풀어 헤쳐보자

const abc캡슐 = ['a', 'b', 'c'];

위 abc캡슐 안에 담긴 'a', 'b', 'c'를 각각 console.log로 풀어본다면 어떤 방법이 있을까?

const abc캡슐 = ['a', 'b', 'c'];

// 1번째 방법
console.log(abc캡슐[0], abc캡슐[1], abc캡슐[2]); 

// 2번째 방법
for (const key of abc캡슐) {
  console.log(key);
}

// 결과 : 'a', 'b', 'c'

뭐, 이것 뿐만 아니라 다양한 방법들이 있을 것이다. 위 2가지 방법은 기본적으로 자바스크립트를 배우면 쉽게 할 수 있는 구문이라 생각한다.

그런데, 뭔가 코드가 우아(?)하지 않은 느낌이다. 더 쉽게, 섹시하게(?) 할 수 있는 방법이 있을 것만 같단 말이다.

✅ Spread Operator로 섹시하게 풀어 헤치기

const abc캡슐 = ['a', 'b', 'c'];

// 3번째 방법
console.log(...abc캡슐);

위와 같이 배열이 담긴 변수 앞에 ...만 넣어주면 끝! 이러면 배열을 풀어 헤칠 수 있다. 정말 우아하다.

➕ 그 뿐만이 아니다

const 목표 = "원아는 개발찐천재가 될거야";

console.log(...목표); // 결과 : '원', '아', '는', ' ', '개', '발', ...

문자열도 풀어 헤칠 수 있다.

🩹 합치고 붙이고

배열끼리 또는 객체끼리 합칠 수도 있다.

// 배열 합치기
const ab캡슐 = ['a', 'b'];
const cde캡슐 = ['c', 'd', 'e'];

const abcde캡슐 = [...ab캡슐, ...cde캡슐];

console.log(abcde캡슐); // 결과 : ['a', 'b', 'c', 'd', 'e']

// 객체 합치기
const 체크리스트1 = {
  개발: "천재되기",
  밥: "꼭꼭 씹어먹기",
};

const 체크리스트2 = {
  공부: "매일하기",
};

const 나의체크리스트 = {
  ...체크리스트1,
  ...체크리스트2,
};
  
console.log(나의체크리스트); // { 개발: "천재되기", 밥: "꼭꼭 씹어먹기", 공부: "매일하기" }

참고로 Spread Operator(...)는 함수의 소괄호, 객체의 중괄호, 배열의 대괄호 안에서 사용해야 한다. 그렇지 않으면 에러가 발생할 수 있다.

끄-읕-!