【JavaScript超入門】関数をマスターしよう

tom244

3年前

今回はJavaScriptの関数について学習していきましょう。

関数は、パラメータを渡し、関数内で何かしらの処理を行い、その結果を返すことができます。

いろいろな箇所で使用されている同じ処理を関数にすることで、可読性がよくなったり、修正する箇所もひとつになるので保守性も良くなります。

JavaScriptには様々な関数が用意されており、また関数は自分で定義することもできます。

最も基本的な関数の宣言方法を確認しましょう。

function increment(num) {
    return num + 1;
}
console.log(increment(1));　//2

関数は、function を使用して上記のように宣言することができます。

また、関数の返り値は return を使用することで、処理結果を返すことができます。

return を書くことで、その時点で関数の処理を終了させることができるので、途中で関数の処理を終了させたい時にもreturnを書くことは覚えておきましょう。

関数にパラメータを渡す時は、（）内に定義してあげることで、パラメータを渡すことができます。

このサンプルコードでは、引数に数字を渡して、＋１した結果を返すような実装になっています。

関数の実行は、

increment(1);

宣言した関数をこのように書くことで実行することができます。

JavaScriptでは上から処理が読み込まれるので、

関数の宣言より、先に関数の実行を書くとエラーになります。

console.log(increment(1));　// エラー　Uncaught ReferenceError: increment is not defined
let increment = (num) => {
    return num + 1
}

なので、関数の実行は関数を宣言した後に書くようにしましょう。

関数宣言した後に、関数の実行を書く。

データ型で少し確認しましたが、JavaScriptではFunctionクラスが用意されいます。

このFunctionクラスを使用して、関数を宣言することもできます。

let increment = new Function('num', 'return num + 1;')
console.log(increment(1));　//2

Functionクラスのオブジェクトを生成することで、関数を宣言できます。

ただこの方法は現場でも見たことがないので、使用することはほとんどないでしょう。

JavaScriptでは、関数もデータ型のひとつなので、変数に代入することができます。

let increment = function(num) {
    return num + 1
}
console.log(increment(1));　//2

このように関数を変数に代入し、関数として使用することができます。

これを無名関数、または匿名関数と呼ばれますので覚えておきましょう。JavaScript以外の言語でも使用する用語です。

先ほど紹介したfunction　を使用した関数の宣言方法は、少し古い書き方になります。

ES 2015で新しく追加された、アロー関数を使用した関数の宣言方法も確認しておきましょう。

let increment = (num) => {
    return num + 1
}

このようにfunctionを使わず、=> を使用して関数を宣言することができます。

こちらの方がfunctionを使用した関数の宣言方法より、モダンな書き方になるので、ぜひ押さえておきましょう。

ちなみに、引数の（）は引数がある場合は省略できます。引数がない場合は、省略できないので注意です。

// 引数の（）は省略できる
let increment = num => {
    return num + 1
}

// 引数がない場合は（）は省略できない
let hello = () => {
    console.log('こんにちは')
}

アロー関数は、初学者の方は少し難しく感じるかもしれませんが、慣れてしまえば難しい物ではありません。実務でもアロー関数はよく見かけますので、コードをしっかりと追えるようになるためにも、アロー関数はしっかりとマスターしていきましょう！