ES6の新機能を学ぶ２ ~デフォルトパラメータとレストパラメータ~

ブログBlog

- ES6の新機能を学ぶ２ ~デフォルトパラメータとレストパラメータ~
- 2016年2月10日
- ES6
- JavaScript

前回に引き続き、今回はES6（ES2015）の新機能である関数パラメータの拡張についてみていきたい。 ES6では、新たにデフォルトパラメータとレストパラメータという機能が追加された。デフォルトパラメータは、Ruby等では一般的だが、関数の引数にデフォルト値を設定できるものである。 ES5までは、引数にデフォルト値を持たせたい場合、以下のようにコーディングしていた。

function showMessage(message, person){
  message = (message === undefined) ? 'Hello!' : message;
  person = (person === undefined) ? 'jackson' : person;
  console.log(message + ', ' + person);
}

さすがにこれではコードが読みづらい。 ES6では以下のようにパラメータにデフォルト値を持たせることが可能だ。

function showMessage(message='Hello!', person='jackson'){
  console.log(message + ', ' + person);
}

見比べてみると可読性の向上は明らかである。次にレストパラメータだが、これは関数が可変長の引数を受け取れるというものである。従来ES5で可変長の引数を受け取るためには、以下のようなコードを書いていた。

function print(){
  var args = Array.prototype.slice.call(arguments);
  args.forEach(function(data){
    console.log(data);
  });
}
print('tako', 'ika');

関数内でわざわざ

var args = Array.prototype.slice.call(arguments);

としているのは、argumentsがArrayに似たオブジェクトであり、Arrayそのものではないため、配列として扱うために変換する必要があるためである。 ES6では以下のように書けるため、コードが非常にシンプルになった。

function print(...rest){
  rest.forEach(function(data){
    console.log(data);
  });
}
print('tako', 'ika');

この記事を書いた人 : 佐藤冬彦

その他のスタッフブログ:

一覧へ戻る

ES6の新機能を学ぶ２ ~デフォルトパラメータとレストパラメータ~

JOIN OUR TEAM