現代的JavaScriptおれおれアドベントカレンダー2017 – 16日目

概要

{ foo: foo } を { foo } のように省略できます。

1
2
3
4
const name = 'Alice';
 
const obj = { name };
console.log(obj.name);  // => "Alice"

使い方

値が入っている変数の名前とプロパティの名前が一致する場合、省略して書くことができます。

1
2
3
4
5
6
7
const name = 'Alice';
 
const obj1 = { name: name };
console.log(obj1.name);  // => "Alice"
 
const obj2 = { name };
console.log(obj2.name);  // => "Alice"

混ぜて書く

コロン : と値とを書く普通のやり方と一緒に使えます。

1
2
3
4
5
6
const data;
 
const result = {
  data,
  date: Date.now(),
};

関数の引数で

頑張って作った結果を突っ込んだ変数とか、仮引数でもらったやつをそのまま突っ込むこともできます。

1
2
3
4
function foo({ message }) {
  const date = Date.now();
  bar({ data, message });
}

ちなみに関数の仮引数（ foo() のやつ）の方は「分割代入」の類です。別稿参照。

Vue.jsで

components でよく使ってます。

1
2
3
4
5
6
7
8
9
const ThemeItem = require('./ThemeItem.vue')
 
module.exports = {
  components: {
    ThemeItem,
  },
 
  // ...
};

その他

混ぜてかくと気持ち悪いような

ひとつのオブジェクトを作る場合はどちらかに統一して、 : 使う場合は省略できるものもしない方が良いかなあ。

1
2
3
4
5
6
7
8
9
const id = nanika.id;
const status = { ... };  // なんか複雑なアレ
 
const obj = {
  date: Date.now(),
  id,
  name: regularize(user.name),
  status,
};

違うオブジェクトならファイル内で両方あって良いんだけど。

参考