자바스크립트 14 ES6 문법-spread/rest 문법

1. spread 문법 (전개 구문) 

-> 함수 호출, 배열 리터럴과 문자열, 객체 리터럴

: 주로 배열을 풀어서 인자로 전달하거나, 배열을 풀어서 각각의 요소를 넣을 때에 사용함

 

 

function sum(x,y,z) {
	return x+y+z;
 }
 
 const numbers = [1,2,3];
 
 sum(...numbers) // 6
 
 // sum(1,2,3)과 동일함

 

2. rest 문법 (나머지 매개변수)

-> 함수의 마지막 매개변수 앞에 ...를 붙이면, 모든 후속 매개변수를 배열에 넣도록 지정함. 마지막 매개변수만 나머지 매개변수로 설정할 수 있음. 

-> Array 인스턴스이므로, sort, map, forEach, pop 등의 메서드를 직접 적용할 수 있음. 

-> .length 속성도 사용 가능함. 

 

: 파라미터를 배열의 형태로 받아서 사용할 수 있음. 파라미터 개수가 가변적일 때 유용함.

 

function sum(...theArges) {
	return theArgs.reduce((previous, current) => {
    	return previous + current;
        });
    }
    
 sum(1,2,3) // 6
 sum(1,2,3,4) // 10

 

 

=> 배열에서 사용하기

 

 

1. 배열 합치기

 

let parts = ['shoulders', 'knees']
let lyrics = ['head', ...parts, 'and', 'toes']

console.log(lyrics) // ['head', 'shoulders', 'knees', 'and', 'toes']

// immutable

let arr1 = [0,1,2]
let arr2 = [3,4,5]

arr1 = [...arr1, ...arr2]

console.log(arr1) // [0,1,2,3,4,5]

 

2. 배열 복사

 

let arr = [1,2,3]
let arr2 = [...arr] // arr.slice() 와 유사
arr.push(4)

console.log(arr) // [1,2,3]
console.log(arr2) // [1,2,3,4]

 

=> 객체에서 사용하기

 

let obj1 = { foo: 'bar', x: 42 }
let obj2 = { foo: 'baz', y: 13 }

let clonedObj = {...obj1} // { foo: 'bar', x: 42 }
let mergedObj = {...obj1, ...obj2} // { foo: 'baz', x: 42, y: 13}

 

=> 함수에서 나머지 파라미터 받아오기

 

function myFun(a,b,...manyMoreArgs) {
	console.log("a", a);
    console.log("b", b);
    console.log("manyMoreArges", manyMoreArgs);
    }
    
 myFun("one", "two", "three", "four", "five", "six");
 
 // a one
 // b two
 // manyMoreArgs ['three', 'four', 'five', 'six']
 
 + 매개변수가 세개만 들어온다면? ['three']
 + 매개변수가 두개만 들어온다면? []

 

+ rest 파라미터를 일반 매개변수와 함께 사용하기

 

function multiply(multiplier, ...theArgs) {
	return theArgs.map(element => {
    	return multiplier * element
        })
    }
    
 let arr = multiply(2, 15, 25, 42)
 console.log(arr) // ?