[kh정보교육원 62일차]Javascript - 구조분해할당, 객체배열

구조분해할당(Destructuring Assignment)

구조가 있으면 그걸 해체 후 변수에 대입( assign )

 

구조 분해하기

        const arr=[1,2,3];
        const a=arr[0];
        const b=arr[1];
        const c=arr[2];
        console.log(arr,a,b,c);

 

보통 이렇게 값을 표현했었다.

        const [a,b]=arr;
        console.log(arr,a,b);

 

필요없는 번지수 생략 가능 (c가 생략됨)

        const[a, ,b]=arr;
        console.log(arr,a,b);

 

변수 생략시 해당 인덱스 값은 버리게 된다. (1,3 출력)

        const[a,b,c,d]=arr;
        console.log(arr,a,b,c,d);

 

없는 변수 d를 호출하더라도, 인덱스는 undefined를 호출한다. (오류가 발생하지 않음)

        const[a,b,c=99,d=999]=arr; 
        console.log(arr,a,b,c,d);

 

원래 변수 c에 값을 대입하면 , const arr=[1,2,3];의 값인 3이나오지만

d에 대입한 값은 그대로 나온다 (undefined였기 때문)

    const [a,...brr]=arr;
    console.log(arr,a,brr);

 

나머지파라미터(변수) 가 1번지 이후 brr배열에 대입되었다.

 

 

변수의 값 교환

        let x=10;
        let y=20;
        [x,y]=[y,x];
        console.log(x,y);//20,10

 

교환이 제대로 이루어진 것을 알 수 있다.

 

나머지파라미터 vs 전개연산자

나머지파라미터 : 변수부 작성, 마지막에 딱 한번 사용 가능

전개연산자 : 배열요소(값)을 전달할 때 사용. 여러번 사용 가능

        const foo=['가','나','다'];
        const bar=['라','마','바'];
        const koo=[...foo,...bar];
        console.log(foo,bar);//[가,나,다][라,마,바]
        console.log(koo);//[가,나,다,라,마,바]

 

 

배열 구조분해할당 - 활용

    const test2=()=>{
        //매개변수부
        console.log(process([1,2,3]));
        console.log(process([10,20,30,40]));
        //리턴값
        const[a,b]=process2();
        console.log(a,b);
    }
    const process=([a,b,c,d=0.5])=>{
        console.log(a,b,c,d);
        return (a*b)/c+d;
    }
    const process2=()=>{
        const a = (Math.random()*100)+1;
        const b = (Math.random()*100)+101;
        return[a,b];
    }

 

1 : process에서 d를 대입한 값이 나오는 것을 확인할 수 있다.

2 : process의 리턴값이 나온 것을 알 수 있다.

3 : process에 넣은 값 4개가 나온 것을 확인할 수 있다.

4 : 10,20,30,40 에 대한 리턴값이 나왔다.

5 : process2의 값이 출력되었다. (랜덤값)

 

학생 점수를 출력하는 함수 만들기

const data = "홍길동,남,90,80,70|신사임당,여,88,100,50|전봉준,남,55,80,77"; 가 주어졌을 때

홍길동(남) 평균 80.0점

신사임당(여) 평균 79.3점

전봉준(남) 평균 70.7점

 

다음과 같이 나오도록 만들자.

    const test4=()=>{
        const data = "홍길동,남,90,80,70|신사임당,여,88,100,50|전봉준,남,55,80,77";
        //전처리
        console.log(
            data.split("|")
            .map((str)=>str.split(","))
            .forEach((arr)=>printStudentInfo(arr))
        );
    };
    const printStudentInfo=([name,gender,...scores])=>{
        //후처리
        //총점/평균
        // console.log{
        //     scores.map(s=>Number(s))
        //     .reduce((sum,n)=> sum+n)
        // }; //총점
        const sum= scores.map(s=>Number(s))
                .reduce((sum,n)=> sum+n);
        const avg=Math.round(sum/scores.length*10)/10;
        console.log(`${name}(${gender}) 평균 ${avg}점`);
    };

 

split은 |을 기준으로 나눈다는 의미이다. 각각의 값은 forEach를 통해 printStudentInfo에 들어간다.

 

객체 - 구조분해할당

객체의 요소(속성값)을 변수에 쉽게 옮겨담는 문법

    const test5=()=>{
        const obj={
            a:1,
            b:'안녕',
            c:true
        };
        const{a,b,c}=obj;
        console.log(a,b,c); //1 '안녕' true
    };

 

    const test5=()=>{
        const obj={
            a:1,
            b:'안녕',
            c:true
        };
        const {b,a,d='abcde'}=obj; //변수 선언 순서는 중요하지 않다. 기본값 처리도 가능하다.  
        console.log(a,b,d); //1 '안녕' undefined //1 '안녕' abcde
    };

 

변수 선언순서와는 별개로, a,b,d가 log에 선언되어 a,b,d의 값이 나왔다.

변수의 선언 순서는 중요하지 않고, 기본값도 처리가 가능하며, 중요한 것은 출력창에 선언하는 것이라는 점을 알 수 있다.

 

    const test5=()=>{
        const obj={
            a:1,
            b:'안녕',
            c:true
        };
        const {a:num,b:str}=obj;
        console.log(num,str);
        console(a,b);//Uncaught ReferenceError : a is not defined
    };

 

a:num , b:str 으로 옮겨담는 변수명을 바꾸었다.

이 경우 num,str을 선언하면 출력되지만, a,b로는 참조할 수 없다.

 

    const test5=()=>{
        const obj={
            a:1,
            b:'안녕',
            c:true
        };
        const {a, ...foo} = obj;
        console.log(a,foo);//1 {b: '안녕', c: true}
    };

 

a 빼고 나머지를 배열의 형태로도 담을 수 있다.

 

중첩객체

    const test6=()=>{
        const user={
            id:'honggd',
            username:{
                firstName:'길동',
                familyName:'홍'
            },
            age:33,
            sns:['twitter','instagram','ticktok']
        };

        const{id, username:{firstName},sns:[mainSns]}=user;
        console.log(id,firstName,mainSns);//mainSns => sns의 0번지. ,mainSns => sns의 1번지 
        console.log(username,sns);//Uncaught ReferenceError : username is not defined
    };

 

id와 username의 firstName, sns중 첫번째 값이 출력되었다.

하지만 username과 sns로 출력을 하려고 하면 불가능하다. (안에 또 값이 있기 때문)

 

    const test6=()=>{
        const user={
            id:'honggd',
            username:{
                firstName:'길동',
                familyName:'홍'
            },
            age:33,
            sns:['twitter','instagram','ticktok']
        };
        //속성명과 다른 변수명을 사용하는 경우
        const {username:{firstName:name}}=user;
        console.log(name);//길동

        //동일한 객체를 매개인자로 전달할 때, 각 함수별로 원하는 속성만 꺼내서 작업이 가능
        processId(user);
        processSns(user);
        processName(user);
    };
    const processId=({id})=>console.log('processId : ',id);
    const processName=({name:{firstName,familyName}})=>console.log('processName : ',firstName,familyName);
    // const processSns=({sns})=>console.long('processSns : ', sns);
    const processSns=({sns :[mainSns,subSns]})=>console.log('processSns : ',mainSns,subSns);

 

중첩된 객체에 속성명과 다른 변수명을 사용하는 경우에는 위와 같이 username:{firstname:name} 으로 선언하면 된다.

이제 firstName은 name으로 사용이 가능해 '길동'이 출력된다.

마지막 processName의 경우 firstName을 출력하라는 함수이므로 출력이 되지 않는다.

 

academy infomation 만들기

    const getAcademyInfo = () =>({
        name:'KH정보교육원',
        url:'https://iei.or.kr',
        tel:['070-1234-5678','070-1234-5050','070-1234-5959'],
        branches :{
            '강남 지원':{
                addr:'서울시 강남구 역삼동',
                classroom:['A','B','C','D','M']
            },
            '종로 지원':{
                addr:'서울시 종로 삼청동',
                classroom:['X','Y','Z']
            },
            '당산 지원':{
                addr:'서울시 영등포구 당산동',
                classroom:['101','102','103','104']
            },
        }
    });

 

    const test7=()=>{
        const {name,url,tel:[mainTel],branches}=getAcademyInfo();
        console.log(name);
        console.log(url);
        console.log(mainTel);
        Object.keys(branches)
            .forEach((branchname)=>{
//            console.log(branchname,branches[branchname]);
            const {addr,classroom}=branches[branchname];
            console.log(`> ${branchname} : ${addr}, ${classroom.length}개 강의장`);
        })
        ;
    };

 

 

가족관계 출력하기

    const getPeople=()=>[
        {
            name:'홍길동',
            family : {
                father:'홍진수',
                mother:'홍진경',
                sister:'홍지민',
            },
            age:35
        },
        {
            name:'신사임당',
            family : {
                father:'신강춘',
                mother:'하희라',
                brother:'신하준',
            },
            age:35
        },
    ]

 

    const test8=()=>{
        getPeople().forEach((person)=>{
            const {name,family:{father,mother,sister,brother}}=person;
            console.log(`이름 : ${name}, 아빠 : ${father}, 엄마 : ${mother} , 형제자매 : ${sister||brother}`);
        });
    };