컴퓨터 언어에도 생략부호(...)가 존재한다. Spread syntax와 Rest parameter가 바로 그것이다. 이번 시간은 Spread와 Rest가 무엇인지, 생략부호(...)가 자바스크립트에서는 어떻게 쓰이는지를 알아볼 시간이다.
Spread 문법
주로 배열을 풀어서 인자로 전달하거나, 배열을 풀어서 각각의 요소로 넣을 때 사용한다.
function sum(x, y, z) {
return x + y + z;
}
const numbers = [1, 2, 3];
sum(...numbers) // 6, 배열을 '풀어' 각각의 요소로 넣음간단히 생각하면, ...배열은 그 배열의 대괄호([])를 벗겨준다.
그렇게 벗겨낸 ...배열을 다른 곳에다 담아 사용하는 것이다!
변수 = ...배열 이런식의 사용은 허락되지 않는다. 어딘가((), {}, [])에 들어가긴 해야한다.
Rest 문법
매개변수(parameter)를 배열의 형태로 받아 사용할 수 있다. 파라미터 개수가 가변적일 때 좋다.
function sum(...theArgs) {
return theArgs.reduce((previous, current) => {
return previous + current;
});
}
sum(1,2,3) // 6
sum(1,2,3,4) // 10배열에서 사용하기
Spread 문법은 배열에서 아주 유용하다.
1. 배열 합치기
let squirrel = ['dodam', 'chorong'];
let animal = ['cat', ...squirrel, 'dog', 'bird'];
// lyrics === ['cat', 'dodam', 'chorong', 'dog', 'bird'];let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];
arr1 = [...arr1, ...arr2]; // spread 문법은 기존 배열을 변경하지 않으므로 arr1의 값을 바꾸려면 새로 할당해야 한다.
// arr1 === [0, 1, 2, 3, 4, 5];2. 배열 복사
let arr = [1, 2, 3];
let arr2 = [...arr]; // arr.slice()와 유사하다
arr2.push(4); // 마찬가지로 immutable하여 arr2를 수정한다고 arr이 바뀌지는 않는다!
// arr === [1, 2, 3];
// arr2 === [1, 2, 3, 4];* immutable: Spread 문법은 기존 배열, 객체를 변경하지 않는다!
객체에서 사용하기
let obj1 = { foo: 'bar', x: 42 };
let obj2 = { foo: 'baz', y: 13 };
let clonedObj = { ...obj1 };
let mergedObj = { ...obj1, ...obj2 };
// clonedObj === { foo: 'bar', x: 42 }
// mergedObj === { foo: 'baz', x: 42, y: 13 }함수에서 나머지 매개변수 받아오기
function myFun(a, b, ...manyMoreArgs) {
console.log("a", a);
console.log("b", b);
console.log("manyMoreArgs", manyMoreArgs);
}
myFun("one", "two", "three", "four", "five", "six");
// console:
// a one
// b two
// manyMoreArgs [ "three", "four", "five", "six" ];* 나머지 매개변수들을 배열의 형태로 받아온다.
구조 분해 (Destructing)
분해 후 새 변수에 할당
- 배열
const [a, b, ...rest] = [10, 20, 30, 40, 50];
// a: 10
// b: 20
// rest: [30, 40, 50];- 객체
const {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}
// a: {a: 10}
// b: {b: 20}
// rest: {c: 30, d: 40}객체에서 구조분해 할당을 사용하는 경우, 선언자(const, let, var)와 함께 사용하지 않으면 에러 발생 가능성이 있다.
선언 없는 할당의 경우 다음과 같이 사용한다:
var a, b;
({a, b} = {a: 1, b: 2});
// var {a, b} = {a: 1, b: 2}와 같다{a, b} = {a: 1, b:2} : 이것은 유효한 독립 구문이 아니다. 좌변의 {a, b}이 블록으로 간주되기 때문!
(...) 표현식 앞에는 세미콜론이 있어야 한다. 그렇지 않으면 이전 줄과 연결되어 함수를 실행하는데 이용될 수도 있다.
fine.
람쥐