[JavaScript/DeepDive]35.스프레드 문법

• ES6에서 도입된 스프레드 문법(전개 문법) ...은 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서(전개, 분산하여, spread) 개별적인 값들의 목록으로 만든다.
• 스프레드 문법을 사용할 수 있는 대상은 Array, String, Map, Set, DOM 컬렉션(NodeList, HTMLCollection), arguments와 같이 for ... of 문으로 순회할 수 있는 이터러블에 한정된다.
  • // ... [1, 2, 3]은 [1, 2, 3]을 개별 요소로 분리한다(-> 1, 2, 3).
    console.log(...[1, 2, 3]); // 1 2 3
    • 이때 1 2 3은 값이 아니라 값들의 목록이다.
      • 즉, 스프레드 문법의 결과는 값이 아니다.
        • 이는 스프레드 문법 ...이 피연산자를 연산하여 값을 생성하는 연산자가 아님을 의미한다.
          • 따라서 스프레드 문법의 결과는 변수에 할당할 수 없다.
            
            
• [35.1] 함수 호출문의 인수 목록에서 사용하는 경우
• 요소들의 집합인 배열을 펼쳐서 개별적인 값들의 목록으로 만든 후, 이를 함수의 인수 목록으로 전달해야 하는 경우가 있다.
  • const arr = [1, 2, 3];
    
    // 배열 arr의 요소 중에서 최대값을 구하기 위해 Math.max를 사용한다.
    const max = Math.max(arr); // -> NaN
    • Math.max 메서드에 숫자가 아닌 배열을 인수로 전달하면 최대값을 구할 수 없으므로 NaN을 반환한다.
• 이 같은 문제를 해결하기 위해 배열을 펼쳐서 요소들을 개별적인 값들의 목록으로 만든 후, Math.max 메서드의 인수로 전달해야 한다.
  • const arr = [1, 2, 3];
    
    // 스프레드 문법을 사용하여 배열 arr을 1, 2, 3으로 펼쳐서 Math.max에 전달한다.
    // Math.max(...[1, 2, 3])은 Math.max(1, 2, 3)과 같다.
    const max = Math.max(...arr); // -> 3

 

 

 

• [35.2] 배열 리터럴 내부에서 사용하는 경우
• 스프레드 문법을 배열 리터럴에서 사용하면 ES5에서 사용하던 기존의 방식보다 더욱 간결하고 가독성 좋게 표현할 수 있다.
• concat
  • 스프레드 문법을 사용하면 별도의 메서드를 사용하지 않고 배열 리터럴만으로 2개의 배열을 1개의 배열로 결합할 수 있다.
    • // ES6
      const arr = [...[1, 2], ...[3, 4]];
      console.log(arr); // [1, 2, 3, 4]
• splice
  • // ES6
    const arr1 = [1, 4];
    const arr2 = [2, 3];
    
    arr1.splice(1, 0, ...arr2);
    console.log(arr1); // [1, 2, 3, 4]
• 배열 복사
  • // ES6
    var origin = [1, 2];
    var copy = [...origin];
    
    console.log(copy); // [1, 2]
    console.log(copy === origin); // false
    • 이때 원본 배열의 각 요소를 얕은 복사하여 새로운 복사본을 생성한다.