[ 05.31 ] Spread / Rest , 구조분해 문법

[Achievement Goal]

Spread 연산자와 Rest 문법의 사용법을 이해한다.
구조분해에 대해 이해한다.

1. Spread

spread 연산자란 ?
이미 배열인 어떠한 상태를 풀어서 인자로 전달하거나,
다른 배열과 합치는 기능을 한다.
기존 배열을 변경하지 않는 immutable 성질을 띄고 있기 때문에 배열을 복사할 때도 유용하다.

let sickBody = ['승모근','허리','손목']
let careBody = ['거북목','무릎','골반',...sickBody]
console.log(careBody) 

// (6) ["거북목", "무릎", "골반", "승모근", "허리", "손목"]

객체에서도 사용이 가능하다.

let person = { name : 'sook',age : '30s' }
let personDetail = { city : 'seoul',job : 'front-end developer'}
let info1 = {...person}
let info2 = {...person,...personDetail};

console.log(info1) 
// {name: "sook", age: "30s"}

console.log(info2) 
// {name: "sook", age: "30s", city: "seoul", job: "front-end developer"}

2. Rest 연산자

rest 연산자란 ?
함수의 파라미터를 배열의 형태(스프레드 연산자)로 받아서 사용할 수 있다.
(파라미터 개수가 가변적일때 유용함.)

function myFunc(a,b,...nums){

console.log('a',a);
console.log('b',b);
console.log('nums',nums);

}

myFunc('one','two','three','four','five')


myFunc 에 있는 문자열 중, a,b 에 해당하는 one 과 two 를 제외한 나머지는 nums 라는 문자열에 배열처리가 되어있다.

rest 파라미터는 이렇게 배열로 해체가 될 수 있다.

3. 구조분해

구조분해로 할당한다는 뜻은
spread 문법을 이용하여 값을 해체한 후 개별 값을 변수에 새로 할당하는 과정을 말한다.


function whois( {displayNm : displayNm, fullNm : {firstNm : name}} ){
  console.log(displayNm + ' is ' + name);
}
let user = {
  id : 100,
  displayNm : 'sook',
  fullNm : {
    firstNm : 'sookyoung',
    lastNm : 'lee'
  }
};

whois(user)
// sook is sookyoung

아.. 어렵다 ,, 구조분해는 아무래도 다시 공부해야 할 것 같다.. ㅠ0ㅠ

좋은 웹페이지 즐겨찾기