spread operator, concat()

spread operator

ES6의 전개 연산자(spread operator)는 독특하면서도 매우 유용한 문법이다. 전개 연산자는 나열형 자료를 추출하거나 연결할 때 사용한다. 사용 방법은 배열이나 객체, 변수명 앞에 마침표 3개를 사용한다. 다만 배열 [], 객체 {}, 함수 인자 표현식 () 안에서만 사용해야 한다.

// 배열 병합

let array1 = ['one', 'two'];
let array2 = ['three', 'four'];

const combined = [...array1, ...array2];
// 결과 : combined = ['one', 'two', 'three', 'four']

const [ first, second, three = "empty", ...others ] = array1;
// first = 'one' , second ='two', three = 'empty', others = []

// 객체 병합

let objectOne = { one : 1, two : 2, other : 0};
let objectTwo = { three : 3, four : 4, other : -1};

let combined2 = { 
    ...objectOne,
    ...objectTwo,
};
//combined2 = {one : 1, two : 2, other : 0, three : 3, four : 4, other : -1};

let combined3 = { 
    ...objectTwo,
    ...objectOne,
};
//combined2 = {one : 1, two : 2, three : 3, four : 4, other : 0};
// => 두 객체를 병합할 때 중복된 키 값들은 마지막에 사용한 객체의 값으로 덮어쓴다.

let { other, ...others2} = combined3;
// others = {one : 1, two : 2, three : 3, four : 4}
// => 객체에서 특정 값을 추출할 때는 추출하려는 
// 키 이름(other)을 맞추고 나머지는 전개 연산자로 선언된 변수(others2)에 할당 가능

concat()

자바스크립트의 concat() 함수는 두 개의 문자열을 하나의 문자열로 만들어주는 역할을 하는 함수이다. 입력값을 문자열 대신 배열을 사용하여 두 개의 배열을 하나의 배열로 만들어주는 역할도 함께 하는 함수이다.

참고로 기존 배열을 변경하지 않으며 추가된 새로운 배열을 반환하게 된다 => 무결성 내장 함수

const num1 = 1;
const num2 = num1 * 3;
//num2 = 3

const str1 = "문자";
const str2 = str1 + '추가';
//str2 = "문자추가"

const arr3 = [];
arr4 = arr3.concat(1);
// arr4 = [1]

const arr5 = [...arr4, 2, 3];
//arr5 = [1,2,3]

const arr6 = arr5.slice(0,1);
//arr6 = [1], arr5 = [1,2,3]

const [first, ...arr7] = arr5;
//arr7 = [2,3], first = 1

const obj3 = {name : "서지원", age : 25};
const objValue = {name : "서지원123", age : obj3.age};
const obj4 = {...obj3, name : "서지원 12345"}
//obj4 = { name : "서지원123", age : 25}
const { name, ...obj5} = obj4;
//obj5 = { age : 25}

배열에 새로운 값을 추가할 때는 push() 함수 대신 concat() 함수를, 삭제할 때는 pop(), shift() 대신 slice(), concat()함수에 전개 연산자를 조합하여 사용한 점에 집중해보자

이렇게 하면 새 값을 할당하는 것이 아니라 기존의 값을 이용(추출)하여 새 불변 변수에 할당하는 것이므로 괜찮다.

무결성 함수는 객체나 배열을 직접 수정하는 것이 아니라 새 결과를 반환하는(무결성 제약 조건을 지키는) 함수를 말한다.

• 가변 내장 함수 : push(...items), slice(s, c, ...items), pop(), shift()
• 무결성 내장 함수 : concat(...items), slice(0, s), .concat(...items, slice(s+c)), slice(0, len-1), slice(1)

불변 변수를 사용하면 무결성 제약 규칙에 의해 변수가 변하는 시점을 쉽게 파악할 수 있고, 수정 전과 후의 변수 값을 비교할 수 있어 가변 변수보다 유용하다.

실제로 실무에서도 가변 변수보다 불변 변수를 더 많이 사용한다고 한다. 따라서 실습 동안에는 최대한 불변 변수만 사용한다.