(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が属するオブジェクトを正しく指します.
注意:
ベロフォードモダンJavaScript(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)