배우긴 어려워도 유용한 syntax들이 있다.
일반적으로 나는(멍청한 나는ㅠ) 이론들을 한번에 이해 못하고
실제 사용하다가 어부지리로 이해하는 경우가 많은데
내가 경험한 사례를 기록해두려 한다.
(자주 까먹어서 제발 또 까먹지 말라고)
일반적으로 spread operator
의 경우 해당 객체의 정보를 복제할 때 많이 쓰인다.
한국어로 번역하자면 흩뿌리는 연산자? 로 객체의 환경을 먼저 분해한 후, 값들을 새로운 선언에 대입할 수 있다.
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`]
const people = {
name: 'kim',
age: 29,
hasOwnJob: false,
}
const newPeople = {...people}
console.log(newOBJ)
// => {name: 'kim', age: 29, hasOwnJob: false }
newPeople
이 만들어지는 과정은 먼저 people
의 값을 참조한 후 ...
에 의해 [] || {}
는 분해되게 된다. 남은 값들은 다시금 newPeople
의 [] || {}
에 의해 감싸지게 되며 복제 된 것과 같은 결과를 나타내게 된다.
주로 함수의 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
을 통해 파리미터 수와 상관없이 알아서 순서대로 값들을 리턴한다. 특히 선택적인 유저 데이터 값을 인풋하는데 사용하기 용이하다.
물론 함수가 아닌 상황 object
나 array
의 나머지 데이터들을 표현하는데 사용할 수도 있다.
개인적으로 이해한 부분들을 참고하여 작성한 것 입니다.
오류가 있을 수 있습니다.
댓글을 통해 상세사항을 작성해주시면 제가 공부하는데 큰 도움이 됩니다.