자바스크립트

JS ES6-Rest Parameter /Spread Operator/Destructuring

KairoYang 2020. 6. 10. 17:16

1.Rest Parameter(나머지 인자들)

 -함수를 정의할 때 마지막 인자 앞에 ...을 붙이면 해당 인자 다음에 오는 모든 나머지 인자들을 배열로 만든다.

 

function foo(a,b,...c){

  console.log(c);

  console.log(Array.isArray(c));}

foo('a','b','c','d','e');

a,b를 제외한 ['c','d','e']이 된다. 그래서

isArray를 하면 true가 된다.

 

2.Spread Operator(전개 연산자)

 -배열이나 객체의 항목을 펼친다.

-함수를 실행 할 때 내가 펼치고자 하는 객체의 앞에 쓰는 것이다.

-객체안에 사용하면 합쳐져서 출력된다.

var arr1= [['a','b','c'],2,3];

var arr2= [4,5,6,]

var total = [...arr1,...arr2];

console.log(total) [['a','b','c'].2.3.4.5.6]

...는 내가 펼치고자 하는 object앞에 ...을 붙이면 된다. 

 

3.Object Destructuring(객체 구조 분해)

-배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 js표현.

var address = {

  city:'new york',

  state:'ny',

  zipcode:'10003'};

var { city,state } = address;

console.log(city + ',' + state);

var city = address.city;

var state = address.state;

 

funtion logAddresss({city,state}){

  console.log(city + ',' + state);

}

logAddress(address)// New York, Ny

-함수의 인자를 줄 수도 있다.

 

 

4.Array Destructuring(배열 구조 분해)

 var number = [1,3,4,5,6];

var [ one,three,four,five,six,seven] = number;

console.log(one)  1

console.log(seven)  undefined

 

var numbers = [1,2,3,4,5]

function sum( [a,b,c,d]){

  console.log(a,b,c,d,e,);}

sum(numbers)   e is noe defined

 

https://im-developer.tistory.com/117?category=846746