자바스크립트 펼침 연산자(spread operator, 스프레드 오퍼레이터) 활용 방법 총정리
ES6에서 새롭게 도입된 펼침 연산자는 마침표 점 3개(...)로 표시하는 연산자입니다.
3점 연산자, 또는 스프레드 연산자라고도 합니다.
펼침 연산자는 자바스크립트의 코딩 방식을 획기적으로 개선해주는 연산자입니다.
복잡한 객체 나열을 단순화하거나 객체의 병합, 그리고 함수의 인자 처리를 아주 단순하게 처리할 수 있도록 개선해줍니다.
코딩을 효율적으로 할 수 있도록 해줄 뿐만 아니라 작성한 코드의 유연성까지 높여주기 때문에 코드의 유지보수가 훨씬 쉬워집니다.
ES6에서부터 도입된 수많은 자바스크립트 기능 추가 중에서 가장 획기적이라고 할 수 있습니다.
펼침 연산자는 범용 연산자이기 때문에 자바스크립트 코드 전반에 거쳐 다양하게 사용할 수 있습니다.
펼침 연산자를 사용해서 보다 나은 코딩을 하는 방법들을 하나씩 확인해보겠습니다.
배열에 사용하기
- 문자열을 문자 배열로 나누기
model 문자열 변수의 문자열을 빈 배열([])에 펼쳐서(...) 배열 요소로 넣는 개념으로 적용됩니다.
펼침 연산자가 없으면 문자열의 문자 하나를 가져오는 charAt() 메서드를 이용해서 루프 문으로 하나씩 빈 배열에 push() 메서드로 집어넣는 방식으로 문자 배열을 만들어야 합니다.
let model = 'galaxy21';
let model_chars = [...model];
console.log(model_chars); //['g', 'a', 'l', 'a', 'x', 'y', '2', '1']- 다른 배열의 모든 요소 추가
배열 끝에 새 요소를 추가하는 push() 메서드는 여러 개의 인자를 받을 수 있습니다.
펼침 연산자를 사용해 다른 배열의 요소 전체를 배열 끝에 한 번에 추가할 수 있습니다.
let numArr = [3,7,128,4,50];
let strArr = ['라이언', '어피치', '콘'];
numArr.push(...strArr);
console.log(numArr); //[3, 7, 128, 4, 50, '라이언', '어피치', '콘']- 배열 요소 삽입과 배열 병합
배열에 다른 배열을 끼워넣거나, 2개 이상의 배열을 하나로 합치는 배열 단위의 조작도 펼침 연산자를 사용하면 반복 루프 문 없이 간편하게 할 수 있습니다.
let numArr = [3,7,128,4,50];
let strArr = ['라이언', '어피치', '콘'];
let concatArr = [...numArr, ...strArr];
console.log(concatArr); //[3, 7, 128, 4, 50, '라이언', '어피치', '콘']
console.log([4,...numArr, 25]); //[4, 3, 7, 128, 4, 50, 25]- 나머지 요소 배열
배열 요소들을 변수에 일괄 대입을 할 때, 앞쪽 배열 요소부터 변수에 대입을 하고 남은 배열 요소들은 마지막 펼침 연산자로 표시한 변수에 담아서 배열로 반환할 수 있습니다.
나머지 요소 배열은 말 그대로 나머지 배열 요소들을 반환하는 것이기 때문에 변수 목록의 맨 끝에만 올 수 있습니다.
let numArr = [3,7,128,4,50];
let [first, second, ...arrRest] = numArr;
console.log(first, second, arrRest); //3 7 [128, 4, 50]객체에 사용하기
- 객체 요소를 변수에 대입하기
펼침 연산자를 이용해 키와 값으로 구성된 객체를 개별 변수와 변수 값으로 손쉽게 분리할 수 있습니다.
키와 값으로 된 객체를 개별 변수로 분리하려면 다음과 같이 펼침 연산자를 사용할 수 있습니다.
let characters = {kakao: '라이언', naver: '브라운', ebs: '펭수'};
let {kakao, ebs, ...restCharacters} = characters;
console.log(kakao, ebs); //라이언 펭수
console.log(restCharacters); //{naver: '브라운'}객체의 키에 해당하는 변수명을 자동 매칭 하는 방식이기 때문에 대입하는 변수명은 객체의 키와 같아야 합니다. 객체의 키와 일치하지 않는 변수명은 키를 찾을 수 없기 때문에 변수의 값이 undefined으로 됩니다.
변수에 대입되지 않은 나머지 객체 요소들을 모아서 새로운 객체로 반환하는 나머지 객체 변수는 펼침 연산자를 붙여서 항상 맨 끝에 와야 합니다. 즉, 변수로 사용할 키에 해당하는 변수명들을 앞쪽에 나열하고, 변수로 뽑아서 사용되지 않은 나머지 객체 요소들은 나머지 객체로 맨 끝에 표시한 변수에 객체로 반환되게 됩니다.
배열과 달리 앞에서부터 순서대로 요소들이 변수에 대입되지 않고 키와 일치하는 변수명에 값이 대입됩니다.
- 객체 병합
2개 이상의 객체를 하나로 병합하거나, 객체에 새로운 객체 요소들을 추가한 새로운 객체를 만들 수 있습니다.
let characters = {kakao: '라이언', naver: '브라운', ebs: '펭수'};
let heroes = {marble: 'ironman', justice: 'batman'};
let universe = {...characters, ...heroes};
console.log(universe); //{kakao: '라이언', naver: '브라운', ebs: '펭수', marble: 'ironman', justice: 'batman'}
console.log({nickelodeon: 'spongebob', ...characters, jibri: 'totoro'}); //{nickelodeon: 'spongebob', kakao: '라이언', naver: '브라운', ebs: '펭수', jibri: 'totoro'}함수 인자에 사용하기
- 가변 인자 개수를 가지는 함수 만들기
함수를 정의할 때 펼침 연산자를 사용해 인자를 한 개만 정의하면 인자의 개수를 유동성 있게 받을 수 있습니다.
완성한 함수에 인자를 넘길 때도 배열 자체를 펼침 연산자로 펼쳐서 인자로 넘기면 되기 때문에 함수 한 개로 다양한 개수의 인자의 합계를 구하는 범용성 있는 함수를 만들 수 있습니다.
function calcSum(...params){
let sum = 0;
for(let num of params){
sum += num;
}
return sum;
}
let numArr = [3,7,128,4,50];
console.log(calcSum(...numArr)); //192- 함수 인자로 나머지 요소 사용
인자를 사용할 때 최소로 필요로 하는 인자 개수가 있을 경우 최소 개수만큼 인자를 표시하고 옵션으로 추가할 수 있는 인자들은 나머지 요소로 인자를 표시하면 최소 인자 개수를 가지면서 가변 인자 개수를 가지는 함수를 만들 수 있습니다.
나머지 요소를 이용하면 두 개 이상의 숫자를 인자로 받아서 처음 두 개 인자의 합이 10보다 작으면 나머지 추가 인자들의 합까지 구해서 반환하고, 10 이상이면 처음 두 개 인자의 합만을 반환하는 함수를 다음과 같이 만들 수 있습니다.
let numArr = [3,7,128,4,50];
function calcSum(a, b, ...params){
let sum = 0;
if(a != undefined && b != undefined){
sum = a + b;
if(sum < 10){
for(let num of params){
sum += num;
}
}
}
return sum;
}
console.log(calcSum(10, 5, ...numArr)); // 15- 수학함수에 활용
자바스크립트의 몇몇 수학 함수들은 다양한 인자 개수를 받아서 계산 결과를 반환할 수 있습니다.
대표적인 내장 수학 함수로 min(), max() 함수가 있습니다.
let numArr2 = [3,7,128,4,50];
console.log(Math.min(...numArr)); //3
console.log(Math.max(...numArr)); //128