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

패스트캠퍼스 프론트엔드 인강 12일차 비구조화할당과 spread와 rest를 배워보았다(ES6 javascript의 ... 문법)

 

비구조화할당(구조분해)

destructuring assignment

말이어려운데 쉽게말해 객체나 배열의 원소를 밖으로 꺼내는것을 의미하는 것같다.

 

객체 비구조화할당

        //객체에서의 비구조할당
        //만약 f의값이 없다고 가정할때 아래처럼 객체네 f=100이런식으로 넣어줌
        const object = {a:1, b:2}
        const {a, b, f=100} = object
        console.log(a)
        console.log(b)
        console.log(f)

        //비구조할당은 함수의 파라미터에서도 적용가능
        //만약 e의값이 없다고 가정할때 함수안에 e||2또는 아래처럼 객체네 e=3이런식으로 값을 넣어줌 
        const object2 = {c:1, d:2}
        function print({c,d,e=3}){
            console.log(c)
            console.log(d)
            console.log(e)
        }
        print(object2)

        //비구조할당을할때 이름을 바꾸는 방법?
        const animal = {
            name:'멍멍이',
            type:'개'
        }
        // const nickname = animal.name
        //name을 nickname으로 바꿀수있다.
        const {name:nickname} = animal
        console.log(nickname)

 

배열 비구조화할당은 객체 비구조할당과 비슷하다.

        //배열에서의 비구조할당
        const array = [111]
        const [one, two = 222] = array
        console.log(one)
        console.log(two)

객체가 깊숙한곳에 들어있을경우

        //객체의 깊숙한곳에서 꺼내는방법?
        const deepObject = {
            state:{
                information:{
                    name:'dubaiyu',
                    languages:['korean', 'english', 'japanese']
                }
            },
            value:5
        }

        // const{
        //     state:{
        //         information:{
        //             name, languages
        //         }
        //     },
        //     value
        // } = deepObject

        const {name, languages} = deepObject.state.information
        const {value} = deepObject

        const extracted = {
            name,
            languages,
            value
        }

        console.log(extracted);

spread와 rest

const slime = {
            name:'슬라임'
        }
        const cuteSlime = {
            name:'슬라임',
            attribute:'cute'
        }
        const purpleCuteClime ={
            name:'슬라임',
            attribute:'cute',
            color:'purple'
        }

        console.log(slime)
        console.log(cuteSlime)
        console.log(purpleCuteClime)

이렇게 중복되는 코드를 spread 연산자인 ...을 통해 쉽게표현할수있다.

        const slime = {
            name:'슬라임'
        }
        const cuteSlime = {
            ...slime,
            attribute:'cute'
        }
        const purpleCuteClime ={
            ...cuteSlime,
            color:'purple'
        }

        console.log(slime)
        console.log(cuteSlime)
        console.log(purpleCuteClime)

...purpleCuteSlime, 다음에 color:'green'을 적용할경우 컬러가변경된다(...위에 선언은 효과없음)

spead연산자는 배열에서도 사용할수있다.

        const animal = ['개']
        const animalAdd = [...animal,'고양이']
        console.log(animalAdd)
        
        const addanother = animalAdd.concat('비둘기')
        console.log(addanother)

배열에서 spread연산자와 contact을 사용한 결과

 

        const numbers = [1,2,3,4,5]
        const spreadNumbers = [...numbers, 10, ...numbers]
        console.log(spreadNumbers)

마지막으로 spread연산자는 중복도 가능하다. 결과는 [1,2,3,4,5,10,1,2,3,4,5]

 

https://bit.ly/31Cf1hp

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