JS | ES6 문법 - Destructuring assignment (구조 분해 할당)

Destructuring assignment (구조 분해 할당)

1. 배열에서 destructuring

let arr = [1,2,3,4];
// let a1 = arr[0];
// let a2 = arr[1];

let [a, b, c, d] = arr;
console.log(a, b, c, d); //1 2 3 4

let [a1, a2] = arr;
console.log(a1, a2); //1, 2

let [k1, , ,k4] = arr;
console.log(k1,k4); //1, 4

let [y1, ...y2] = arr;
console.log(y1, y2); //1, [2, 3, 4]

let [...ar] = arr;
console.log(ar); //[1, 2, 3, 4]

function useState() {
      return [1, function(){}];
}

let result = useState();
console.log(result); //[1, ƒ] //두번째값은 function

let [n1,n2] = useState();
console.log(n1,n2); //1, function

2. 객체 Destructuring

 let obj = {name : "홍길동", age :20};
        // console.log(obj.name);
        // console.log(obj["name"]);

        // let {name} = obj;
        // console.log(name);

        // let {name,age} = obj;
        // console.log(name,age);

        // let {...arr} = obj;
        // console.log(arr);  //객체를 통째로 갖고 나옴

        let person = {
            name : "홍길동",
            age : 30,
            job : ["js", "css"],
            info : {id : "aaa123"}
        };

        // let {name, job} = person;
        // console.log(name,job);

        // let {name, job, info} = person; 
        // console.log(name,job,info);

        //객체의 값을 다른 이름으로 가지고 나오기 
        let {name : aaa} = person; //name의 값을 aaa로 받을거다 
        console.log(aaa);

        let{name:nnn, job:jjj} = person;
        console.log(nnn,jjj); //홍길동, ['js', 'css']

3. 제이슨 Destructuring

 //JSON형식에서 디스트럭쳐링
        let list = [
            {num : 1, title : "hello", info : [1,2,3], profile : {birth : "2023"}},
            {num : 2, title : "bye", info : [4,5,6], profile : {birth : "2022"}}
        ]

        let[a, b] = list;
        console.log(b);
        //{num : 2, title : "bye", info : [4,5,6], profile : {birth : "2022"}}

        //두번째 객체의 num, title
        let [, {num, title}] = list;
        console.log(num,title); //2 'bye'
        //두번째 객체의 info
        let [, {info}] = list;
        console.log(info); //[4, 5, 6]
        //두번째 객체의 profile
        let [, {profile}] = list;
        console.log(profile); //{birth: '2022'}
        //두번째 객체의 info를 다른이름으로 가지고 나오기
        let[, {info:x}] = list; //x는 배열
        console.log(x); // [4, 5, 6]
        //두번째 객체의 info배열의 첫번째 요소만
        let[,{info:[y1]}] = list;
        console.log(y1); //4
        //두번째 객체의 profile안에 들어있는 birth값
        let [,{profile:{birth}}] = list; 
        console.log(birth);//2022