関数の基本 Javascript初学者講座

プログラムを書いていると、同じ処理を何度も書くことがよくあります。JavaScriptに限らず他の言語でも同じような処理は関数を作って処理をすることで、重複した記述を減らすことができます。

今回は基本的な関数の定義の仕方を勉強していきましょう。関数はES2015で新たにアロー関数という記述方法が追加されましたが、まずは従来の記述を見ていきます。

functionによる関数の定義
戻り値
アロー関数
1. thisを束縛しない
終わりに

functionによる関数の定義

関数を定義するときの記述方法は下記のようになります。

function 関数名(引数) {
  関数の処理
} 

// または

const 関数名 = function(引数) {
  関数の処理
}

// 関数を使用するとき
関数名()

さっそく例を作っていきます。

function sum () {
  const a = 1 + 2;
  console.log(a);
}

// 定義した関数を使用する
sum(); // 3

関数 sum は変数 sumに1 + 2の値を代入しコンソールで表示しています。( )内に記述するはずの引数がありませんが、必要な場合は省略して構いません。

ただ、これだと1 + 2の計算しかできないので、あまり関数にする意味がありません。そこで引数を使って関数の宣言時に値を指定して足し算できるように修正します。
引数はカンマで区切ることで複数記述することができます。

function sum (a, b) {
  const c = a + b;
  console.log(c);
}

sum(10, 5); // 15
sum(3, 2) // 5

戻り値

関数で処理されて返ってきた値を戻り値と呼び、関数内でreturnを行なって値を返します。
次の例では戻り値を変数に代入し、条件式へ渡しています。

const sum = function(a, b) {
  const c = a + b;
  return c;
}

total = sum(33,68);

if ( total < 100) {
  console.log("合計値は100よりも小さい");
} else {
  console.log("合計値は100以上");
}
// 合計値は100以上

returnがされた時点で関数内の処理は終了するので、その後に書いたプログラムは実行されません。

const sum = function(a, b) {
  let c = a + b;
  return c;
  c = c + a;
  return c;
}

console.log(sum(5, 5)) // 最初のreturnで10が返却される

アロー関数

アロー関数はES2015で追加された関数の記述方法です。従来よりも記述が短くて済むメリットや、thisを束縛しないという仕様の違いがあります。

const 関数名 = (引数) => {
  関数の処理
}

関数の処理が1行の場合は{ }（波括弧）を省略して書くこともできます。

const 関数名 = (引数) => 関数の処理

まずは両方の書き方で簡単な関数を定義します。

const sum01 = (a,b) => {
  c =  a + b;
  return c;
}

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

console.log(sum01(20, 20)); // 40
console.log(sum02(10,10)); // 20

どちらもコンソールに足し算の結果が表示されます。
{ }（波括弧）が省略された場合は処理の結果がreturnを記述しなくても戻り値となります。

thisを束縛しない

アロー関数と従来の宣言方法とは単に記述が省略できるだけではなく、アロー関数はthisを束縛しないという仕様を持っています。
言葉だけ聞いてもなんぞやとなりますので、例を作って勉強していきます。

従来の宣言方法でのthis

option = "standard";

function optionSelect() {
  console.log(this.option)
}

const obj01 = {
  option: "premium",
  order: optionSelect
}

const obj02 = {
  option: "enterprise",
  order: optionSelect
}

obj01.order(); // premium
obj02.order(); // enterprise

アロー関数でのthis

option = "standard";

const optionSelect = () => {
  console.log(this.option)
}

const obj01 = {
  option: "premium",
  order: optionSelect
}

const obj02 = {
  option: "enterprise",
  order: optionSelect
}

obj01.order(); // standard
obj02.order(); // standard

このように従来の宣言であれば同じオブジェクト内のoptionが呼び出されますが、アロー関数の場合は宣言時にthisを決めている（束縛している）ため、先に定義している変数を参照しています。