【TypeScript】おぉ！って思ったJSの書き方

こんばんは葛の葉です。

体調を崩したので今回も省エネです。

JavaScriptを書き始めてはや9ヶ月ぐらいなんですけど、最近、これいいなぁって思うJSの構文を書いていきます。

スプレッド構文

Mozillaのリファレンスはこちら。

developer.mozilla.org

これは配列の要素をバラして展開できる構文のようです。一回、配列の要素をバラすので一度ばらしてから配列に再び挿入することで新しい配列を作成することが出来ます。unshift()やpush()みたいな破壊的ではない点も良いですし、一度...の意味をわかれば、コード理解もシンプルになりやすいという点もありますね。例えば配列に要素を追加するときに前方に追加しているか、後方に追加しているかというのもわかりやすいですね。

const lists = ["hoge", "piyo", "fuga"];
console.log(...lists); // hoge piyo fuga;

const newData = "moge";
const newLists1 = [...lists, newData]; 
const newLists2 = [newData, ...lists];
console.log(lists); // [ 'hoge', 'piyo', 'fuga' ]
console.log(newLists1); // [ 'hoge', 'piyo', 'fuga', 'moge' ]
console.log(newLists2); // [ 'moge', 'hoge', 'piyo', 'fuga' ]

分割代入

Mozillaのリファレンスはこちら。

developer.mozilla.org

簡単に書くと配列を使って複数の変数を一文で代入出来るものです。先のスプレッド構文を使うことで、配列化することも出来るようですね。

const [x, y, ...somethings] = ["cat", "dog", "pig", "horse", "rabbit"];
console.log(x); // cat
console.log(y); // dog
console.log(somethings); // [ 'pig', 'horse', 'rabiit' ]

字詰め

Mozillaはこちら。２つあるのは字詰めするのが左か右かの違いになります。padはpadding(詰める)の意味だと思います。この構文はEcmaScript2019の構文で比較的新しめのものなので、使えないブラウザもありうる。StringオブジェクトがもつpadXXXXのメソッドに対して、最大の文字数と詰める文字を渡してあげればOKというのもわかりやすいです。地味にゼロパディング使うケースがあるのでこういうのはありがたいです。

developer.mozilla.org

developer.mozilla.org

console.log("7".padStart(3, "0")); // 007
console.log("7".padEnd(3, "0")); // 700