[Javascript] 전개 연산자 (Spread Operator)

전개 연산자(Spread Operator)란?

배열의 요소나 객체를 나열해주는 연산자로,
배열이나 객체의 복사본(원본에 영향을 미치지 않는)을 만들 수 있으며, 여러 개의 배열이나 객체를 손쉽게 병합할 수 있다.
또한, 함수의 매개변수나 인자 값으로도 사용이 가능한 연산자

🔥 전개 연산자 사용법

1. 배열 복사

let numArr = [1,2,3,4,5,6];
let copyNumArr = [...numArr];

console.log(copyNumArr); // [1,2,3,4,5,6]
console.log(numArr === copyNumArr); // false

numArr이라는 배열의 값을 전개해서 copyNumArr 변수에 저장했다.
출력했을때의 값은 같으나 다른 주소값을 가지고 있는 다른 변수이다.

2. 배열 병합

let leftArr = [1,2,3,4,5];
let rightArr = [6,7,8,9,10];

leftArr.push(...rightArr);

console.log(leftArr); // [1,2,3,4,5,6,7,8,9,10]

만약 전개 연산자를 사용하지 않은 코드라면

let leftArr = [1,2,3,4,5];
let rightArr = [6,7,8,9,10];

leftArr.push(rightArr);

console.log(leftArr); // [1,2,3,4,5,[6,7,8,9,10]]

출력값을 볼 때 2차원 배열이 된다.

3. 배열 중간 값 병합

let leftArr = [1,2,3,4,5];
let rightArr = [6,7, ...leftArr, 8,9,10]; // 중간에 전개 연산자를 활용한 배열 삽입

console.log(rightArr); // [6,7,1,2,3,4,5,8,9,10]

4. 객체 전개 연산자

const obj = {
	"Name":"AJu",
    "Git":"zoz0312"
}
const test_obj = {
	"test1":1,
    "test2":2
}

//ES6
const a_merge = { obj, test_obj }
const b_merge = { ...obj, ...test_obj}

console.log(a_merge);
/*
	obj: {
    	"Name":"AJu",
        "Git":"zoz0312"
    },
    test_obj: {
    	"test1":1,
        "test2":2
    }
*/
console.log(b_merge);
/*
	"Name":"Aju",
    "Git":"zoz0312",
    "test1":1,
    "test2":2
*/

Merge 진행 시, Object 1Depth 이하의 요소들만 가져오고 싶은 경우 전개 연산자 활용이 용이하다.

5. 함수의 매개변수로 전개 연산자 사용

let sum = function(...arr){
	let result = 0;
    for (i of [...arr]){
    	result += i;
    }
    return result;
}

console.log(sum(1, 100, 1000, 100000)); // 101101
console.log(sum(1,2,3,4,5,6,7,8,9,10)); // 55