웹개발/ES6, ES2020

[ES6] 비구조화 할당

kmhan 2021. 4. 16. 00:14
728x90
반응형

비구조화 할당

 

1. 정의 : 객체,배열안의 값을 추출해서 변수, 상수에 바로 선언하는 문법

2. 쓰는 이유 : 코드를 더욱 짧고 보기 좋게 작성할 수 있다.

3-1. 객체 비구조화 할당 전

const ironMan = { name: '토니 스타크', actor: '로버트 다우니 주니어', alias: '아이언맨' };
const captainAmerica = { name: '스티븐 로저스', actor: '크리스 에반스', alias: '캡틴 아메리카' };

function print(hero) {
  const text = `${hero.alias}(${hero.name}) 역할을 맡은 배우는 ${ hero.actor } 입니다.`;
  console.log(text);
}

print(ironMan);
print(captainAmerica);

 

3-2. 객체 비구조화 할당 후

const ironMan = { name: '토니 스타크', actor: '로버트 다우니 주니어', alias: '아이언맨' };
const captainAmerica = { name: '스티븐 로저스', actor: '크리스 에반스', alias: '캡틴 아메리카' };

function print(hero) {
  const { alias, name, actor } = hero;
  const text = `${alias}(${name}) 역할을 맡은 배우는 ${actor} 입니다.`;
  console.log(text);
}

print(ironMan);
print(captainAmerica);

 

3-3. 파라미터 단계에서 객체 비구조화 할당

const ironMan = { name: '토니 스타크', actor: '로버트 다우니 주니어', alias: '아이언맨' };
const captainAmerica = { name: '스티븐 로저스', actor: '크리스 에반스', alias: '캡틴 아메리카' };

function print({ alias, name, actor }) {
  const text = `${alias}(${name}) 역할을 맡은 배우는 ${actor} 입니다.`;
  console.log(text);
}

print(ironMan);
print(captainAmerica);

 

소스 출처 : learnjs.vlpt.us/basics/06-object.html#%EA%B0%9D%EC%B2%B4-%EB%B9%84%EA%B5%AC%EC%A1%B0%ED%99%94-%ED%95%A0%EB%8B%B9

728x90
반응형
저작자표시 (새창열림)