[ javascript ] 21. 비구조화 할당 (구조분해) 문법

# 비구조화 할당 ( 구조분해 ) 문법

 

비구조화 할당 문법은  객체 안에 있는 값을 추출해서 변수 혹은 상수로 바로 선언할 수 있습니다.

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

구조 분해 할당 - JavaScript | MDN

 

비구조화 할당 

 

ex1)

const array = [10, 20];
const [a, b] = array;

console.log(a);
console.log(b);

 

ex2)

const array = [10];
const [a, b = 20] = array;

console.log(a);
console.log(b);

 

ex3)

 const [a, [b,c] ] = [ 10, [20,30];

a에 10
b에 20
c에 30

 

ex4)

const [a , b ] = [10,20,30];
오른쪽 배열은 왼쪽의 패턴보다 많은 요소를 가질수 있고 이때 매치되지 않는 요소는 단순히 무시됩니다. 

const [a , b , c] = [10,20];
왼쪽 패턴보다 작다면 매치되지 않는 변수는 undefined를 갖습니다.

 

ex5)

const obj = { a: 10, b: 20, c:30 };

const { a, b, c } = obj;

console.log(a); // 10
console.log(b); // 20
console.log(c); // 30

 

 

 함수의 파라미터에서도 비구조화 할당을 할 수 있습니다.

 

ex6)

const obj = { a: 10, b: 20 };

function fn({ a, b }) {
  console.log(a);
  console.log(b);
}

fn(obj);

 

 

구조분해 할당 시 기본값 설정

 

ex7)

const obj = { a: 10 };

function fn({ a, b = 20 }) {
  console.log(a);
  console.log(b);
}

fn(obj);

 

 

구조분해 할당 시 이름 변경

 

ex8)

const dog = {
  name: '강아지',
  age: 3
};

const { name: nameAni } = dog
console.log( nameAni );

 

ex9)

let obj  = { name:'kim', age: 20 }
let { name:kimName , age:kimAge } = obj 

console.log( kimName , kimAge )

 

 

중첩된 객체의 비구조화 

 

ex10)

const obj = {
    name:'이젠 컴퓨터',
    birthday: {year:2023, month:11, day:10 }    
  };

  let { name,
        birthday:{year, month, day }
      } = obj 
  console.log( `이름 : ${name}` )
  console.log( `년 : ${year}` )
  console.log( `월 : ${month}` )
  console.log( `일 : ${day}` )

  Output :
    이름 : 이젠 컴퓨터
    년 : 2023
    월 : 11
    일 : 10

 

 

ex11)

 

const obj = {
    state: {
      info: {
        name: '이젠컴퓨터',
        addrs: ['서울', '인천', '경기']
      }
    },
    age: 30
  };
  
  const { 
    state: {
        info: {
        name,
        addrs
        }
    },
  age
} = obj;
  
  const output = {
    name,
    addrs,
    age
  };
  
  console.log(output);
  
//{ name: '이젠컴퓨터', addrs: [ '서울', '인천', '경기' ], ss: 30 }

 

  const obj = {
    state: {
      info: {
        name: '이젠컴퓨터',
        addrs: ['서울', '인천', '경기']
      }
    },
    age: 30
  };
  
  const { name, addrs } = obj.state.info;
  const { age } = obj;
  
  const output = {
    name,
    addrs,
    age
  };
  
  console.log(output);
  
  //{ name: '이젠컴퓨터', addrs: [ '서울', '인천', '경기' ], ss: 30 }

 

ex12)

 const output = {
    name:name,
    addrs:addrs,
    age:age
  };

 

위와 동일

 const output = {
    name,
    addrs,
    age 
  };

 

 

복습)  눈으로 코딩  분석 결과예측 후 코딩해서 확인해 보세요

function fn() {
    return [10, 20];
}

let arr = fn();
let result = arr[2] != undefined ? arr[2] : 0;

console.log(result);

 

function fn() {
    return null;
}

let [a = 10, b = 20] = fn() || [];

console.log(a);  
console.log(b);

 

function fn() {
    return [
        '강아지',
        '고양이',
        ['노랑', '빨강', '녹색']
    ];
}

let [
    first,
    last,
    [
        color1,
        color2,
        color3
    ]
] = fn();

console.log(first , last, color1, color2, color3)

 

function fn(a, b) {
    return [
        a + b,
        (a + b) / 2,
        a - b
    ]
}

let [sum, avg, diff] = fn(20, 5);
console.log(sum, avg, diff);

 

let obj = {
    id: 1001,
    name: {
        firstName: '컴퓨터',
        lastName: '이젠'
    }
};

let {
    name: {
        firstName,
        lastName
    }
} = obj;

console.log(firstName);  
console.log(lastName);

 

let obj = {
    id: 1001,
    name: {
        firstName: '컴퓨터',
        lastName: '이젠'
    }
};

let {
    name: {
        firstName,
        lastName
    }
    ,name 
} = obj;

console.log(firstName);  
console.log(lastName);  
console.log(name);

 

let fn = ({firstName, lastName}) => console.log(`${firstName} ${lastName}`);

let obj = {
    firstName: '컴퓨터',
    lastName: '이젠'
};

fn(obj);

 

function fn() {    
    let firstName = '컴퓨터',
        lastName = '이젠';
      
    return {
      'firstName': firstName,
      'lastName': lastName
    };
  }

  또는 
  function fn() {     
    let firstName = '컴퓨터',
        lastName = '이젠';
  
    return { firstName, lastName };
  }
  

let names = fn();
let firstName = names.firstName,
    lastName  = names.lastName;

//또는 비구조할당 
let { firstName, lastName } = fn();

 

 

위 코드 정리

  function fn() {     
    let firstName = '컴퓨터',
        lastName = '이젠';
  
    return { firstName, lastName };
  }
  

let { firstName, lastName } = fn();
console.log( firstName , lastName )