【JavaScript 】関数の定義と使い方～アロー関数 Function Const～

Javascript で利用される関数の記述方法には通常のFunctionを利用した関数のほかに、アロー関数と呼ばれるものがあります。

今回は従来の関数の定義と比較的新しく追加されたアロー関数の書き方について紹介していきます。

本記事で学べる事

• Functionを使用した関数の定義と呼び出し方
• アロー関数の定義と呼び出し方
• constを利用した関数の定義
• 複数の引数を指定する書き方
• デフォルト値の設定

関数とは

関数とは複数の処理を1つの機能としてまとめることです。

実際に開発を行っていると同じようなコードを毎回書いてしまうことがありますが、そうするとコード全体が長くなってしまいとても読みにくいコードとなってしまいます。

そのような時に、各処理を関数として１つの機能にまとめることで好きな時に呼び出して使用することができるようになります。

また、関数は各プログラミング言語の仕様として事前に準備されているものも多数あります。

Javascript の例としてはコンソールなどで出力を確認する際によく用いられるconsole.log()も関数です。

こちらは引数に値を設定することで指定した値に対する結果を得ることができます。シンプルな機能のように思えますが、実態は複数の機能をまとめることで実現しています。

探してみると普段使用しているプログラミング言語機能の中には実は関数だったというものが多くあるので興味のある方は調べてみてください。

【JavaScript】プログラミング初心者におすすめの入門書籍3選+αを紹介

従来の関数定義と使い方

従来の関数定義(Function)の方法について紹介していきます。

関数の基本的な記述方法になりますのでしっかりと学習しましょう。

関数の定義

関数の定義方法は主に以下の2通りがあります。

//書き方１
function 関数名(引数) {
//処理
}

//書き方２
const 変数名 = function(引数) {
//処理
}

書き方１
最も一般的な関数の定義方法です。ほかの言語でもよく見られる記述方法なので理解しやすいと思います。

関数であることを宣言するためにFunctionを記述して、そのあとに関数名を指定します。また、引数がある場合には()カッコ内に引数を記述しましょう。

引数がない場合でも空の()カッコを記述する必要があります

関数を宣言したら、処理は{}波カッコ内に記述します。

書き方２
constを使用した記述方法で関数式と呼ばれます。関数式とは、関数を値として変数へ代入している式のことです。 関数式では関数を値として扱っていて、文字列や数値などの変数宣言と同じ定義方法です。

関数名を持たない関数の為、無名関数などとも呼ばれます。ただ、正確には関数名を設定することもできます。

関数名を設定してもconstで変数に格納されているため、どっちにしても関数名では呼び出せない関数となってしまい命名する意味がありません。

呼び出す場合には、変数名を使用して呼び出す必要があります。呼び出し方については関数名を付けた場合と変わらないので使用方法に困ることはないかと思います。

関数の呼び出し

//呼び出し方
関数名または変数名(引数);

//consoleなどで出力を確認したい場合にはconsole.logで確認できる
console.log(関数名または変数名(引数));

書き方1,2どちらでも呼び出し方と出力結果は同じになります。

サンプル構文

書き方1,2両方のサンプル構文です。書き方は違っても実際に行っている処理は同じになります。

//書き方1
function dogs(str) {
  return "私は" str + "です";
}

//書き方2
const dogs = function(str) {
  return "私は" str + "です";
}
console.log(dogs("柴犬"));

どちらも引数に文字列を渡すことで、関数内に定義された既定の文字列に結合して結果を返してくれます。

consoleの出力結果

アロー関数の定義と使い方

従来の関数定義をよりシンプルに利用することができるようになったのがアロー関数です。

最近はほとんどこちらの記述方法で利用されているので、アロー関数を覚えておけば問題ありませんが、制限事項もあるので注意が必要です。

関数の定義

//書き方１
const 関数名 = (引数) => {
//処理
};

引数が一つの場合には()カッコを省略することができます。

関数の呼び出し

//呼び出し方
関数名(引数);

//consoleなどで出力を確認したい場合にはconsole.logで確認できる
console.log(関数名(引数));

関数の呼び出し方については従来の関数の呼び出しと同じです。アロー関数で記述した場合でも変わりません。

サンプル構文

例(書き方１)

const dogs = (str) => {
  return "私は" + str + "です";
}

console.log(dogs("アメリカン・コッカ―・スパニエル"));

今回のサンプル構文のように処理が１行で完結している場合には、returnと{}波カッコを省略することができます。

また、上記でも説明しましたが受け取る引数が1つの場合には引数を囲う()カッコは記述しなくても問題ありません。

//書き方1の省略形
const 関数名 = 引数 =>  処理;

//サンプル構文(書き方１)
const dogs = str => "私は" + str + "です";

上記の省略形の書き方でも出力結果は変わりません。

出力結果

複数の引数を渡して処理をする

複数の引数を渡して処理するアロー関数の定義について紹介していきます。

関数の定義

複数の引数を受取る場合には各引数の間を(,)カンマで区切る必要があります。

引数が複数となるので()カッコは必須のとなることに注意してください。

//書き方
const 関数名 = (引数1,引数2) => {
//処理
};

関数の呼び出し

呼び出す際の引数の書き方も上記同様にカンマで区切ることで複数記述することができます。

//呼び出し方
関数名(引数1,引数2);

//consoleなどで出力を確認したい場合にはconsole.logで確認できる
console.log(関数名(引数1,引数2));

サンプル構文

サンプル構文では処理が一行の為、省略形と複数行の処理の場合でも利用できるReturnを利用した記述方法を記載しています。

プロジェクトなどの開発方針に合わせてかき分けましょう。

//波カッコとreturnを使用しない書き方
const dogs = (str1, str2) => "私たちは" + str1 + "と" + str2 + "です";

//波カッコとreturnを使用する書き方
const dogs = (str1, str2) => {
return "私たちは" + str1 + "と" + str2 + "です";
};

console.log(dogs("コーギー", "ダックスフンド"));

出力結果

関数に初期値(デフォルト値)を設定する方法

引数に初期値(デフォルト値)を設定する記述方法について紹介していきます。

引数に初期値(デフォルト値)を設定する理由

まず下のサンプル構文を見てください。

サンプル構文(引数あり)

const greeting = (name) => {
  return "私は" + name + "です";
};

console.log(greeting("イングリッシュ・スプリンガー・スパニエル"));

出力結果：私はイングリッシュ・スプリンガー・スパニエルです 

上記の構文は自己紹介をするgreeting関数を定義して実行しています。

この関数は呼び出すときに引数(名前)を与えることで、与えられた引数を定型文と文字列結合して出力する関数です。

今回のサンプルでは引数に『イングリッシュ・スプリンガー・スパニエル』を渡しているので、関数内で文字列を結合した際の出力結果は『私はイングリッシュ・スプリンガー・スパニエルです』となります。

では引数を与えずにこの関数を呼び出すとどうなるでしょうか？

下記で実行してい見ます。

サンプル構文(引数無し)

const greeting = (name) => {
  return "私は" + name + "です";
};

console.log(greeting());

出力結果：私はundefinedです 

引数を渡さずに関数を呼び出すと出力結果は『私はundefinedです』となりました。

undefinedとは『未定義』という意味です。これは本来与えられるべき引数を受取ることができずに変数nameの中身が空っぽになっているということです。

Javascriptではそのような場合にはエラーとはならずに未定義を意味するundefinedを出力する仕様となっています。

そのため引数を渡すことができずに処理が実行されてしまった場合には開発側としては意図していない文字列が出力されることになります。

そのようなことを避けるためにあらかじめ引数に値を設定しておくのが初期値(デフォルト値)の設定を利用する理由となります。

引数に初期値(デフォルト値)を設定する

では初期値(デフォルト値)を設定する方法について紹介していきます。

初期値の設定

const 関数名 = (引数 = 初期値) => {
  return 処理;
};

console.log(関数名(引数));

上記の構文のように引数に対して=(イコール)で任意の値を設定することで利用することができます。

実際に先ほど紹介した構文で初期値を設定して出力がどのように変わるのか試してみましょう。

サンプル構文(初期値を設定)

const greeting = (name = "犬") => {
  return "私は" + name + "です";
};

console.log(greeting());

出力結果：私は犬です 

関数を呼び出す際に引数を渡してはいないですが今回は『undefined』ではなく『犬』と出力されました。

このように引数に対して事前に初期値を設定することで意図しない文字の出力をさせないで任意の値を設定できるようになります。

このような記述が良く見られるのがログインが必要なシステムなどです。

例えば、ユーザー登録してあればそのユーザ名が引数として渡されて『こんにちは、佐藤さん』などとシステムが返してくれるサービスがよくあります。

ですが、登録やログインなどをしていないと『こんにちは、ゲストさん』などの表記にかわりますね。

このように初期値の設定はよく利用されている記述方法なので引数だけではなく、値を必要とする変数などにも初期値の設定を意識して利用するようにしましょう。