Medium - REST and Spread operators in JavaScript ES6
in Trend
Trend 파악을 Medium 기고문 요약 포스팅 - 자바스크립트 ES6에서의 REST와 Spread 연산자들
ES6은 놀라운 피처들로 가득합니다. 그 중하나가 ‘…‘인데 REST나 스프레드 연산자를 유발하는 것 입니다. 차이점은 다음과 같습니다.
Rest operator - 매개변수들로 부터 남은 요소를 모아서 하나의 요소로 압축합니다.
Spread operator - 스프레드 연산자는 순회를 가능하게 합니다. 배열이나 문자열, 확장가능한 객체들이 순회가능합니다.
Rest operator
아래에서 Rest 연산자의 사용법에 대해 보여드리겠습니다. 여러분이 프로젝트나 여러분의 작업에서 코드를 작성할 때 함수의 정의를 전달해야할 필요가 있는데 파라미터가 몇개가 전달될지 모르는 경우가 있습니다. Rest 연산자는 ‘…‘문법을 사용하여 이 문제를 해결합니다.
function addMe(a,b){
return a + b
}
addMe(3,3) = 6
addMe(3,3,3) = 6
두 번째 “addME”의 결과는 여전히 6인데 이것은 함수가 2개의 인자만 허용하고 세번째 인자는 무시되기 때문입니다. 함수가 잠재적으로 많은 수의 매개변수를 받길 원한다면 아래와 같이 작성하시면 됩니다.
function addMe(...mynumber){
return mynumber.reduce((sum,number)=>{
return sum + number;
}, 0)
};
addMe(10,9,8,7,6,5,4,3,2,1);
결과값은 55가 될 것입니다.
“addME”함수는 mynumber라는 매개변수 하나를 받으며 mynumber는 “…“문법을 사용하며 함수로 전달되는 모든 매개변수가 하나의 배열에 담기게 되며 그래서 제가 성공적으로 reduct 함수를 사용할 수 있었던 것입니다. 그래서 acc를 0으로 설정하고 다음 값을 더하는 식으로 해서 수의 핪을 계산했습니다.
Spread operator
스프레드 연산자 Rest 연산자와 반대라고 할 수 있는데 스프레드는 배열과 같은 순회가능한 곳에 다양한 목적으로 쓰이기 때문입니다. 아래의 예제를 봅시다.
const myVariable = ‘myvariable’;
const spreadMe = […myVariable]
console.log(myVariable);
console.log(spreadMe);
코드에서 myVariable 변수는 어떤 문자열을 가지고 있고 다른 spreadMe 변수는 배열의 형태로 변수 이름앞에 ‘…‘이 표시되어 있습니다. 에디터에 코드를 붙여넣고 실행하면 spreadMe에는 myVariable의 모든 문자들이 확장되어 spreadMe 변수에 입력된 것을 볼 수 있을겁니다.
흥미로운 것은 여러분이 처음 배열을 가지고 있고 문자열로 바꾸고 싶을 때 아래와 같이 하면 반대의 결과를 얻을 수 있습니다.
var myTestArray = [‘my’, ‘ test’, ‘ array’];
console.log(myTestArray);
console.log(…myTestArray);
또 다른 경우는 여러개의 배열을 하나로 합치고 싶을 때 아래와 같이 사용할 수 있습니다.
var coloursOne = ['red','blue','green'];
var coloursTwo = ['yellow','purple','pink'];
console.log([...coloursOne,...coloursTwo])
스프레드 연산자를 사용하면 여러분은 splice, split, concat같은 함수를 그만쓰게 되실 겁니다. 독립된 한개의 변수도 하나의 배열로 입력할 수 있습니다.
var coloursOne = ['red','blue','green'];
var coloursTwo = ['yellow','purple','pink'];
console.log(['orange',...coloursOne,...coloursTwo])
배열에 더해서 스프레드 연산자는 말그대로 객체와도 작업을 할 수 있습니다. 이전에 만들어진 객체의 이름앞에 “…“을 붙이면 동일한 문법과 변수를 가진 객체가 생성됩니다.
var obj1 = { foo: ‘bar’, x: 42 };
var obj2 = { foo: ‘baz’, y: 13 };
var cloneObj = {…obj1}
console.log(cloneObj)
그리고 스프레드 연산자는 영리하기 때문에 여러분이 복사하려는 객체에 똑같은 키 값이 있다면 프로퍼티를 덮어쓰지 않도록 할 수 있습니다. 아래의 예제를 보시죠.
var obj1 = { foo: ‘bar’, customKey: ‘obj1 custom key’ };
var obj2 = { foo: ‘baz’, y: 13 };
var cloneObj = {…obj1,customKey:’cloneObj custom key’}
console.log(obj1);
console.log(cloneObj);
obj1은 커스텀 키와 값을 가지고 있고 cloneObj는 커스텀 키라는 동일한 이름의 키 값을 가지고 있습니다. 그러나 저는 다른 프로퍼티들을 사용하길 원했고 그래서 값은 obj1의 것을 가져오지만 커스팀 키 값은 다른 값을 가지도록 하여 덮어쓰지 않았으면 했습니다.
Summary
- ‘…‘연산자의 두 가지 사용법
- Rest - 여러개의 매개변수를 하나의 배열에 담아서 함수에 전달할 수 있다. 매개변수의 갯수가 가변적이거나 모를 때 유용하다.
- Spread - 문자열, 배열, 객체 등을 순회가능하게 만든다. 문자열 처리시 split, concat 등을 손쉽게 처리할 수 있다. 객체의 경우 값을 복사하는데 사용된다.
- 온라인 ES6 IDE - https://repl.it/languages/babel
