前編では、関数の作り方を学びました。後編では、作った関数を実際に使ってみましょう。また、アロー関数という、関数を短く書くための便利な記法についても紹介します。

3. 関数を使ってみよう

作った関数を使うには、関数名に続けて()を書き、その中に引数を渡します。これを「関数を呼び出す」といいます。

例：add関数を呼び出す

前編で作ったadd関数を呼び出してみましょう。

function add(x, y) {
  let result = x + y;
  return result;
}

let sum = add(5, 3);
console.log(sum); // 8

add(5, 3)と書くことで、add関数が呼び出され、引数として5と3が渡されます。関数の中で5と3が足し算され、その結果（8）がreturnで返されます。返された値は、sumという変数に格納され、console.log()でコンソールに表示されます。

例：greet関数を呼び出す

引数がないgreet関数を呼び出すときは、以下のように書きます。

function greet() {
  console.log("Hello!");
}

greet(); // Hello!

greet()と書くだけで、greet関数が呼び出され、コンソールに「Hello!」と表示されます。

例：greetWithName関数を呼び出す

引数があり、戻り値がないgreetWithName関数を呼び出すときは、以下のように書きます。

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

greetWithName("山田"); // こんにちは、山田さん！

greetWithName("山田")と書くことで、greetWithName関数が呼び出され、引数として"山田"が渡されます。関数の中で、"山田"を使った挨拶メッセージが作成され、コンソールに表示されます。

4. アロー関数で短く書く（おまけ）

アロー関数は、ES2015(ES6)で導入された、関数を短く書くための記法です。functionキーワードの代わりに=>（アロー）を使います。

例：add関数をアロー関数で書く

先ほどのadd関数をアロー関数で書き直すと、以下のようになります。

const add = (x, y) => {
  let result = x + y;
  return result;
};

functionキーワードがなくなり、代わりに=>が使われていますね。

さらに、アロー関数では、以下のような省略記法を使うことができます。

1. 引数が1つだけのときは、()を省略できる。
2. 関数の本体が一つの式だけで、その結果を返す場合は、{}とreturnを省略できる。

これらを適用すると、add関数は以下のように、さらに短く書くことができます。

const add = (x, y) => x + y;

たった1行になりました！

例：greet関数をアロー関数で書く

引数がないgreet関数は、以下のように書けます。

const greet = () => {
  console.log("Hello!");
};

さらに、本体が一つの式だけなので、{}を省略して、以下のように書くこともできます。

const greet = () => console.log("Hello!");

例：greetWithName関数をアロー関数で書く

引数が1つのgreetWithName関数は、以下のように書けます。

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

さらに、本体が一つの式だけなので、{}を省略して、以下のように書くこともできます。

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

アロー関数の注意点

アロー関数は便利な記法ですが、通常の関数と完全に同じではありません。主な違いは、thisという特殊な変数の扱い方です。超入門では解説しませんが、今のところは、「アロー関数では、thisの扱いが少し違う」ということだけ覚えておいてください。