JavaScriptの関数について

関数の定義方法

関数宣言

function sumNumber(num1, num2) {
  return num1 + num2;
}

console.log(sumNumber(2, 3)); // 出力: 5

関数式

const sumNumber = function() {
  return num1 + num2;
}

console.log(sumNumber(2, 3)); // 出力: 5

関数宣言と関数式の違い

関数宣言では関数定義より前に関数を実行しても正常に動作します。これを「関数の巻き上げ」といいます。

console.log(sumNumber(2, 3)); // 出力: 5

function sumNumber(num1, num2) {
  return num1 + num2;
}

関数式ではエラーになります。

console.log(sumNumber(2, 3)); // 出力: Uncaught ReferenceError: sumNumber is not defined

const sumNumber = function() {
  return num1 + num2;
}

return（返り値または戻り値）とは

JavaScriptではreturnの後に続く値が関数の実行元に返ります。

function sumNumber(num1, num2) {
  return num1 + num2; // num1 + num2の実行結果が関数の実行元に返される。
}

/* 以下の行がsumNunber関数の実行元。
console.log(5);になるため、コンソールに5が出力される。 */
console.log(sumNumber(2, 3)); 

関数の引数に渡せるデータ型

JavaScriptの関数には任意の種類の引数を渡すことができます。以下に、JavaScriptで関数に渡すことができる主要なデータ型を示します。

プリミティブ型：JavaScriptのプリミティブ型には、以下の6つがあります：undefined、null、boolean、number、string、および symbol。これらはすべて関数の引数として渡すことができます。

例: undefined、null、booleanを渡す場合。

function exampleFunction(a, b, c) {
  console.log(a, b, c);
}

exampleFunction(undefined, null, true);  // 出力: undefined null true

オブジェクト：オブジェクトもまた、関数に渡すことができます。オブジェクトはJavaScriptの複合データ型であり、値をプロパティとして保存します。また、オブジェクトは配列、関数、日付、正規表現など、他の多くのデータ構造を構成する基本的な構成要素でもあります。

function exampleFunction(obj) {
  console.log(obj.property1, obj.property2);
}

exampleFunction({property1: "Hello", property2: "World"});  // 出力: Hello World

関数：JavaScriptでは、関数もオブジェクトの一種とみなされ、そのため他の関数に引数として渡すことができます。これを利用して高階関数（他の関数を引数として受け取る、または結果として返す関数）を作成することができます。

function exampleFunction(callback) {
  callback();
}

exampleFunction(function() {console.log("Hello World");});  // 出力: Hello World

配列：配列は特殊なオブジェクトで、順序付けられた要素のコレクションを保存します。これもまた、関数に引数として渡すことが可能です。

function exampleFunction(arr) {
  console.log(arr[0], arr[1]);
}

exampleFunction(["Hello", "World"]);  // 出力: Hello World

JavaScriptの強力な側面の一つは、これらの異なるデータ型を自由に組み合わせて使うことができる点です。例えば、関数をプロパティとして持つオブジェクトを関数に渡すことができますし、関数自体を配列に保存することもできます。

関数内で定義された変数のスコープ

関数内で定義された変数は関数スコープを持ちます。これらの変数は、その関数の内部からのみアクセス可能であり、関数の外部からはアクセスできません。

function test() {
  const localVariable = "I'm local!";
  console.log(localVariable); // 出力: "I'm local!"
}

console.log(localVariable); // ReferenceError: localVariable is not defined

コールバック関数

JavaScriptのコールバック関数は、他の関数に引数として渡され、その関数の内部で呼び出される関数のことを指します。一般的に非同期処理を実行する関数の引数として渡されることが多いですが、同期的な処理でも使用されます。以下は同期的な処理における使用例です。

function greet(callback) {
  const greeting = "Hello";
  callback(greeting);
}

//こちらの関数がコールバック関数
function myCallbackFunction(greeting) {
  console.log(greeting + ", world!");
}

greet(myCallbackFunction); // 出力: Hello, world!

以下のようにgreet関数の実行時にコールバック関数を直接定義することもできます。

function greet(callback) {
  const greeting = "Hello";
  callback(greeting);
}

greet(function(greeting) {
  console.log(greeting + ", world!"); // 出力: Hello, world!
});

ちなみにアロー関数で書くと以下のようになります。

const greet = (callback) => {
  const greeting = "Hello";
  callback(greeting);
}

greet((greeting) => {
  console.log(greeting + ", world!"); // 出力: Hello, world!
});