JavaScript かっこ 宣言 解説

JavaScriptにおけるかっこで囲まれたオブジェクト/関数/クラス宣言

JavaScriptでは、かっこで囲まれたオブジェクト、関数、クラスの宣言は、主に以下の2つの目的で使用されます：

即時実行関数式 (Immediately Invoked Function Expression, IIFE)

• IIFEは、変数スコープを局所化し、名前空間の衝突を防ぐために広く使用されます。
• この式をすぐに実行するために、その後に()を付けます。
• かっこで囲むことで、関数を式として扱えるようになります。

(function() {
  // この関数の内部は、外部のスコープから独立しています
  console.log("IIFEの内部です");
})();

オブジェクトリテラルの簡潔な構文

• ES6以降、オブジェクトリテラルを簡潔に宣言するために、変数名とプロパティ名を同じ場合にかっこを使用できます。

const x = 10;
const y = 20;

const obj = { x, y }; // { x: x, y: y } と同じ

(function() {
  console.log("IIFEの内部です");
})();

• 解説
  
  • (function() { ... })() の部分は、関数を定義し、すぐに実行する一連の処理です。
  • 外側の括弧 () は、関数を式として扱えるようにします。
  • 内側の括弧 () は、関数を呼び出すために使用されます。
  • この手法により、変数スコープを局所化し、名前空間の衝突を防ぐことができます。

const x = 10;
const y = 20;

const obj = { x, y };

• 解説
  
  • const obj = { x, y }; は、const obj = { x: x, y: y }; と同じ意味です。
  • プロパティ名と変数名が同じ場合、簡潔に記述することができます。

クラス宣言

const MyClass = class {
  constructor(name) {
    this.name = name;
  }

  greet() {
    console.log(`Hello, ${this.name}!`);
  }
};

const instance = new MyClass("Alice");
instance.greet();

• 解説
  
  • class キーワードでクラスを定義します。
  • クラス名は MyClass です。
  • constructor メソッドは、クラスのインスタンスが作成されるときに呼び出されます。
  • greet メソッドは、クラスのインスタンスのメソッドです。

即時実行関数式の代替方法

• 匿名関数
  

  (function() {
      console.log("匿名関数の内部です");
  })();
  

  • 関数を定義し、すぐに呼び出すことで、IIFEと同様の効果を得ることができます。

• 従来のオブジェクトリテラル
  

  const x = 10;
  const y = 20;
  
  const obj = {
      x: x,
      y: y
  };
  

  • 従来のオブジェクトリテラルの書き方です。

どちらの方法を選択するかは、コードの可読性、保守性、および個人の好みによって異なります。