Spread / Rest 문법
10291 단어 JavaScriptJavaScript
이전에 array를 merge하는 방법에서 사용하고 포스팅 했었던 기억이 있다. (링크)
Rest 문법과 함께 다시 정리하려 한다.
🍫 Spread 문법
- 특정 배열 혹은 객체 값을 복제하는 문법이다.
- 주로 배열을 풀어서 인자로 전달하거나, 배열을 풀어서 각각의 요소로 넣을 때 사용된다.
...
을 이용해 표현한다.- immutalbe 해서 기존 배열을 변형시키진 않는다. 바꾸고 싶으면 새로 할당해야한다.
function sum (x,y,z) {
return x + y + z;
}
const numbers = [1,2,3]
sum(...numbers); // 6
🍫 Rest 문법
- 파라미터를 배열의 형태로 받아서 사용할 수 있다.
- 즉, 함수를 호출할 때 함수의 파라미터(매개변수)를 spread operator(...) 로 작성한 형태다.
Rest
파라미터를 사용하면 함수의 파라미터로 오는 값들을 모아서 하나의 "배열"로 만들어준다.Spread
가 기존의 배열을 펼쳐서 표현한다면,Rest
는 배열이 아닌 개별 요소들을 하나의 배열로 만들어 준다.
function add(...rest) {
let sum = 0;
for (let p of rest) {
sum += p;
}
return sum;
}
console.log(add(1,2,3)); // 6
위 예시에서 add라는 함수의 파라미터를 ...rest
로 설정했다.
add (1,2,3) 처럼 파라미터에 1,2,3 을 넣어주면
함수가 실행될 때 배열 [1,2,3] 으로 만들어준다.
그래서 for of 문 사용이 가능해져 위와 같은 결과가 나온다.
(참고 : 배열과 객체에서의 for of, for in)
다음과 같이 기본인자를 추가해서 사용하는 방법도 가능하다.
function addMul (method, ...rest) {
if (method === 'add') {
let sum = 0;
for (let p of rest) {
sum += p;
}
return sum;
}
if (method === 'multiply') {
let mul = 1;
for (let p of rest) {
mul *= p;
}
return mul;
}
}
console.log(addMul('add',1,2,3,4)); // 10
console.log(addMul('multiply', 1,2,3,4)); // 24
단, rest 파라미터는 항상 제일 마지막 파라미터로 있어야 한다.
function addMul( ...rest, method){ } 이런식으론 사용 불가능하다.
🍫 구조 분해 할당(Destructing)
- 배열이나 객체의 속성을 해체하여 그 값을 변수에 담을 수 있게끔 하는 Javascript 표현식이다.
- spread로 값을 해체한 뒤에, 개별 값을 변수에 새로 할당하는 과정이다.
배열 case
const [a, b, ...rest] = [1, 2, 3, 4, 5]
a; // 1
b; // 2
rest // [3,4,5]
rest라는 변수에 [ 3, 4, 5 ] 라는 배열이 할당 된다.
객체 case
const {a, b, ...rest} = {c :1, a: 2, b: 3, d: 4, e: 5};
a; // 2
b; // 3
rest // { c:1, d: 4, e:5 }
rest라는 변수에 { c:1, d:4, e:5 } 라는 객체가 할당 된다.
Author And Source
이 문제에 관하여(Spread / Rest 문법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@taero30/Spread-Rest-문법저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)