完全無料のJavaScript学習講座 5日目:関数

5日目の授業では、関数について学んでいきましょう。

関数とは、プログラムの一部分をまとめたもので、繰り返し使えるようにしたり、プログラムを見やすくするために使われます。

関数は、宣言、式、アロー関数、スコープ、クロージャといった要素があります。

一つずつ見ていきましょう。

目次

関数

関数の宣言

関数を作る時、まずは「関数の宣言」を行います。関数の宣言は、以下のように書きます。(引数については後述します。)

function 関数名(引数) {
  // 処理内容
}

例えば、足し算を行う関数は以下のようになります。

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

関数式

関数式とは、関数を変数に代入して使う方法です。

これにより、関数を値として扱うことができます。

関数式を使うことで、関数を他の関数に引数として渡したり、変数や配列に格納して使うことができます。

const 関数名 = function(引数) {
  // 関数の処理
  return 処理結果;
};

// 関数の呼び出し
const 結果 = 関数名(引数);

例えば、足し算を行う関数式を作成しましょう。

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

// 関数の呼び出し
const result = sum(3, 4); // resultには7が入ります

この例では、sumという名前の関数式を定義し、2つの数値を引数として受け取り、それらを足し算して結果を返しています。関数式を使うことで、関数をより柔軟に扱うことができます。

関数式では、関数名を省略することができます。
この場合、無名関数(匿名関数)と呼ばれます。
無名関数は、関数の名前がなくても変数に代入することで呼び出すことができます。

アロー関数

アロー関数は、関数式をもっと短く書く方法です。以下のように書きます。

const 変数名 = (引数) => {
  // 処理内容
};

足し算のアロー関数は以下のようになります。

const add = (a, b) => {
  return a + b;
};

アロー関数は、functionキーワードを省略し、より簡潔な構文で関数を表現できるようにしたものですが、それだけではありません。

アロー関数には、通常の関数式といくつかの違いがありますが、5日目の今日は、書き方を覚えておくだけで大丈夫です。

引数

引数とは、関数に与える値のことです。

関数は、ある特定の処理を行うために作られますが、その処理に必要な値を外部から受け取ることができます。

これを引数といいます。

引数を使うことで、関数はより柔軟で汎用的になり、さまざまな状況で使い回すことができます。

関数を定義する際に、引数を指定しておきます。

引数は、関数名の後ろのカッコの中に書かれます。複数の引数がある場合は、カンマで区切ります。

例えば、2つの数を足し算する関数を考えましょう。この関数では、2つの数(a と b)を引数として受け取ります。

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

この関数を使う際に、引数の値を指定して関数を呼び出します。

引数の値は、関数名の後ろのカッコの中に書きます。例えば、3 と 5 を足し算する場合は以下のように書きます。

add(3, 5);

関数内では、引数として受け取った値を使って処理を行います。

この例では、a + b の計算をして、その結果を return で返しています。

引数を使うことで、関数はさまざまな値に対応できるようになり、コードの再利用性が高まります。

簡単な順序として、まずadd(3, 5);が実行されます。

次にaddの中にある3と5がfunction add(a,b)のaとbに代入されます。

最後にfunctionの中の処理の、return a + bが実行され、a+b の計算結果がadd(3,5)に戻されます。

スコープ

スコープとは、変数がどこで使えるかを決める範囲のことです。

関数の中で宣言された変数は、その関数の中でしか使えません。

これを「ローカルスコープ」と言います。

一方、関数の外で宣言された変数は、どこでも使えるので、「グローバルスコープ」と言います。

スコープについては、3日目の記事で詳しく説明しているので、頭に入っていない場合はもう一度復習しておいてくださいね。

あわせて読みたい
完全無料のJavaScript学習講座 3日目:変数宣言とスコープの基本 これまでにデータ型や基本的な構文を学んできましたが、今回はより深く、変数宣言とスコープについて解説していきます。 変数とスコープは、プログラミングの基本要素で...

クロージャ

クロージャとは、関数とその関数がアクセスできる環境(スコープ内の変数)が一緒になったものです。

クロージャは、関数が定義されたスコープ内の変数にアクセスできるため、その変数を保持しておくことができます。

これにより、関数が終了しても、その変数の値が保持されることになります。

ここで、シンプルなクロージャの例を紹介します。

// ここからがmakeCounter関数
function makeCounter() {
  let count = 0; // この変数は、makeCounterのスコープ内にあります。

  // この関数は、count変数にアクセスし、それを1ずつ増やすことができます。
  function increment() {
    count += 1; // count変数を1ずつ増やす
    return count;
  }

  return increment; // increment関数を返す
}
// ここまでがmakeCounter関数

// makeCounter関数を呼び出すと、increment関数が返されます。
const counter = makeCounter();

console.log(counter()); // 1: count変数が0から1に増えます。
console.log(counter()); // 2: count変数が1から2に増えます。

上記の例では、makeCounter関数がincrement関数を返しています。

increment関数は、makeCounterのスコープ内にあるcount変数にアクセスできます。

そのため、makeCounterが終了した後でも、count変数の値が保持されることになります。

これがクロージャの基本的な概念です。

この例では、counter関数(increment関数)を呼び出すたびに、count変数が1ずつ増えます。このように、クロージャを使って、関数が終了した後でも変数の値を保持することができます。

もっと簡単に

少し難しくなってしまったので、簡単に説明します。

クロージャは、関数が「覚えている」変数のことです。

関数が他の関数の中にあるとき、その外側の関数の変数を覚えていることがあります。

これをクロージャと言います。

例えば、先程のコード例だと、

  1. まず、makeCounterという関数を作ります。この関数の中には、countという変数と、incrementという別の関数があります。
  2. increment関数は、count変数を1増やしてから、その値を返します。
  3. makeCounter関数は、increment関数を返します。
  4. counter変数にmakeCounter関数の結果(increment関数)を入れます。
  5. counter関数を2回呼び出すと、1回目は1、2回目は2が出力されます。これは、increment関数がcount変数を覚えていて、その値を増やしているからです。

この例では、increment関数はmakeCounter関数の中にあります。

そして、increment関数は、makeCounter関数のcount変数を覚えています。これがクロージャの概念です。

「覚えていることがある」というのは、必ずしも覚えているわけではなく、関数が外側の関数の変数を利用している場合のみ、その変数はクロージャとして覚えられます。

まとめ

5日目の学習では、関数について学んできました。

関数はプログラムの中で特定の処理を行う部品のようなもので、コードの再利用や可読性を高めるために使われます。

以下は今回の授業のポイントになります。

  1. 関数宣言: 関数を定義する際にfunctionキーワードを使う方法です。
  2. 関数式: 変数に関数を代入して定義する方法です。
  3. アロー関数: より短い構文で関数を定義する方法です。
  4. 引数: 関数が受け取る値で、関数の定義時に指定し、関数呼び出し時に渡すことができます。
  5. クロージャ: 関数が外側の関数の変数を利用している場合、その変数はクロージャとして覚えられます。

関数はプログラミングにおいて基本的な概念であり、アロー関数やスコープ、クロージャといった概念も理解しておくことが重要です。

これらの知識を身につけることで、コードの再利用性や可読性が向上し、効率的なプログラミングが可能になります。

そろそろ難しさに嫌気が指してくる頃ですよね。
次回は一度今まで学習した内容を使って、簡単なコードを書いてみましょう。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次