🙆

【JavaScript】クロージャとクラスの違いまとめ

に公開
JavaScript
初学者向け
クラス
違い
クロージャ
tech

目的

  • クロージャとクラスの違いを理解すること
  • クロージャとクラスを使い分けできるようになること

クロージャの解説

https://zenn.dev/mabo23/articles/4426d766901b12

クロージャとクラスの違い

比較項目 クロージャ（Closure） クラス（Class）
目的 関数内の変数を外から守りつつ使い回す 似た性質をもつオブジェクトを効率よく作る
データの保持方法 関数が作られたときのスコープ（環境）に変数を閉じ込める オブジェクトのプロパティとしてデータを保持する
アクセス制御 内部変数は外から直接アクセスできない（隠蔽） #privateField でプライベートにできる
再利用性 小規模・関数単位で使う 大規模・設計的に使う
使われる場面 カウンター、設定値保持など アプリ全体の構造設計、オブジェクト生成など
構文スタイル 関数ベース オブジェクト指向ベース

クロージャの例

function createCounter() {
  let count = 0; // 外から直接アクセスできない変数

  return function() {
    count++;
    return count;
  };
}
// 無名関数を格納
const counter = createCounter();
// 無名関数の呼び出し
console.log(counter()); // 1
console.log(counter()); // 2

ポイント

  • createCounter() 内の count は外から見えない
  • 返された関数は count にアクセスできる
  • 状態を関数の中に閉じ込めることができる

※ count が残る理由
クロージャは、関数が定義されたときのスコープを記憶し続ける仕組みであり、関数が呼び出されたあとでも、そのスコープ内の変数を参照・更新できるため

クラスの例

class Counter {
  constructor() {
    this.count = 0;
  }

  increment() {
    this.count++;
    return this.count;
  }
}
// インスタンスの作成
const counter = new Counter();
// increment メソッドの呼び出し
console.log(counter.increment()); // 1
console.log(counter.increment()); // 2

ポイント

  • Counter は設計図
  • new Counter() でオブジェクトを何個でも作ることができる
  • データ（this.count）と操作（increment()）をひとまとめに管理

まとめ

  • クロージャ: 関数のスコープ内でデータを守る
  • クラス: オブジェクトごとにデータを持たせる

最後までお読みいただき、ありがとうございました。

参考URL

https://zenn.dev/mabo23/articles/4426d766901b12

https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Closures

Discussion