functionの概要
| 関数の定義と呼び出し JavaScript予約語 | ||
|
function 概要 わかりやすく説明 |
||
|
functionの基本的な使い方
以下は、functionを使用した基本的な例です。
// 基本的な関数の定義
function greet(name) {
return `こんにちは、${name}！`;
}
// 関数の呼び出し
console.log(greet("Alice")); // こんにちは、Alice！
console.log(greet("Bob")); // こんにちは、Bob！
functionキーワードを使用して関数を定義します。- 関数名を使って、いつでもその処理を呼び出すことができます。
- 必要に応じて引数を渡し、処理をカスタマイズできます。
無名関数と即時実行関数
functionを使用して無名関数を定義し、それを変数に代入したり、即座に実行することが可能です。
// 無名関数を変数に代入
const add = function (a, b) {
return a + b;
};
console.log(add(5, 3)); // 8
// 即時実行関数（IIFE）
(function () {
console.log("即時実行関数が実行されました！");
})(); // 即時実行関数が実行されました！
- 無名関数は、名前を付けずに定義する関数です。
- 即時実行関数は定義と同時に実行される関数で、スコープを限定するのに便利です。
functionの応用例
関数は、複雑なロジックを整理するのに役立ちます。以下は応用例です。
// フィボナッチ数列を計算する関数
function fibonacci(n) {
if (n <= 1) return n;
return fibonacci(n - 1) + fibonacci(n - 2);
}
console.log(fibonacci(5)); // 5
console.log(fibonacci(10)); // 55
// 配列の要素をフィルタリング
function filterEvenNumbers(numbers) {
return numbers.filter(function (num) {
return num % 2 === 0;
});
}
console.log(filterEvenNumbers([1, 2, 3, 4, 5])); // [2, 4]
- 関数を使うと、再利用可能なコードを簡単に作成できます。
- コールバック関数を渡して柔軟な処理を実現できます。
注意点
- 巻き上げ（hoisting）: 関数宣言は巻き上げられるため、定義する前に呼び出すことができます。ただし、無名関数を変数に代入した場合、巻き上げは発生しません。
- スコープの理解: 関数内で宣言された変数は、その関数のスコープ内でのみ有効です。
- 冗長なコードを避ける: 短い関数やアロー関数を使用して、コードを簡潔に保つことが推奨されます。
よくある質問
- Q: 関数宣言と関数式の違いは何ですか？
- A: 関数宣言は巻き上げられるため、定義する前に呼び出せます。一方、関数式は巻き上げが発生せず、定義後にのみ使用できます。
- Q: 即時実行関数（IIFE）はどのような場合に使用しますか？
- A: スコープを限定したり、初期化処理を実行する際に便利です。
- Q:
return文を省略するとどうなりますか？ - A: 関数は暗黙的に
undefinedを返します。明示的に値を返したい場合はreturnを使用してください。
まとめ
functionは、JavaScriptで関数を定義し、再利用可能なコードを作成するための基本的なキーワードです。
- 関数はコードの整理や再利用に役立ちます。
- 巻き上げやスコープの仕組みを理解して正しく使用しましょう。
- 短い関数やアロー関数を活用して、コードを簡潔に保つことが推奨されます。