Skip to content

JavaScriptの関数

公開日:November 17, 2024更新日:November 28, 2024
JavaScriptTypeScriptCoding📄

関数の宣言と呼び出し

関数は特定の処理をまとめて再利用できるようにするための仕組みです。関数の宣言と呼び出しは、JavaScriptプログラミングの基本です。

  • 関数の宣言 関数を宣言するには function キーワードを使います。

    javascript
    function greet() {
      console.log('こんにちは!');
    }

    上記の例では、greet という名前の関数を宣言しています。この関数を呼び出すことで、console.log を使って「こんにちは!」というメッセージが表示されます。

  • 関数の呼び出し 宣言した関数を使うためには、その関数を呼び出します。

    javascript
    greet(); // 出力: こんにちは!

引数と戻り値

関数は引数(パラメータ)を受け取り、その引数を使った処理を行うことができます。また、処理の結果を「戻り値」として返すことも可能です。

  • 引数を持つ関数 関数に引数を渡すことで、動的な処理が可能になります。
    javascript
    function greetWithName(name) {
      console.log('こんにちは、' + name + 'さん!');
    }

greetWithName('太郎'); // 出力: こんにちは、太郎さん!

この例では、`greetWithName` 関数は `name` という引数を受け取り、挨拶文を出力します。

- **戻り値を持つ関数**
関数は `return` キーワードを使って処理結果を返すことができます。
```javascript
function add(a, b) {
  return a + b;
}

let result = add(5, 3);
console.log(result); // 出力: 8

上記の例では、add 関数が2つの引数 ab を受け取り、その和を返しています。関数の戻り値は、変数に代入して使うこともできます。

アロー関数と無名関数

ES6で導入されたアロー関数は、より短く関数を定義するための構文です。また、名前を持たない「無名関数」もJavaScriptではよく使われます。

  • アロー関数 アロー関数は => を使って関数を定義します。通常の関数に比べて記述が簡潔で、特にコールバック関数としてよく使われます。
    javascript
    const greet = () => {
      console.log('こんにちは!');
    };

greet(); // 出力: こんにちは!

引数が1つの場合は、括弧を省略することもできます。
```javascript
const greetWithName = name => {
  console.log('こんにちは、' + name + 'さん!');
};

greetWithName('花子'); // 出力: こんにちは、花子さん!
  • 無名関数 無名関数は名前を持たない関数で、関数をその場で定義する際に使われます。例えば、コールバック関数としてよく使用されます。
    javascript
    setTimeout(function() {
      console.log('3秒後に実行されます');
    }, 3000);
    上記の例では、setTimeout 関数の引数として無名関数が渡されています。この無名関数は、3秒後に実行される処理として利用されています。

アロー関数を使うと上記の無名関数も短く書けます。

javascript
setTimeout(() => {
  console.log('3秒後に実行されます');
}, 3000);

関数のまとめ

関数はコードの再利用を可能にし、プログラムの可読性と保守性を向上させます。引数と戻り値を使って柔軟な処理を実現し、アロー関数を活用することで簡潔に記述することができます。関数の使い方をマスターすることで、より効率的なプログラムを作成することができます。