JavaScriptの秘宝を探せ！隠れた機能を使いこなしてコードをレベルアップ

JavaScriptの隠れた機能

デストラクタは、オブジェクトが破棄される時に自動的に呼び出される関数です。 オブジェクトが不要になった時に、リソースを解放したり、クリーンアップ処理を行うのに役立ちます。

例：

class Person {
  constructor(name) {
    this.name = name;
  }

  destructor() {
    console.log(`Goodbye, ${this.name}!`);
  }
}

const person = new Person("John Doe");

// person オブジェクトが破棄されると、デストラクタが呼び出される
person = null;

スプレッド構文は、イテレータブルオブジェクト（配列や文字列など）を展開して、個々の要素を関数引数や配列要素として渡すのに役立ちます。

const numbers = [1, 2, 3];

// スプレッド構文を使って、`Math.max()` 関数に個々の要素を渡す
const max = Math.max(...numbers);

console.log(max); // 3

const fruits = ["apple", "banana", "orange"];

// スプレッド構文を使って、`fruits` 配列を `allFruits` 配列に結合する
const allFruits = [...fruits, "mango"];

console.log(allFruits); // ["apple", "banana", "orange", "mango"]

テンプレートリテラルは、複数の文字列を結合して、複雑な文字列を簡単に作成するのに役立ちます。

const name = "John Doe";
const age = 30;

// テンプレートリテラルを使って、挨拶文を作成する
const greeting = `Hello, ${name}! You are ${age} years old.`;

console.log(greeting); // Hello, John Doe! You are 30 years old.

オプションチェーン演算子は、プロパティやメソッドが存在しない場合でも、エラーを発生させずに値を取得するのに役立ちます。

const user = {
  name: "John Doe",
  address: {
    city: "New York",
  },
};

// オプションチェーン演算子を使って、`user.address.country` の値を取得する
const country = user?.address?.country;

console.log(country); // undefined

// 従来の書き方
const country2 = user.address && user.address.country;

console.log(country2); // undefined

Promise.allSettled は、すべてのプロミスが解決されるのを待ってから、結果（成功または失敗）をまとめて取得するのに役立ちます。

const promises = [
  fetch("https://api.example.com/1"),
  fetch("https://api.example.com/2"),
  fetch("https://api.example.com/3"),
];

// Promise.allSettled を使って、すべての API リクエストの結果を取得する
Promise.allSettled(promises).then((results) => {
  for (const result of results) {
    if (result.status === "fulfilled") {
      console.log(result.value); // 成功時の結果
    } else {
      console.log(result.reason); // 失敗時の理由
    }
  }
});

これらの機能は、JavaScript の開発効率を向上させるのに役立ちます。 ぜひこれらの機能を活用して、より洗練されたコードを書きましょう。

デストラクタ

class Person {
  constructor(name) {
    this.name = name;
  }

  destructor() {
    console.log(`Goodbye, ${this.name}!`);
  }
}

const person = new Person("John Doe");

// person オブジェクトが破棄されると、デストラクタが呼び出される
person = null;

スプレッド構文

const numbers = [1, 2, 3];

// スプレッド構文を使って、`Math.max()` 関数に個々の要素を渡す
const max = Math.max(...numbers);

console.log(max); // 3

const fruits = ["apple", "banana", "orange"];

// スプレッド構文を使って、`fruits` 配列を `allFruits` 配列に結合する
const allFruits = [...fruits, "mango"];

console.log(allFruits); // ["apple", "banana", "orange", "mango"]

テンプレートリテラル

const name = "John Doe";
const age = 30;

// テンプレートリテラルを使って、挨拶文を作成する
const greeting = `Hello, ${name}! You are ${age} years old.`;

console.log(greeting); // Hello, John Doe! You are 30 years old.

オプションチェーン演算子

const user = {
  name: "John Doe",
  address: {
    city: "New York",
  },
};

// オプションチェーン演算子を使って、`user.address.country` の値を取得する
const country = user?.address?.country;

console.log(country); // undefined

// 従来の書き方
const country2 = user.address && user.address.country;

console.log(country2); // undefined

Promise.allSettled

const promises = [
  fetch("https://api.example.com/1"),
  fetch("https://api.example.com/2"),
  fetch("https://api.example.com/3"),
];

// Promise.allSettled を使って、すべての API リクエストの結果を取得する
Promise.allSettled(promises).then((results) => {
  for (const result of results) {
    if (result.status === "fulfilled") {
      console.log(result.value); // 成功時の結果
    } else {
      console.log(result.reason); // 失敗時の理由
    }
  }
});

JavaScriptの隠れた機能を活用する他の方法

デフォルト引数を使うことで、関数の引数を省略することができます。

function greet(name = "John Doe") {
  console.log(`Hello, ${name}!`);
}

greet(); // "Hello, John Doe!" と出力される
greet("Jane Doe"); // "Hello, Jane Doe!" と出力される

アロー関数を使うことで、簡潔なコードを書くことができます。

const numbers = [1, 2, 3];

// 通常の関数
const doubledNumbers = numbers.map(function(number) {
  return number * 2;
});

// アロー関数
const doubledNumbers2 = numbers.map(number => number * 2);

console.log(doubledNumbers); // [2, 4, 6]
console.log(doubledNumbers2); // [2, 4, 6]

const numbers = [1, 2, 3];

// スプレッド構文を使って、`Math.max()` 関数に個々の要素を渡す
const max = Math.max(...numbers);

console.log(max); // 3

const fruits = ["apple", "banana", "orange"];

// スプレッド構文を使って、`fruits` 配列を `allFruits` 配列に結合する
const allFruits = [...fruits, "mango"];

console.log(allFruits); // ["apple", "banana", "orange", "mango"]

const name = "John Doe";
const age = 30;

// テンプレートリテラルを使って、挨拶文を作成する
const greeting = `Hello, ${name}! You are ${age} years old.`;

console.log(greeting); // Hello, John Doe! You are 30 years old.

const user = {
  name: "John Doe",
  address: {
    city: "New York",
  },
};

// オプションチェーン演算子を使って、`user.address.country` の値を取得する
const country = user?.address?.country;

console.log(country); // undefined

// 従来の書き方
const country2 = user.address && user.address.country;

console.log(country2); // undefined

const promises = [
  fetch("https://api.example.com/1"),
  fetch("https://api.example.com/2"),
  fetch("https://api.example.com/3"),
];

// Promise.allSettled を使って、すべての API リクエストの結果を取得する
Promise.allSettled(promises).then((results) => {
  for (const result of results) {
    if (result.status === "fulfilled") {
      console.log(result.value); // 成功時の結果
    } else {
      console.log(result.reason); // 失敗時の理由
    }
  }
});

• JavaScript のオプションチェーン