velopert
07. spread 와 rest 문법 · GitBook
안녕하세요. 패캠에서 강의 듣는 수강자입니다~. 레스트, 스프레드가 엣지에서 작동하지 않더라구요. (10.09.여러개의 input 상태 관리하기 섹션예제) 엣지, 익스 11 등에서도 작동하게 하려면 '...inputs ' 를 대신하여 어떻게 써야 하는지 궁금합니다~!
검색을 해봐도 잘 모르겠습니다. ^^:
답변 부탁드리겠습니다~
이 코드에서는 먼저 slime 이라는 객체를 선언했습니다. 그리고 cuteSlime 이라는 객체를 만들었는데요, 기존에 선언한 slime 을 건들이지 않고 새로운 객체를 만들어서 slime 이 가지고 있는 값을 그대로 사용하였습니다. 그 다음에는 purpleCuteSlime 이라는 객체를 만들었는데요, 이 객체는 cuteSlime 이 가지고 있는 속성을 그대로 사용하면서 추가적으로 color 가 추가되었습니다. 위 코드에서의 핵심은, 기존의 것을 건들이지 않고, 새로운 객체를 만든다는 것 인데요, 이러한 상황에 사용 할 수 있는 유용한 문법이 spread 입니다. 아까 코드는 spread 문법을 사용하면 다음과 같이 작성 할 수 있습니다.
건들이다 라는 표현이 반복적으로 사용되었는데 찾아보니까 건드리다가 맞는 표현이라고 하더라구요 덕분에 리액트 너무 쉽고 재미있게 잘 배우고 있습니다 감사합니다 :D
tdays31님, reduce함수의 두번째 인자값은 초기값이 들어갑니다. numbers[0]가 들어간 이유는 어떤 배열의 숫자가 함수의 인자로 들어와도 배열의 가장 첫번째 인자값부터 비교를 시작하기 위해서입니다. reduce함수가 n번 호출될 때마다 배열의 n번째 값과 비교해서 최대값을 골라냅니다.
function max(...rest) {
return rest.reduce((acc, cur) => (acc < cur ? cur : acc));
}
const result = max(1, 2, 3, 4, 10, 5, 6, 7);
console.log(result);
함수 파라미터에서의 rest 중 function sum(...rest) { return rest; } 부분이요, 앞에 빼는 값 없이 ...을 사용했는데 spread가 아니고 rest인 이유가 있을까요?
rest 설명 부분에 "rest 안에 name 값을 제외한 값이 들어있습니다." -> color 값을 제외한 값이 들어있는 것 아닌가요?
제가 작성한 퀴즈 정답입니다
function max(...rest) {
const [maxNum, ...notMax] = rest.sort((a, b) => b - a)
return maxNum
}
const result = max(1, 2, 3, 4, 10, 5, 6, 7);
console.log(result);
function max(...arr) { return Math.max.apply(null, arr); }
const result = max(1, 2, 3, 4, 10, 5, 6, 7); console.log(result);
function max(...arr) { return arr.reduce((acc, cur) => (acc > cur ? acc : cur), 0); }
const result = max(1, 2, 3, 4, 10, 5, 6, 7); console.log(result);
하나의 퀴즈에도 다양한 답변들이 많아서 재밌네요
