JavaScriptでのオブジェクト内の省略記法について(ES2015)

JavaScriptでのオブジェクト内の省略記法について(ES2015)

こんにちは!今回はJavaScriptでのオブジェクト内の省略記法についてブログにしてみたいと思います。

ES2015以降の記法に慣れている方にはおなじみだと思いますが、JavaScriptのオブジェクトは省略記法を用いることで、コードをすっきりと書くことができます。

そんなに分量が多い内容ではありませんが、今回のブログにまとめてみたいと思います!(こうやって小さなこともブログに書くことでより自分の中で確実な知識定着を目指すべく、最近は内容の大小問わずブログにすることにしてます)

ケース1・オブジェクト内のkeyとvalueが同じ場合の省略記法

JavaScriptではオブジェクトを使用することが非常に多いですが、keyとvalueが同じ場合の省略記法は以下の通りになります。

//省略記法を使用しないオブジェクトの書き方
const name = 'こすげ';
const userData = {
  name: name、
  from: '日本'
};


//省略記法を使用したオブジェクトの書き方
const name = 'こすげ';
const userData = {
  name,
  from: '日本'
};

上記コードのように、keyとvalueが同じ場合は省略をしてオブジェクトを記述することができます。

ケース2・オブジェクト内の関数の省略記法

オブジェクト内での関数(メソッド)を定義する場合、こちらも省略記法が存在します。

//省略記法を使用しない書き方
const userData = {
  name: 'こすげ'、
  from: '日本',
  getUserHealth: function(){

  }
};

//省略記法を使用した書き方
const userData = {
  name: 'こすげ'、
  from: '日本',
  getUserHealth(){

  }
};

要するにfunction 部分を省略することができるわけですね!

注意点

以上の内容は、ES2015以降で存在する記法になります。

レガシーブラウザ(IE11など)には効かないことがあるので、babelなどを使ってES5以前の書き方にトランスパイルする環境が必要になるので注意しましょうー

まとめ

ということで、今回は簡潔ですが、JavaScriptでのオブジェクト内の省略記法について(ES2015)書いてみました!

小さなところからコツコツと。Arrownも改めてそんな精神を思い出しながらブログをコツコツ続けていければと思います!

シェアする

  • このエントリーをはてなブックマークに追加

フォローする