Udacity: ES6 JavaScript Improved メモ①

UdacityのES6 - JavaScript Improvedコースを、受講しながらメモしていきます。
Lesson1: Syntax

##let , const
ES6では、変数宣言のキーワードにlet、constが追加され、それぞれ異なる目的で使われる。
letは、宣言後に再代入されることを前提に使う。
constは、宣言後に再代入されないことを前提に使う。
両者に共通するのは、それまで変数宣言に使われていたvarとは違って、ブロックスコープを作るということ。
つまり、{}の内部でのみ有効になるということ。「局所変数」ともいう。

example.js

let a = 1;
if(true) {
  var b = 2;
  let c = 3;
  const d = 4;
  d = 5; // Uncaught TypeError: 再代入しているため
}

console.log(a); // 1
console.log(b); // 2
console.log(c); // Uncaught ReferenceError: {}の内部で宣言しているため

varの出番が完全になくなったわけではないが、スコープの制限と再代入の有無が一目でわかるのは、読み手に優しい。積極的にletとconstを使っていきましょう。

##テンプレートリテラル
ここは知っていたので軽く。
`こんにちは、${name} さん`のように、バッククォートの中で${}の記法で変数を埋め込める。
文字列結合の+演算子や、改行文字/nを使わずに、簡潔に書けるようになった。

##Destructuring(分割代入)
配列から値を、オブジェクトからプロパティを取り出して、別の変数に代入する式。

example.js

const colors = ['red', 'blue', 'yellow', 'green', 'orange'];
const [first, second, third] = colors;
console.log(first); // red
console.log(third); // yellow

受け取る側の変数の数が足りなかった場合、余った要素は無視される。
オブジェクトのプロパティを受け取るときは、変数名とプロパティ名を合わせる。

##Object literal shorthand
オブジェクトの初期化を簡潔に書けるようになった。

example.js

// 従来の記法
let type = 'crispy';
let size = 'L';

const pizza = {
  type: type,
  size: size
};

example.js

// 省略記法
let type = 'crispy';
let size = 'L';

const pizza = {type, size};

両方とも結果は同じ。プロパティ名を変える必要がないなら省略記法を使いましょう。

##iteration
イテレーションにも新しい記法が追加された。
for...ofループを配列に対して使えば、インデックスによる指定がなくても、要素にアクセスできる。

example.js

const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

for(const digit of digits) {
  console.log(digit);
}
// 0 1 2 ... 8 9

##スプレッド演算子
...<= こいつがスプレッド演算子。
const a = [...array1, ...array2]のように書くと、array1とarray2の要素を展開し、新たな配列として変数aに代入できる。