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も入れていないが、昔だれかの書いたコードを修正しなければならないという状況では理解しておくべき点である。