Spread & Rest syntax

·2021년 8월 2일
0

javascript

목록 보기
8/13

배우긴 어려워도 유용한 syntax들이 있다.
일반적으로 나는(멍청한 나는ㅠ) 이론들을 한번에 이해 못하고 

실제 사용하다가 어부지리로 이해하는 경우가 많은데
내가 경험한 사례를 기록해두려 한다.
(자주 까먹어서 제발 또 까먹지 말라고)

SPREAD OPERATOR

일반적으로 spread operator의 경우 해당 객체의 정보를 복제할 때 많이 쓰인다.
한국어로 번역하자면 흩뿌리는 연산자? 로 객체의 환경을 먼저 분해한 후, 값들을 새로운 선언에 대입할 수 있다.

Array에서의 사례

const people =  [`kim`, `lee`, `park`];
const people2 = people.slice()
const newPeople = [...people] 

console.log(people, pe,ople2 newPeople)
// => [`kim`, `lee`, `park`], [`kim`, `lee`, `park`], [`kim`, `lee`, `park`]

Object에서의 사례

const people = {
  name: 'kim',
  age: 29,
  hasOwnJob: false,      
}

const newPeople = {...people}

console.log(newOBJ)
// => {name: 'kim', age: 29, hasOwnJob: false }

newPeople 이 만들어지는 과정은 먼저 people의 값을 참조한 후 ... 에 의해 [] || {} 는 분해되게 된다. 남은 값들은 다시금 newPeople[] || {} 에 의해 감싸지게 되며 복제 된 것과 같은 결과를 나타내게 된다.

REST SYNTAX

주로 함수의 parameter의 수를 예상하지 못할 경우 자주 쓰인다. 위의 spread operator와 표현 방법이 똑같아 헷갈리는 경우가 많다.
sperad operator의 경우 객체 안에 한 데 모여있는 값들을 하나하나 대입한다면
rest parameters는 하나의 parameter가 나머지 값들을 총칭한다 보면 좀 더 쉬운 편이다. (그나마 나는 이렇게 이해하는 게 좀 더 편했다)

function returnParameters(param1, param2, ...params  ) {
return `${param1}, ${param2}, ${params}`
}
console.log(returnParameters('kim', 29, 'programming','백수')) 
// => kim, 29, programming,백수

해당 함수에 대해 param1,param2에는 직접적인 결과값을 주어야 하지만 ...params과 같이 REST PARAMETERS을 통해 파리미터 수와 상관없이 알아서 순서대로 값들을 리턴한다. 특히 선택적인 유저 데이터 값을 인풋하는데 사용하기 용이하다.
물론 함수가 아닌 상황 objectarray의 나머지 데이터들을 표현하는데 사용할 수도 있다.

개인적으로 이해한 부분들을 참고하여 작성한 것 입니다.
오류가 있을 수 있습니다.
댓글을 통해 상세사항을 작성해주시면 제가 공부하는데 큰 도움이 됩니다.

profile
새로운 것에 관심이 많고, 프로젝트 설계 및 최적화를 좋아합니다.

0개의 댓글