(JS) 비구조화 할당(객체 구조분해) 문법

객체 비구조화 할당

구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다.

print 함수를 보면 파라미터로 받아온 hero 내부의 값을 조회할 때마다 hero를 입력하고 있는데, 객체 비구조화 할당이라는 문법을 사용하면 코드를 더욱 짧고 보기 좋게 작성할 수 있다.

이 문법을 "객체 구조 부해"라고 부른다.

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);

콘솔로그를 확인해보면 텍스트가 제대로 출력되는 것을 확인할 수 있다.

const { alias, name, actor } = hero;

이 코드가 객체에서 값들을 추출해서 새로운 상수로 선언해주고 있다.
여기서 더 나아가, 파라미터 단계에서 객체 비구조화 할당을 할 수도 있다.

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);

코드가 한결 깔끔해진 것을 확인할 수 있다.

객체 안에 함수 넣기

객체 안에 함수를 넣을 수도 있다.

const dog = {
  name: '멍멍이',
  sound: '멍멍!',
  say: function say() {
    console.log(this.sound);
  }
};

dog.say();

결과는 다음과 같다.

멍멍!

함수가 객체 안에 들어가게 되면, this는 자신이 속해있는 객체를 가르키게 된다. 함수를 선언할 때에는 이름이 없어도 된다.

const dog = {
  name: '멍멍이',
  sound: '멍멍!',
  say: function() {
    console.log(this.sound);
  }
};

dog.say();

이전과 똑같이 작동하는 것을 확인할 수 있다.
객체 안에 함수를 넣을 때, 화살표 함수로 선언한다면 제대로 작동하지 않는다.

function으로 선언한 함수는 this가 제대로 자신이 속한 객체를 가르키게 되는데, 화살표 함수는 그렇지 않기 때문이다.

참고 :
벨로퍼트 모던 자바스크립트(https://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)