JavaScriptの関数について
JavaScriptの関数とは、一連の手続きを一つにまとめて名前を付け、何度も再利用できるようにしたものです。
関数はコードの再利用性を高め、可読性を向上させ、エラーの可能性を減らすなど、プログラミングにおいて非常に重要な役割を果たします。
関数の基本的な構文
JavaScriptで関数を作成するには、"function" キーワードを使用します。
次に関数名を記述し、その後ろに括弧 () を置きます。
括弧の中には、関数に渡す引数を記述します。
そして、波括弧 { } の中に関数の本体を記述します。
ソースコード例
|
1 2 3 4 |
function greet(name) { console.log('Hello, ' + name); } greet('World'); |
上記のコードでは、"greet" という名前の関数を定義しています。
この関数は1つの引数 "name" を取り、"Hello, " に続いてその名前を出力します。
関数は "greet('World');" のようにして呼び出すことができます。
出力結果
Hello, World
戻り値を持つ関数
関数は値を返すことができます。
これを戻り値といいます。
戻り値は "return" 文を使って指定します。
"return" 文が実行されると、関数の実行はそこで終了し、指定した値が呼び出し元に返されます。
以下に戻り値を持つ関数の例を示します。
ソースコード例
|
1 2 3 4 5 |
function addNumbers(a, b) { return a + b; } var sum = addNumbers(5, 7); console.log(sum); |
この例では、2つの数値を引数として受け取り、それらを加算した結果を返す関数 "addNumbers" を定義しています。
そして、この関数を使用して5と7を加算し、結果を変数 "sum" に代入しています。
最後に、その結果を出力しています。
出力結果
12
無名関数とアロー関数
JavaScriptでは、関数は名前を持つことなく定義することもできます。
これを無名関数または匿名関数と呼びます。
また、アロー関数というシンタックスを使って短く記述することもできます。
ソースコード例
|
1 2 3 4 5 6 7 8 |
var greet = function(name) { console.log('Hello, ' + name); }; greet('World'); var addNumbers = (a, b) => a + b; var sum = addNumbers(5, 7); console.log(sum); |
上記のコードでは、最初の関数 "greet" は無名関数を変数に代入して定義しています。
二つ目の関数 "addNumbers" はアロー関数を使用して定義しています。
アロー関数は "=>"
の記号を使用し、より短くシンプルな記述が可能です。
出力結果
Hello, World
12
アロー関数を使った例と使わない例の比較
アロー関数は、関数リテラルをより簡潔に記述できる機能で、ES6(JavaScriptのバージョン)から導入されました。
アロー関数を使うことで、コードが短くなり、可読性が向上します。
以下に、アロー関数を使った例と使わない例を比較してみましょう。
ソースコード例：アロー関数を使わない場合
|
1 2 3 4 5 6 |
function double(x) { return x * 2; } var result = double(4); console.log(result); |
ソースコード例：アロー関数を使った場合
|
1 2 3 4 |
const double = x => x * 2; let result = double(4); console.log(result); |
上記のコード例では、同じ機能を持つ関数 "double" をアロー関数を使わない方法と使った方法で定義しています。
アロー関数を使った方がコードが短くなり、可読性が向上していることがわかります。
出力結果
8
KindleUnlimited会員であれば、全ての本をご覧頂けます。 アロー関数と便利な関数を理解すれば、JavaScriptの世界が変わる
まとめ
JavaScriptの関数は、特定のタスクを行うためのコードのまとまりで、再利用性や可読性を向上させる役割があります。今回の記事では、関数の基本的な構文、戻り値を持つ関数、無名関数、アロー関数について説明しました。アロー関数は、コードを短くして可読性を向上させるために使われます。
最後まで読んで頂き、ありがとうございました。少しでもお役にたてたなら幸いです！
