[Javascript VS ES6] 전개 연산자

// javascript

var arr1 = ['str1', 'str2'];
var arr2 = ['str3', 'str4'];

var obj1 = { key1 : "key1", key2 : 'key2' }
var obj2 = { key2 : 'str2', key3 : "key3", key4 : 'key4' }

function js_Test() {
    // javascript array merge
    var mergeArr = [].concat(arr1, arr2);
    var merge2Arr = [arr1[0], arr1[1], arr2[0], arr2[1]];

    console.log('js Test ---------------------');
    console.log('array merge test 1 : ' + mergeArr);
    console.log('array merge test 2 : ' + merge2Arr);

    // javascript object merge
    var mergeObj = Object.assign({}, obj1, obj2);
    console.log(`mergeObj : ${JSON.stringify(mergeObj)}`);
}

js_Test();

// ES6

var arr1 = ['str1', 'str2'];
var arr2 = ['str3', 'str4'];

var obj1 = { key1 : "key1", key2 : 'key2' }
var obj2 = { key2 : 'str2', key3 : "key3", key4 : 'key4' }

es6_test = () => {
    // es6 array merge
    console.log('es6 Test --------------------');

    let mergeArr = [...arr1, ...arr2];
    const [mer1, ...remain] = mergeArr;
    console.log('array merge test : ' + mergeArr);
    console.log(`array test = mer1 : ${mer1}, remain : ${remain}`);

    // es6 object merge
    let mergeObj = { ...obj1, ...obj2 };
    console.log(`mergeObj : ${JSON.stringify(mergeObj)}`);

    let { key1, key4, key2 , ...remainObj } = mergeObj;

    console.log(`key1 : ${key1}
    key2 : ${key2}
    key4 : ${key4}
    remainObj : ${remainObj}`);

}

es6_Test();

1. 배열(객체) 병합

JS :

 -  var merge2Arr = [arr1[0], arr1[1], arr2[0], arr2[1]]; 

 * 각 배열에 인덱스로 접근해 값을 가져오고 그 값을 배열에 삽입 하는 방법

 

-  var mergeArr = [].concat(arr1, arr2); 

 *   concat()  함수를 이용 하는 방법

    

       

ES6 :  마침표( . ) 3개를 객체명 앞에 붙여서 여러개의 객체 병합이 가능 합니다.

  *  let mergeArr = [...arr1, ...arr2]; 

 

2. 나머지 배열(객체) 값 추출

 *  const [mer1, ...remain] = mergeArr; 

ES6 : mer1 변수에 mergeArr[0] 값을 대입하고 그외 나머지 배열값은 remain 변수에 대입 시켜 줍니다.

 

 

 

참고 도서 : 초보자를 위한 리액트 200제