あまブログ

ドキドキ......ドキドキ2択クイ〜〜〜〜〜〜〜ズ!!

【ES2015】JavaScriptの関数の書き方

JavaScript

1. 関数宣言(Function declaration)

function calcRectArea(width, height) {
  return width * height;
}

console.log(calcRectArea(5, 6)); // => 30

1-1. 関数宣言の巻き上げ

関数宣言は巻き上げられる

hello(); // => "Hello"

function hello(){
    return "Hello";
}

関数式は巻き上げられない

hello(); // => TypeError: hello is not a function

const hello = function(){
    return "Hello";
};

2. 関数式(Function expression)

2-1. 名前付き関数(Named function)

  • 名前付き関数は再帰的に関数を呼び出す際などに利用する
// factorialは関数の外から呼び出せる名前
// innerFactは関数の外から呼び出せない名前
const factorial = function innerFact(n) {
    if (n === 0) {
        return 1;
    }
    // innerFactを再帰的に呼び出している
    return n * innerFact(n - 1);
};
console.log(factorial(3)); // => 6

2-2. 無名関数(Anonymous Function)

  • 無名関数はコールバック関数としてよく使われる
const x = function(a, b) {
   return a * b;
};

3. アロー関数(Arrow function expression)

  • アロー関数は関数式の代替構文(機能的な違いはいくつかある)
  • ES2015から追加された
const x = (a, b) => {
  return a * b;
};

3-1. アロー関数の省略記法

  • 関数の仮引数が1つのときは()を省略できる
  • 関数の処理が1つの式である場合に、ブロック({})とreturn文を省略できる
    • その式の評価結果をreturnの返り値とする
// 仮引数の数と定義
const fnA = () => { /* 仮引数がないとき */ };
const fnB = (x) => { /* 仮引数が1つのみのとき */ };
const fnC = x => { /* 仮引数が1つのみのときは()を省略可能 */ };
const fnD = (x, y) => { /* 仮引数が複数のとき */ };
// 値の返し方
const fnE = x => { return x + x; }; // ブロックの中でreturn
const fnF = x => x + x;            // 1行のみの場合はreturnとブロックを省略できる
const fnG = x => {
  let y = 10;
  return x + y;
};  // 関数の処理が複数行ある場合はreturnとブロックは省略できない

4. メソッド定義(Method definition)

  • オブジェクトのプロパティである関数をメソッドと呼ぶ
  • JavaScriptにおいて関数とメソッドの機能的な違いはない
  • オブジェクト.メソッド名()でメソッドを呼び出す
const obj = {
  method1: function () {
    return "this is method1";
  }, // `function`キーワードでのメソッド
  method2: () => "this is method2" // Arrow Functionでのメソッド
};
console.log(obj.method1());  // => "this is method1"
console.log(obj.method2());  // => "this is method2"

次のように空オブジェクトのobjを定義してから、methodプロパティへ関数を代入してもメソッドを定義できる

const obj = {};
obj.method = function() {
};

4-1. メソッドの短縮記法

  • ES2015からメソッドの短縮記法が追加された
  • オブジェクトリテラルの中でメソッド名(){ /*メソッドの処理*/ } と書くことができる
const obj = {
    method() {
        return "this is method";
    }
};
console.log(obj.method()); // => "this is method"
  • この書き方はオブジェクトのメソッドだけではなく、クラスのメソッドと共通の書き方となっているため、メソッドを定義する場合は、この短縮記法に統一する

【参考】