[자바스크립트] 전개 연산자

자바스크립트 전개 연산자(...)는 배열이나 객체의 요소를 개별 요소로 펼쳐서 사용할 수 있도록 해주는 문법입니다. 마치 배열이나 객체를 "펼쳐서" 다른 곳에 넣는 것처럼 생각하면 쉽습니다.

왜 전개 연산자를 사용해야 할까요?

• 코드 간결화: 반복적인 코드를 줄이고 더 간결하게 표현할 수 있습니다.
• 유연성 향상: 다양한 상황에서 배열이나 객체를 조작하는 방식을 확장할 수 있습니다.
• 가독성 향상: 코드의 의도를 명확하게 전달하여 가독성을 높일 수 있습니다.

전개 연산자 사용법

배열 전개

• 배열 복사:

  const numbers = [1, 2, 3];
  const copiedNumbers = [...numbers];
  

• 배열 병합:

  const array1 = [1, 2];
  const array2 = [3, 4];
  const combinedArray = [...array1, ...array2];
  

• 함수 호출:

  function sum(x, y, z) {
      return x + y + z;
  }
  const numbers = [1, 2, 3];
  const result = sum(...numbers);
  

객체 전개

• 객체 복사:

  const person = { name: '홍길동', age: 30 };
  const copiedPerson = { ...person };

• 객체 병합:

  const person1 = { name: '홍길동' };
  const person2 = { age: 30 };
  const combinedPerson = { ...person1, ...person2 };
  

다양한 활용 예시

• Rest 파라미터와 함께 사용:

  function myFunction(a, b, ...rest) {
      console.log(a, b); // 1, 2
      console.log(rest); // [3, 4, 5]
  }
  myFunction(1, 2, 3, 4, 5);

• 배열 메서드와 함께 사용:

  const numbers = [1, 2, 3];
  const doubled = numbers.map(num => num * 2);
  

• 템플릿 리터럴과 함께 사용:

  const parts = ['안녕하세요', '저는', '홍길동입니다.'];
  const sentence = `${parts.join(' ')}`;

전개 연산자 주의사항

• 얕은 복사: 객체를 복사할 때 내부 객체는 참조가 복사됩니다. 깊은 복사가 필요한 경우에는 별도의 방법을 사용해야 합니다.
• 순서: 전개 연산자는 배열의 순서를 유지합니다.
• 중복된 키: 객체 병합 시 중복된 키가 있으면 나중에 할당된 값이 우선합니다.