UdacityのES6 - JavaScript Improvedコースを、受講しながらメモしていきます。
Lesson1: Syntax
let , const
ES6では、変数宣言のキーワードにlet、constが追加され、それぞれ異なる目的で使われる。
letは、宣言後に再代入されることを前提に使う。
constは、宣言後に再代入されないことを前提に使う。
両者に共通するのは、それまで変数宣言に使われていたvarとは違って、ブロックスコープを作るということ。
つまり、{}の内部でのみ有効になるということ。「局所変数」ともいう。
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(分割代入)
配列から値を、オブジェクトからプロパティを取り出して、別の変数に代入する式。
const colors = ['red', 'blue', 'yellow', 'green', 'orange'];
const [first, second, third] = colors;
console.log(first); // red
console.log(third); // yellow
受け取る側の変数の数が足りなかった場合、余った要素は無視される。
オブジェクトのプロパティを受け取るときは、変数名とプロパティ名を合わせる。
Object literal shorthand
オブジェクトの初期化を簡潔に書けるようになった。
// 従来の記法
let type = 'crispy';
let size = 'L';
const pizza = {
type: type,
size: size
};
// 省略記法
let type = 'crispy';
let size = 'L';
const pizza = {type, size};
両方とも結果は同じ。プロパティ名を変える必要がないなら省略記法を使いましょう。
iteration
イテレーションにも新しい記法が追加された。
for...ofループを配列に対して使えば、インデックスによる指定がなくても、要素にアクセスできる。
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に代入できる。