最近の ECMAScript (JavaScript) に入ったやつをぐぐりたくても名前が分からないやつ

この記事は書かれてから1年以上が経過しており、最新の情報とは異なる可能性があります

明確に読み書きできるやつは良いのです。

読み書きできないやつでぐぐりたいときに、 「これ英語で（日本語で）何ていうんだっけ？」 みたいなのが不定期で出てきて「あーなんて呼ぶか忘れたー」ってなります。 みなさんもありますよね？？

もうこれ以上忘れたくないのでメモ っておきました。

以下の見出しは「そうそうこういうやつなんだけど、それの名前を知りたい」レベルで逆引きできるものにしてあります。

ドットが3つ連続するやつ

let a = {
  key1: 'val1',
};
let b = {
  key2: 'val2',
  key3: 'val3',
  ...a,
};
console.log(b);

{key2: "val2", key3: "val3", key1: "val1"}

この 展開 するやつです。

文脈によって 残り 全部受け取る、みたいに使うところでは、 rest parameter と呼びます。

プロパティのキーと値の名前が一致するやつ

let a = 'foo';
let b = {
  a,
};
console.log(b);

{a: "foo"}

本来 a: a, って書かないといけないところを 短く書けちゃう やつです。

オブジェクトの中にそのまま関数書いちゃうやつ

let a = {
  b() { return 'foo' },
};
console.log(a.b());

foo

本来 b: function () { ... } or b: function b() { ... } って書かないといけないところを 短く書けちゃう やつなので、先ほどと同じです。

プロパティがメソッドになったやつです。

オブジェクトのキー部分で四角い括弧で囲って計算できるやつ

let a = 2;
let b = {
  key1: 'val1',
  key2: 'val2',
  key3: 'val3',
};
let c = {
  ['key' + a]: 'computed key2',
};
console.log(c);

{key2: "computed key2"}

本来あとで c['key' + a] とか書かないといけなかったところを、 その場で 計算 できちゃうやつ。

function 書かずに => で済んで this 問題も解決するやつ

let a = {
  b: () => 2 + 3,
};
console.log(a.b());

5

function 書かずに済むやつですね。 this も束縛されないので var self = this; みたいなのも書かずに済みます。

ちなみに arrow function で object literal を返すときは、 丸括弧つけて返す必要がある のをけっこう忘れます・・・。

() => ({key1: 'val1'});

代入するときに複数の変数で受け取れるやつ

let [a, b] = [1, 2];
console.log(a, b);

1 2

こういう受け取る側で 分割 して複数の変数で受け取れちゃうやつです。

ちなみに先ほどの rest parameter も使えます。

let [a, b, ...c] = [1, 2, 3, 4, 5];
console.log(c);

[3, 4, 5]

引数に波括弧で受け取るやつ

let a = {
  key1: 1,
  key2: 2,
  key3: 3,
};
let b = ({ key1, key2 }) => {
  return key1 + key2;
}
console.log(b(a));

3

これも分解して受け取ってるので上と同じ 分割代入 の一種、 destructuring assignment だそうです。

ちなみに import するときも使えます。

import { foo, bar } from 'library'

バッククオートで囲む文字列のやつ

let a = 1;
let b = `a is ${a}`;
console.log(b);

a is 1

ちなみに back quote は、 backtick ともいうらしいです。

変数の埋め込みがやりやすくなったので、 テンプレート 用途などに使いやすいやつです。

まとめ

これ以外のやつは、書いてあるそのものでぐぐれば基本的に調べられるものだと思います。 もし漏れているものがあればご指摘ください。追記しておきます。

記号系のやつは、意外と読み方が分からなくて調べようがない、みたいなケースも多いんじゃないかと思います。

名前重要 ですね。

参考URL

この記事は書かれてから1年以上が経過しており、最新の情報とは異なる可能性があります

もし記事内に誤りなどございましたら、 @girigiribauer @girigiribauer.com までご一報いただけると助かります。

Related articles