[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 13회차 미션

패스트캠퍼스 프론트엔드 인강 13일차 지난시간에 이어 spread와 rest의 차이를 알아보고 reduce를 복습하였다.

 

rest는 spread처럼 ...을 사용해 생김새는 비슷하지만 역할이다르다. spread처럼 객체, 배열, 파라미터함수에 사용할수있다.

 

객체에서의 rest

        const purpleCuteSlime = {
            name : '슬라임',
            attribute:'cute',
            color:'purple'
        }
        //객체 비구조할당
        const {color, ...rest} = purpleCuteSlime
        console.log(color)
        console.log(rest)//컬러를 제외한 name과 attribute가 들어있다.
        

rest대신에 다른 글자로도 바꿀수있다. ...cuteSlime처럼해도 동일한 결과값이 나온다.

 

        const purpleCuteSlime = {
            name : '슬라임',
            attribute:'cute',
            color:'purple'
        }
        //객체 비구조할당
        const {color, ...cute} = purpleCuteSlime
        console.log(color) //purple
        console.log(cute)//컬러를 제외한 name과 attribute가 들어있다.

        const{attribute, ...slime} = cute
        console.log(slime) //{name:'슬라임'}

위의 코드는 cute라는 rest를 비구조할당에 이용하였다.

이를통해 name값만 추출할수있다.

 

*spread와 rest는 반대개념이라 생각할수있는데 spread는 퍼트리는 개념이라면 rest는 모아오는 개념이라할수있다.

 

배열에서의 rest

다음은 배열에서의 rest예시이다.

        //배열의 비구조할당
        const numbers = [0,1,2,3,4,5,6]
        const [one, ...rest] = numbers
        console.log(one)
        console.log(rest)

rest를 출력하면 비구조할당된 one을 제외한 값인 [1,2,3,4,5,6]이 출력된다.

만약에 비구조할당 two를 추가할경우 rest는 one, two를 제외한 값인 [2,3,4,5,6]이 출력된다

 

rest는 마지막에서만 사용할수있으니 주의하자

함수파라미터에서의 rest

만약 파라미터 모든값을 더하는 함수를 만든다고할때 하나라도 빠질경우 NaN(not a number)이라는 에러메시지가 출력된다. 이를 rest와 reduce를 활용해 문제를 해결할수있다.

        //함수파라미터에서의 rest
        function sum(...rest){
            //rest는 지금 하나의 배열이다
            return rest.reduce((acc, current) => acc + current,0)
        }
        console.log(sum(1,2,3))

 출력결과는 1,2,3의합인 6이 나온다.

 

https://bit.ly/31Cf1hp

프론트엔드 개발 올인원 패키지 with React Online. | 패스트캠퍼스