#9 JavaScriptで学ぶ関数の基本

JavaScriptの関数には、書き方がいくつも存在するという特徴があります。この記事では、JavaScriptにおける関数の基本と、書き方ごとの違いを解説します。

function文による書き方

function greet(name) {
    console.log(`こんにちは、${name}さん`);
}

greet("太郎");

アロー関数という書き方

近年のJavaScriptでは、「アロー関数」という簡潔な書き方がよく使われます。

const greet = (name) => {
    console.log(`こんにちは、${name}さん`);
};

処理が1行で済む場合は、さらに中括弧を省略した書き方もできます。

const add = (a, b) => a + b;

デフォルト引数・可変長引数

function greet(name = "ゲスト") {
    console.log(`こんにちは、${name}さん`);
}

引数の数が決まっていない場合は、...(残余引数)を使うと配列としてまとめて受け取れます。

function sum(...numbers) {
    return numbers.reduce((total, n) => total + n, 0);
}

console.log(sum(1, 2, 3, 4)); // 10

関数式という書き方

関数を変数に代入する「関数式」という書き方もあります。function宣言と違い、定義した行より前で呼び出すとエラーになる点が特徴です。

const greet = function(name) {
    console.log(`こんにちは、${name}さん`);
};

即時実行関数という書き方

定義した直後に1回だけ実行したい関数は、かっこで囲んですぐに呼び出す書き方ができます。

(function() {
    console.log("読み込み時に1度だけ実行");
})();

この書き方は「即時実行関数式(IIFE)」と呼ばれ、変数を外部に漏らさず初期化処理を行いたい場面などで使われます。

JavaScriptならではの注意点

functionで作った関数と、アロー関数は、thisという特別な値の扱い方が異なります。最初のうちは違いを意識しなくても大きな問題にはなりませんが、オブジェクトの中でメソッドとして使う場面が増えてきたら、この違いに注意が必要になることを覚えておきましょう。一般的には、オブジェクトのメソッドにはfunction、コールバック関数にはアロー関数、という使い分けがよく行われます。

まとめ

JavaScriptの関数はfunctionとアロー関数の2つの書き方が基本です。デフォルト引数や残余引数(...)も活用しつつ、現在は広く使われるアロー関数を中心に、両方の書き方を読めるようにしておきましょう。

---

本ページはプロモーションを含みます。

参考書籍(PR)

JavaScriptをもっと学びたい方には「改訂新版JavaScript本格入門」がおすすめです。

---

PR

コードを書かずに自動化したい方へ

「学んだけど自分の作業に組み込む時間がない」という方向けに、ダブルクリックで動く Windows専用の自動化ツールをオーダーメイドで作成しています。気になる方は こちらをご覧ください。