0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

[ES6] 関数のデフォルト引数

Posted at

Reactのjsxやtsxでは多用されるが、本来の使いどころどういうパターンなのか調べた。

demo.js
function fn(options) {
  console.log(options);
}

fn();

↑この場合、optionsが定義されていないのでconsoleはundefinedになってしまう。

demo.js
function fn(options  = {}) {
  console.log(options);
}

fn();

↑こうすることでoptionsが何も設定されなくても空のオブジェクトが定義される。

これの何がよいのか。

今まで関数の引数を設定した場合、引数が入力されなかったときのためにこう書いていた。

demo.js
function fn(options) {
  options = options || {};
  ...
}

この options = options || {}; が必要なくなる。

このnullがきたときの対策は、TypeScriptやESLintを入れているとリアルタイムで解析してwarningやエラーを出してくれるので、そもそも最近は問題になることが少ない。

しかしJSでなんのLinterも入れていないが、昔だれかの書いたコードを修正しなければならないという状況では理解しておくべき点である。

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?