2.関数とスコープの仕組み

2025-02-08

JavaScriptにおいて、関数はコードの再利用を可能にし、プログラムの構造を整理する重要な要素です。そして、スコープは、変数や関数がアクセス可能な範囲を決定します。この記事では、関数の定義と呼び出し方法、そしてスコープの概念について詳しく解説します。

1. 関数とは

関数は、特定の処理をまとめて名前を付け、その名前を使って何度も実行できるようにするものです。関数の基本的な定義方法と使い方を見てみましょう。

関数の定義と呼び出し

function greet(name) {
  console.log("Hello, " + name);
}

greet("Alice");  // Hello, Alice
greet("Bob");    // Hello, Bob

greetは関数名で、nameは引数です。
関数を呼び出すには、関数名に括弧を付けて引数を渡します。

関数の返り値

関数は値を返すこともできます。その場合、returnキーワードを使います。

function sum(a, b) {
  return a + b;
}

let result = sum(3, 5);  // result = 8
console.log(result);      // 8

returnは関数の実行を終了し、その後に続くコードは実行されません。

2. アロー関数

ES6では、より簡潔に関数を定義するためにアロー関数が導入されました。アロー関数は、特に短い関数を定義するときに便利です。

アロー関数の構文

const greet = (name) => {
  console.log("Hello, " + name);
};

greet("Alice");  // Hello, Alice

アロー関数の特徴は、関数キーワードを使わずに=>で定義できる点です。また、引数が1つだけの場合、括弧を省略することも可能です。

const greet = name => console.log("Hello, " + name);

返り値のあるアロー関数

返り値を返すアロー関数は、returnキーワードを省略することができます。式の結果がそのまま返り値になります。

const sum = (a, b) => a + b;
console.log(sum(3, 5));  // 8

3. スコープの仕組み

スコープは、変数や関数がどこからアクセスできるかを決める仕組みです。JavaScriptでは、主にグローバルスコープとローカルスコープ（関数スコープ）があります。

グローバルスコープ

グローバルスコープは、どこからでもアクセス可能な範囲です。グローバル変数は、プログラム全体でアクセスできます。

let globalVar = "I am global";

function displayGlobalVar() {
  console.log(globalVar);  // "I am global"
}

displayGlobalVar();
console.log(globalVar);  // "I am global"

上記のように、グローバル変数は関数の外でもアクセスできます。

ローカルスコープ（関数スコープ）

関数内で定義された変数は、関数内からのみアクセスでき、外部からはアクセスできません。これをローカルスコープ（または関数スコープ）と呼びます。

function localScopeExample() {
  let localVar = "I am local";
  console.log(localVar);  // "I am local"
}

localScopeExample();
console.log(localVar);  // エラー: localVar is not defined

localVarは関数localScopeExample内でのみ有効であり、関数外からはアクセスできません。

スコープチェーン

JavaScriptでは、スコープチェーンと呼ばれる仕組みがあり、関数内で変数が見つからない場合、親のスコープを遡って変数を探します。

let globalVar = "I am global";

function outerFunction() {
  let outerVar = "I am outer";

  function innerFunction() {
    let innerVar = "I am inner";
    console.log(innerVar);  // "I am inner"
    console.log(outerVar);  // "I am outer"
    console.log(globalVar); // "I am global"
  }

  innerFunction();
}

outerFunction();

innerFunctionは、スコープチェーンを通じて、内側から外側の変数を参照できます。

4. クロージャ

JavaScriptでは、関数が外部の変数にアクセスすることができます。この特性を利用したものがクロージャです。

function outerFunction() {
  let outerVar = "I am outer";

  return function innerFunction() {
    console.log(outerVar);  // "I am outer"
  };
}

const closureExample = outerFunction();
closureExample();  // "I am outer"

innerFunctionは、outerFunction内で定義された変数outerVarにアクセスできます。これがクロージャです。

5. 高階関数

JavaScriptでは、関数を引数として渡したり、返り値として返したりすることができます。これを高階関数と言います。

function greet(name, callback) {
  console.log("Hello, " + name);
  callback();
}

function sayGoodbye() {
  console.log("Goodbye!");
}

greet("Alice", sayGoodbye);
// 出力:
// Hello, Alice
// Goodbye!

greet関数は、sayGoodbyeという関数を引数として受け取り、処理の中で呼び出します。

まとめ

この記事では、JavaScriptの関数とスコープの仕組みについて詳しく解説しました。関数を使うことでコードを整理し、再利用できるようになります。また、スコープを理解することは、変数の管理とエラー回避に役立ちます。次回の記事では、オブジェクトや配列、そしてそれらの操作について詳しく学びます。

LOVE THE WORLD WIDE WEB

Resources