昨今のJavaScriptをレビューしたら全くわからなかった話
はじめに
最近JavaScriptのプルリクが来たので「よーしやったるでー」って感じでレビューしたんですが、まったく理解できずレビューになりませんでした。
その時疑問に思ったことをメモします。。
誰かの助けになれば幸いです。。
これはもう引退やな。。
classの中で function って書くの省略してるの？
class TestClass {
test() {
処理
}
}
function を省略して書けるのかなと思ったらそうではない。むしろ書いてはいけない。
下記はエラーになる。
class TestClass {
function test() {
処理
}
}
PHPに慣れてるからか、もやもやする。
(a, b) => は無名関数なのはわかったけど function(a, b) じゃダメなの？
(a, b) => は無名関数で function(a, b) と同じ。
好みの問題だがthisに違いがある。
this.hoge;
function(a, b) {
this.hoge; ←違うもの
}
this.hoge;
(a, b) => {
this.hoge; ←同じ！こっちのほうがthisが何を指してるかわかりやすい！（外と同じthisになってる）
}
... ってなんや...
... はスプレッド演算子。
中身バラす（展開する）やつ。
こんな感じで使う。
var parts = ['shoulders', 'knees']; var lyrics = ['head', ...parts, 'and', 'toes']; // ["head", "shoulders", "knees", "and", "toes"]
Arrayだったりオブジェクトだったりいろいろあるらしい。。詳しくはこちら
こんな感じで引数としても使える。無限引数。
const testFunction = (...items) => {
items.forEach(function(item) {
console.log(item);
});
}
testFunction('aaa');
testFunction('aaa', 'bbb', 'ccc');
{} は処理書き忘れ？
{} は空のオブジェクト宣言。
function の処理の中身ないやつかと思ったらオブジェクトだった。なるほど、、まぁたしかに。。
reduce 関数とかで出てくる。
var countedNames = names.reduce(function (allNames, name) {
if (name in allNames) {
allNames[name]++;
}
else {
allNames[name] = 1;
}
return allNames;
}, {});
copy2clipboard = copy; って何してるんや...
copyはクリップボードにコピーする関数。
https://blog.leko.jp/post/copy-function-of-developer-tools/
小技として、 promiseの中とかで使おうとすると名前解決できなかったりするので、
copy2clipboard = copy;
のように、事前にクローンしておいて、
this.copy2clipboard("logloglog");
みたいな感じで使える。
Mapって何や...
new Map(kvArray);
Mapは配列を連想配列にするクラス。Mapは型。
{} とは別。{} はキーに数値を使えないじゃん、ちゃんとした連想配列作ろうよ！ってことでMapができた。
詳しくはこちら
await 恐怖症や...
awaitはasyncが指定されてるときに使える。処理が終わるまで待つ。
awaitがないとthis.usersValidnesにプロミスが入って、this.usersValidnes自体にthenがないのでプロミスのまま生き続ける。処理は終わるけど結果が取れない。
hensu;
hoge().then(e => {
hensu = e;
})
と
hensu; hensu = await hoge()
は一緒。
awaitをなくすと
hensu= hoge()
となり、thenがないことになるので、
hensu.then(e=>~~~~)
してあげる必要がある。
例
hoge()は5秒くらいで"A"という文字列を返すプロミスだとする。
hensu = hoge(); await hensu; // 処理が終わるまで待つ console.log(hensu) // 終わったプロミスが表示されるだけ
下記ならば値が取れる
hensu = hoge(); hensu2 = await hensu; 5秒かかる console.log(hensu2) // "A"
hensu = hoge(); await hensu; // 処理が終わるまで待つ console.log(await hensu) // ”A” console.log(await hensu) // ”A” console.log(await hensu) // ”A” console.log(await hensu) // ”A”
とかはできる。 awaitは「プロミスを結果に変換する関数」だと考えるとわかりやすい！
async* のアスタリスクは何なんや！
* はジェネレータになる。ふつうはfuctionにつく。classだとfunction書けないのでasyncに付いたりする。
yield （いーるど）って何やねん！
ジェネレータ用のキーワード。return みたいなもの。
yield は return する。次呼ばれると yield の下から処理が始まる。
では yield* は一体何なのか...
yield を返すときは yield* としなければいけない。 return ではダメらしい。
function* func1() {
yield 42;
}
function* func2() {
yield* func1();
}
ややこしい。。詳しくはこちら
const って上書きできるの？
for await (const record of recordsGenerator) {
処理
}
constを上書きしてるように見えるが、そうではない。
constは上書きできないので下記は当然エラーになる。
const a = 1; const a = 2;
が、ここでは下記のような事になるので、スコープが違うのでエラーにならない。
{
const a=1;
}
{
const a=1;
}
// constを上書きしているのではなく別モノを定義している。
さいごに
近年のJSはぼくの知ってるJSちゃんじゃなかった。。大人になってた。。