[JavaScript] 더 깔끔한 코드를 위해, ES6 펼침 연산자의 다양한 활용법과 장점

 

자바스크립트의 펼침 연산자(Spread Operator)는 배열이나 객체의 요소들을 펼쳐서 개별 요소로 분리하거나, 여러 요소를 하나의 배열 또는 객체로 합치는 기능을 제공합니다. 

펼침 연산자는 ... 기호를 사용하여 표현하며, ES6 (ECMAScript 2015)에서 도입되었습니다.

1. 배열에서의 사용:
펼침 연산자를 배열에서 사용하면 배열의 요소들을 개별적인 값으로 펼쳐줍니다.

const array = [1, 2, 3];
console.log(...array); // 1 2 3 (개별 요소로 출력)

// 배열 합치기
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const combinedArray = [...array1, ...array2];
console.log(combinedArray); // [1, 2, 3, 4, 5, 6]

2. 객체에서의 사용:
펼침 연산자를 객체에서 사용하면 객체의 속성들을 개별적인 키-값 쌍으로 펼쳐줍니다.

const obj = { x: 1, y: 2 };
console.log({...obj}); // { x: 1, y: 2 } (개별 키-값 쌍으로 출력)

// 객체 병합
const obj1 = { x: 1, y: 2 };
const obj2 = { z: 3 };
const mergedObj = { ...obj1, ...obj2 };
console.log(mergedObj); // { x: 1, y: 2, z: 3 }

 

3. 함수 호출에서의 사용:
함수 호출 시, 펼침 연산자를 사용하여 배열의 요소들을 함수의 인자로 전달할 수 있습니다.

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

const numbers = [1, 2, 3];
const result = sum(...numbers);
console.log(result); // 6

 

4. 문자열에서의 사용:
문자열을 펼침 연산자로 분리하면, 각 문자를 개별 요소로 분리할 수 있습니다.

const str = "hello";
console.log(...str); // "h e l l o"

 

펼침 연산자는 배열과 객체를 다루는 작업을 더 간결하고 편리하게 만들어주며, 함수 호출 등에서 유용하게 사용됩니다. 

ES6 이후에는 많은 자바스크립트 코드에서 펼침 연산자를 활용하여 가독성과 효율성을 높이는 것이 일반적입니다.