【初心者向け】ECMAScript 6 の矢印関数でオブジェクトを返す方法 - わかりやすく解説

ECMAScript 6 の矢印関数でオブジェクトを返すプログラミング

ECMAScript 6 (ES6) では、従来の関数をより簡潔に記述できる 矢印関数 が導入されました。矢印関数は、オブジェクトを返す場合にも非常に便利です。

例

以下の例では、firstName と lastName プロパティを持つオブジェクトを返す矢印関数を作成します。

const createPerson = (firstName, lastName) => ({
  firstName,
  lastName
});

const person = createPerson('John', 'Doe');
console.log(person); // { firstName: 'John', lastName: 'Doe' }

この例では、createPerson 関数は 2 つの引数 firstName と lastName を受け取ります。そして、これらの引数を使って、firstName と lastName プロパティを持つオブジェクトを返します。

矢印関数を使用する利点

矢印関数を使用する利点は次のとおりです。

• 簡潔性: 従来の関数よりも簡潔に記述できます。
• 読みやすさ: コードが読みやすくなり、理解しやすくなります。
• 簡潔さ: return キーワードが不要になります。

オブジェクトを返す矢印関数を使用する例

以下の例では、オブジェクトを返す矢印関数をさまざまな方法で使用する方法を示します。

オブジェクトリテラルを使用する

const createPerson = (firstName, lastName) => ({
  firstName,
  lastName
});

const person = createPerson('John', 'Doe');
console.log(person); // { firstName: 'John', lastName: 'Doe' }

オブジェクトコンストラクタを使用する

const createPerson = (firstName, lastName) => new Object({
  firstName,
  lastName
});

const person = createPerson('John', 'Doe');
console.log(person); // { firstName: 'John', lastName: 'Doe' }

プロパティ名と値を直接指定する

const createPerson = (firstName, lastName) => {
  return {
    firstName,
    lastName
  };
};

const person = createPerson('John', 'Doe');
console.log(person); // { firstName: 'John', lastName: 'Doe' }

デフォルト値を使用する

const createPerson = (firstName = 'John', lastName = 'Doe') => ({
  firstName,
  lastName
});

const person1 = createPerson();
console.log(person1); // { firstName: 'John', lastName: 'Doe' }

const person2 = createPerson('Jane');
console.log(person2); // { firstName: 'Jane', lastName: 'Doe' }

分解代入を使用する

const createPerson = ({ firstName, lastName }) => ({
  firstName,
  lastName
});

const person = createPerson({ firstName: 'John', lastName: 'Doe' });
console.log(person); // { firstName: 'John', lastName: 'Doe' }

const createPerson = (firstName, lastName) => ({
  firstName,
  lastName
});

const person = createPerson('John', 'Doe');
console.log(person); // { firstName: 'John', lastName: 'Doe' }

説明:

• このコードは、firstName と lastName プロパティを持つオブジェクトを返す createPerson 関数を定義します。
• createPerson 関数は、2 つの引数 firstName と lastName を受け取ります。
• 関数は => 演算子を使用して矢印関数として定義されます。
• オブジェクトリテラルは、プロパティ名と値のペアのリストです。
• プロパティ名は firstName と lastName で、値は引数として渡された値になります。
• console.log 関数は、person オブジェクトの内容をコンソールに出力します。

const createPerson = (firstName, lastName) => new Object({
  firstName,
  lastName
});

const person = createPerson('John', 'Doe');
console.log(person); // { firstName: 'John', lastName: 'Doe' }

• 関数本体は、new Object コンストラクタを使用して新しいオブジェクトを作成し、そのオブジェクトに firstName と lastName プロパティを設定します。
• new Object コンストラクタは、空のオブジェクトを作成します。
• firstName と lastName プロパティは、オブジェクトリテラルと同じように設定されます。

const createPerson = (firstName, lastName) => {
  return {
    firstName,
    lastName
  };
};

const person = createPerson('John', 'Doe');
console.log(person); // { firstName: 'John', lastName: 'Doe' }

• 関数本体は、return キーワードを使用してオブジェクトを返します。

const createPerson = (firstName = 'John', lastName = 'Doe') => ({
  firstName,
  lastName
});

const person1 = createPerson();
console.log(person1); // { firstName: 'John', lastName: 'Doe' }

const person2 = createPerson('Jane');
console.log(person2); // { firstName: 'Jane', lastName: 'Doe' }

• 関数本体は、オブジェクトリテラルを返します。
• オブジェクトリテラルには、firstName と lastName プロパティが含まれています。
• firstName プロパティのデフォルト値は John で、lastName プロパティのデフォルト値は Doe です。
• 引数が渡されない場合、デフォルト値が使用されます。

関数式を使用する

const createPerson = (firstName, lastName) => function () {
  return {
    firstName,
    lastName
  };
};

const person = createPerson('John', 'Doe');
console.log(person()); // { firstName: 'John', lastName: 'Doe' }

• 関数は => 演算子ではなく function キーワードを使用して矢印関数として定義されます。
• 関数本体は、オブジェクトを返す匿名関数です。

クラスを使用する

class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  toObject() {
    return {
      firstName: this.firstName,
      lastName: this.lastName
    };
  }
}

const person = new Person('John', 'Doe');
console.log(person.toObject()); // { firstName: 'John', lastName: 'Doe' }

• このコードは、Person クラスを定義します。
• constructor メソッドは、クラスの新しいインスタンスを作成するときに呼び出されます。
• constructor メソッドは、this.firstName と this.lastName プロパティを firstName と lastName 引数の値に設定します。
• toObject メソッドは、Person オブジェクトをオブジェクトに変換します。
• プロパティ名は firstName と lastName で、値は this.firstName と this.lastName プロパティの値になります。

ジェネレータを使用する

const createPerson = function* (firstName, lastName) {
  yield {
    firstName,
    lastName
  };
};

const person = createPerson('John', 'Doe');
const { value } = person.next();
console.log(value); // { firstName: 'John', lastName: 'Doe' }

• このコードは、createPerson ジェネレータ関数を定義します。
• ジェネレータ関数は function* キーワードを使用して定義されます。
• ジェネレータ関数は、yield キーワードを使用してオブジェクトを生成します。

非同期関数を使用する

const createPerson = async (firstName, lastName) => {
  return {
    firstName,
    lastName
  };
};

const person = await createPerson('John', 'Doe');
console.log(person); // { firstName: 'John', lastName: 'Doe' }

• 非同期関数は