JavaScriptにおける関数
この記事ではJavaScriptにおける関数について説明します。
YouTube Video
JavaScriptにおける関数
JavaScriptにおける関数は、再利用可能なコードのブロックで、特定のタスクを実行するために使用されます。関数を使うことで、コードの可読性が向上し、メンテナンスが容易になります。関数にはいくつかの定義方法があり、引数や戻り値などを使って柔軟に操作できます。
関数の定義方法
関数宣言（Function Declaration）
関数は、functionキーワードを使って定義できます。関数宣言は、コードが実行される前にホイスティングされるため、定義前に呼び出すことが可能です。
1console.log(greet("Everyone")); // Hello, Everyone
2
3function greet(name) {
4 return "Hello, " + name;
5}
6
7console.log(greet("Alice")); // Hello, Alice
この例では、関数宣言前にもgreet関数を呼び出しているため、Hello, EveryoneとHello, Aliceが表示されます。
関数式（Function Expression）
関数を変数に代入して定義することもできます。この場合、関数はホイスティングされず、定義後にのみ呼び出すことができます。
1const greet = function(name) {
2 return "Hello, " + name;
3};
4
5console.log(greet("Bob")); // Hello, Bob
この例では、Hello, Bobと表示されます。
アロー関数（Arrow Function）
アロー関数は、短い構文で関数を定義できる形式です。特に無名関数（名前のない関数）を使うときに便利です。また、アロー関数はthisキーワードの扱いが異なる特徴があります。
1const greet = (name) => {
2 return "Hello, " + name;
3};
4
5// When it can be expressed in a single line,
6// `return` and curly braces can be omitted
7const greetShort = name => "Hello, " + name;
8
9console.log(greet("Charlie")); // Hello, Charlie
10console.log(greetShort("Dave")); // Hello, Dave
この例でのgreetとgreetShortのように関数を宣言できます。関数が1行の場合には、greetShortのように{}（中括弧）を省略できます。
関数の要素
引数
関数に渡される値を引数と呼びます。関数の定義時に、引数を指定しておくことで、関数を呼び出す際に値を渡すことができます。
1function add(a, b) {
2 return a + b;
3}
4
5console.log(add(2, 3)); // 5
デフォルト引数
引数に値が渡されなかった場合に、デフォルト値を指定することができます。
1function greet(name = "Guest") {
2 return "Hello, " + name;
3}
4
5console.log(greet()); // Hello, Guest
6console.log(greet("Alice")); // Hello, Alice
この例では、greet()の場合、デフォルトのGuestが使われます。
戻り値
return文を使って関数から戻り値を返すことができます。return文がない場合、関数はundefinedを返します。
1function greet(name) {
2 console.log('Hello, ' + name + '!');
3}
4function square(num) {
5 return num * num;
6}
7
8console.log(square(4)); // 16
9console.log(greet('Alice')); // undefined
この例でのgreetは値を返さないため、戻り値はundefinedとなります。
無名関数
名前を持たない関数のことを無名関数といいます。関数式やアロー関数として使われることが多いです。
1const double = function(num) {
2 return num * 2;
3};
4
5console.log(double(5)); // 10
即時実行関数（IIFE: Immediately Invoked Function Expression）
即時実行関数(IIFE)は、定義と同時に実行される関数です。通常、スコープを制御するために使われます。
1/* Example of IIFE: Immediately Invoked Function Expression */
2(function() {
3 console.log("This is an IIFE");
4})(); // This is an IIFE
このように宣言と同時に実行されます。
コールバック関数
関数を引数として他の関数に渡し、その関数が後で実行することをコールバック関数といいます。非同期処理やイベント処理で頻繁に使われます。
1function processData(callback) {
2 let data = "Processed Data";
3 callback(data);
4}
5
6processData(function(result) {
7 console.log(result); // Processed Data
8});この例では、コールバック関数としてコンソールに値を出力する関数を渡しています。
再帰関数
関数が自分自身を呼び出すことを再帰といい、これを利用して繰り返し処理を行う関数を再帰関数と呼びます。例えば、階乗（factorial）を求める関数は次のように再帰で実装できます。
1function factorial(n) {
2 if (n === 0) {
3 return 1;
4 } else {
5 return n * factorial(n - 1);
6 }
7}
8
9console.log(factorial(5));
10// Output : 120
11// (5 * 4 * 3 * 2 * 1 = 120)
この例では、5の階乗である120が表示されます。
thisキーワード
関数内で使われるthisは、その関数がどのオブジェクトを指しているかを表します。通常の関数では呼び出し元のオブジェクトを指しますが、アロー関数では定義時のスコープにおけるthisを保持します。
1const obj = {
2 name: "Alice",
3 greet: function() {
4 console.log(this.name); // Refers to "Alice"
5 }
6};
7
8obj.greet(); // Alice
9
10const obj2 = {
11 name: "Bob",
12 greet: () => {
13 // Arrow function refers to the outer scope (undefined here)
14 console.log(this.name);
15 }
16};
17
18obj2.greet(); // undefined
obj変数のgreetはfunctionキーワードによって宣言されています。そのため、thisキーワードはobj変数のオブジェクトを指します。一方、obj2変数のgreetはアロー関数によって宣言されています。そのため、thisキーワードは外側のスコープのオブジェクトを参照し、この例ではundefinedになります。
関数スコープとクロージャ
関数内で定義された変数は、関数外からアクセスできません。これを関数スコープといいます。また、関数が定義された時点のスコープを保持するクロージャという機能があります。
1function outer() {
2 let outerVar = "I am outer!";
3
4 function inner() {
5 console.log(outerVar); // Can access outerVar
6 }
7
8 return inner;
9}
10
11const innerFunc = outer();
12innerFunc(); // I am outer!
この例では、inner関数は、関数が定義された時点のスコープを保持するため、outerVar変数にアクセスできます。
まとめ
- 関数宣言、関数式、アロー関数など、さまざまな定義方法があります。
- 関数は引数を受け取り、戻り値を返すことができます。
- コールバック関数や再帰関数など、特別な使い方があります。
thisの扱いに注意が必要で、アロー関数と通常の関数では挙動が異なります。- クロージャを利用して、スコープの外側から内部の変数にアクセスすることができます。
関数は、JavaScriptの柔軟な構造を活かした重要な概念の1つです。
YouTubeチャンネルでは、Visual Studio Codeを用いて上記の記事を見ながら確認できます。 ぜひYouTubeチャンネルもご覧ください。