rest, spread 문법에 대해 알아보기 전에 파라미터와 아규먼트에 대해 먼저 알아보자!
1.파라미터 & 아규먼트
- 아규먼트란 함수가 실행될 때 넣는 값
- 파라미터란 함수에서 받을 수 있는 변수
function add(val1,val2) { //val1,val2가 파라미터
return val1 + val2;
}
add(2,3) // 2와 3이 아규먼트
add(1,2,3,4) //파라미터는 2개밖에 없지만 아규먼트는 기존 2개를 초과할 수 있다.2.파라미터 기본값
ES6부턴 함수 파라미터에 기본값을 설정할 수 있습니다.
ES5
function add(x,y) {
x = x || 0 //매개변수 x에 인수를 할당하지 않은 경우 기본값을 0으로 할당
y = y || 0 //매개변수 y에 인수를 할당하지 않은 경우, 기본값을 0으로 할당
return x + y;
}
console.log(add()); //0
console.log(add(1,2); //3
ES6
ES6부턴 함수 파라미터에 기본값 설정이 가능하다.
function add(x=0,y=1) { //파라메터에 기본값을 설정할 수 있다.
return x + y //1;
}
console.log(add()) // 1
console.log(add(2,5))// 73. arguments
아규먼트는 4개인데 파라미터는 2개일 경우 어떻게???
함수 내부에서 arguments를 사용할 수 있습니다.
arguments란 모든 아규먼트를 유사배열 형태로 참조하는 값입니다.
function f(val1,val2) {
//인수가 4개이고 매개변수가 2개 뿐이지만 'arguments'를 사용하면 모든 인자를 "유사배열" 형태로 "참조"한다.
console.log(arguments)
}
f(2,3)
f('a','b','c','d')4.rest 파라미터
ES6부터는 arguments를 사용하지 않습니다. 이제는 rest 파라미터라는 기능을 이용해서 나머지 아규먼트를 배열로 사용할 수 있습니다.
arguments 값을 반환할 때 배열로 반환합니다.
const add = (a,b,...rest) => {
//반드시 마지막 파라미터에 "...을 붙여서 사용해야 합니다."
console.log(a); // 2
console.log(b); // 3
console.log(rest) // [9,9,9,9]
}
add(2,3,9,9,9,9,)
const add2 = (one,two,...args) => {
//파라미터 이름은 자유롭게 할 수 있습니다.
return args // 값을 배열로 반환 =[1,2,3,4,5,6,7,8]
}
const add3 = (...allValues) => {
//아예 모든 파라미터를 ...으로 지정이 가능하다.
console.log(allValues) // [1,2,3,4,5]
}
add2(1,2,3,4,5,6,7,8);
add3(1,2,3,4,5);5. spread 연산자
배열, 문자열 등의 값을 분해해서 개별의 요소로 리턴할 수 있다.
간단하게 배열 분리
const arr = [1,2,3,4,5,"asd"]
console.log(...arr); //1,2,3,4,5,'asd'
console.log(arr);// [1,2,3,4,5,'abd'];
const arr1 = [6,7,8];
console.log(...arr,...arr1) // 1,2,3,4,5,'asd',6,7,8
console.log([...arr,...arr1])//배열로 합쳐서 반환
const copy = [...arr]
console.log(copy); [1,2,3] //배열 복사로 사용가능 6. 객체 spread 연산자
ES6를 넘어 ES9에는 객체 또한 spread 연산자 사용이 가능합니다.
const obj1 = {a : 1, b : 2}
const obj2 = {c : 3}
// 객체 합치기에 사용이 가능!
console.log({...obj1,...obj2}) //{a:1,b:2,c:3}
const copy = {...obj1};
// 객체 복사에도 사용할 수 있습니다.
console.log(copy); // {a : 1, b : 2}
const obj3 = {...obj1, b: 13}
// 기존 객체의 값을 수정해서(원본은 건들지 않음) 새로운 객체 만들기에 사용할 수 있습니다.
console.log(obj3); // {a : 1 , b : 13}
console.log(obj1); // {a : 1, b : 2}7. 배열 디스트럭처링
한글로 구조분해라고 하며 배열의 값 추출을 더욱 쉽게 합니다. ...과 함께 사용하면 배열의 값을 좀 더 간편하게 할당할 수 있습니다.
const arr = [1,2,3]
// 기본적으로 쓰는 구조 분해
const [one ,two, three] = arr;
console.log(one) //1
console.log(two) //2
console.log(three) //3
const arr2 = ['a','b','c','d','e','f']
// ...을 이용하여 나머지를 모두 배열에 몰아넣습니다.
const [a, b, c , ...rest] = arr2
console.log(a) // 'a'
console.log(...rest)// 'd','e','f'
const arr3 = ['z','y','x'];
const [x,y,z] = arr3 //배열은 무조건 순서대로 할당
console.log(x) // z
console.log(y) // y
consple.log(z) // x8. 객체 디스트럭처링
객체 또한 구조분해가 가능합니다.
배열 구조분해와 다른점은 순서대로가 아닌 key에 따라 할당되고 값만 추출 합니다.
const obj1 = {a : 1, b : 2, c : 3}
// key의 값을 가져오므로 순서는 상관 없다.
const {c,b,a} = obj1
const arr = ['x','k','z'];
const [x,z,k] = arr
console.log(x) // 'x'
console.log(z)// 'k'
console.log(k) //"z"
console.log(a)
console.log(b)
console.log(c)
const obj2 = {aa: 1, bb:2, cc : 3, dd : 4 , ee : 5}
//...을 이용하여 나머지를 모두 객체에 몰아 넣는다.
const {aa,bb,...rest} = obj2
console.log(rest) // {cc : 3, dd: 4 , ee : 5 }참조
-기록일지