[JS] ES6문법 : 전개구문 ( Spread Syntax )에 대해 알아보자 ( 배열 및 객체 복사 , ... 문법 )

 

 

 

 

오늘은 ES6에서 추가 된 문법인 전개구문( Spread Syntax )에 대해 알아보자. 

배열이나 객체를 복사하여, 새로운 배열 및 객체를 생성 할 때 사용하는 문법으로, 연결 및 복사 할 때

유용하게 쓰이는 문법이다.

 

 

1. 배열에서의 Spread Syntax

-----------------------------------------------------------------------------------------------------------------------------------

 

ES6에 추가된 문법으로 기존에는 각 배열을 합쳐 새로운 배열을 생성할 때 concat함수를 이용하고는 했는데,

전개구문이 나오면서 더 깔끔하게 구현할 수 있게 되었다.

 

1) 배열병합

<script>

    // 기존 concat을 활용한 방식
    var arr1 = [1,2,3]; 
    var arr2 = [4,5,6]; 

    var arr = arr1.concat(arr2); 
    console.log(arr); // [ 1, 2, 3, 4, 5, 6 ] 

    // ES6 spread operator을 활용한 방식
    var arr1 = [1,2,3]; 
    var arr2 = [4,5,6]; 

    var arr = [...arr1, ...arr2]; 
    console.log(arr); // [ 1, 2, 3, 4, 5, 6 ] 

   // ES6 spread operator를 사용한 다양한 형태의 구현
    var arr1 = [1,2];
    var arr2 = [0, ...arr1, 3, 4];

    console.log(arr2); // [0, 1, 2, 3, 4]
    
</script>

 

2. 배열복사

<script>

    // Spread Syntax 활용한 배열복사
    var arr1 = [1,2,3]; 
    var arr2 = [...arr1]; 

    console.log(arr1); // 1,2,3
    console.log(arr2); // 1,2,3

    arr2 = [4,5,6]; // arr2 값 변경

    console.log(arr1); // 1,2,3
    console.log(arr2); // 4,5,6

    // 원본배열은 변하지 않음..
    
</script>

 

 

2. 객체에서의 Spread Syntax

-----------------------------------------------------------------------------------------------------------------------------------

 

ES9에 추가된 문법으로 객체를 복사 및 조합할 때 사용 됨. 배열 전개구문을 지원하는 브라우저에서 지원한다고 한다.

사용법은 배열과 비슷하다.

 

<script>

    var currentState = { name: '봄봄', sex: 'male'};
    currentState = { ...currentState, age: 20}; 

    console.log(currentState)// {name: "봄봄", sex: "male", age: 20}

    currentState = { ...currentState, name: '모모', age: 20}; 
    console.log(currentState); // {name: "모모", sex: "male", age: 20}

</script>

 

위 코드에서 동일한 키값을 가진 value에 대해서는 값이 업데이트 되는 것을 확인 할 수 있다.

즉, 객체에서는 같은 값이 있으면 덮어씌워지니, 배열과 다르다는 것에 주의가 필요하다.