JS - 전개연산자 (Spread Operator)

프로그래머스 연습문제 풀이중 문자열을 배열로 가져오는데 나는 split()메소드를 사용했지만, 다른 사람의 문제 풀이 중 아래와 같은 코드를 보게 되었다.

// 정수 x 가 주어졌을때
x = ""+x;
let xArray = x.split("");
let sum = xArray.reduce((acc, cur) => +acc + +cur);

if(x % sum !== 0) {
   answer = false;
 }
// 내가 작성한 코드

function solution(x) {
    return x%eval([...x.toString()].join("+")) ? false : true;
}
// 다른 사람이 작성한 코드

[...x.toString()] // x를 문자열로 바꾸고 배열화함.

3줄의 코드를 단 한 줄로 만든것에 감탄하며 위 코드가 전개연산자임을 알게 되었다.

전개연산자란(Spread Operator)?

배열이나 문자열과 같이 반복 가능한 문자를 0개 이상의 인수 (함수로 호출할 경우) 또는 요소 (배열 리터럴의 경우)로 확장하여, 0개 이상의 키-값의 쌍으로 객체로 확장시킬 수 있다.

배열 조합 (새로운 배열 생성)

//concat() 경우
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arrWrap = arr1.concat(arr2);

console.log(arrWrap);	// [1, 2, 3, 4, 5, 6]

//전개연산자의 경우
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arrWrap = [...arr1, ...arr2];

console.log(arrWrap);	// [1, 2, 3, 4, 5, 6]

concat() 메서드보다 간결하고 가독성이 좋아진다.
그리고 concat()의 경우는 기존 배열의 끝에서부터 추가만 되지만, 전개연산자는 기존 배열의 아무곳에나 추가할 수 있다.

const arr = [4, 5, 6];
const arrWrap = [1, 2, 3, ...arr, 7, 8, 9];

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

배열 조합 (기존 배열 변경)

새로운 조합배열을 생성하는게 아닌 기존 배열에 요소를 추가한다면 push()메소드를 이용했다.

// push() 메서드를 이용하는 경우 2차원 배일이 된다.
const arr1 = [1, 2, 3];
const arr2 = [4, 5];
arr1.push(arr2);

console.log(arr1);		// [1, 2, 3, [4, 5]]

// push.apply() 메서드를 이용해야 한다.
const arr1 = [1, 2, 3];
const arr2 = [4, 5];
Array.prototype.push.apply(arr1, arr2);

console.log(arr1);		// [1, 2, 3, 4, 5]

// 전개연산자를 이용하면 1차원 배열로 간결하고 가독성 있게 조합이 가능하다.
const arr1 = [1, 2, 3];
const arr2 = [4, 5];
arr1.push(...arr2);

console.log(arr1);		// [1, 2, 3, 4, 5]

전개연산자를 이용한 할당은 1차원에서만 유효하다.
참고: Spread 문법은 배열을 복사할 때 1 레벨 깊이에서 효과적으로 동작합니다. 그러므로, 다음 예제와 같이 다차원 배열을 복사하는것에는 적합하지 않을 수 있습니다. (Object.assign() 과 전개 구문이 동일합니다) [참조]

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

✔ 전개연산자로 할당하면 2차원 형태가 되지 않는다.
✔ 전개연산자로 할당하면 기존 배열을 보전 할 수 있다.

배열 역순

배열을 역순하는 reverce() 메서드는 기존의 배열을 변경하기에 불편한 경우가 있다.

const arr1 = [1, 2, 3];
const arr2 = arr1.reverse();

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

기존의 배열을 유지하면서 역순이 필요한 경우 전개연산자를 사용하면 유용하다.

const arr1 = [1, 2, 3];
const arr2 = [...arr1].reverse();

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

배열 나머지 할당

전개연산자를 이용하면 특정 요소를 사용하고 나머지를 따로 할당 할 수 있다.

const [first, second, ...rest] = [1, 2, 3, 4, 5];
console.log(first);			// 1
console.log(second);		// 2
console.log(rest);			// [3, 4, 5]

객체에서의 조합

const obj1 = {
 	a: 'A',
  	b: 'B'
};

const obj2 = {
 	c: 'C',
  	d: 'D'
};

(1)
const objWrap = {obj1, obj2};
console.log(objWrap);

// objWrap = {obj1, obj2} 를 사용하면 2차원 객체가 된다.
{
 	obj1: {
     	a: 'A',
        b: 'B'
    },
   	obj2: {
     	c: 'C',
        d: 'D'
    }
}

(2)
const objWrap = {...obj1, ...obj2};
connsole.log(objWrap);

// objWrap = {...obj1, ...obj2} 전개연산자를 사용하면 하나의 객체로 할당된다.
{
 	a: 'A',
    b: 'B',
    c: 'C',
	d: 'D'    	
}

문자열에서 사용예

1. 주어진 문자열의 길이가 4 혹은 6인 경우
2. 주어진 문자열이 '숫자'로만 이루어졌는지 확인

function solution(s) {
    var answer = true;

    if(s.length === 4 || s.length ===6) {
        if([...s].every(c => '0123456789'.includes(c))) {
            return answer
        }
    }
    return answer = false;

}