2017.05.19 2022.10.26

フロントエンド学習 ECMAScript 第1回

mmmuser

MMMに入社してもうすぐ半年になりました。
フロントエンドの学習は業務になぞっては行えていますが、体系的に学べていないということで、フロントエンド学習を今月から取り組んでいくこととなりました。

どんな内容を学習していくかをブログでまとめていきたいと思います。

第1回となる今回はECMAScriptについて学んでいきました。

実はいうと実務でECMAScript6を扱ったのは初めてでした。
なんとなく使って居た部分も多かったので、今回はまず基本構文についてまとめていきたいと思います。

Contents

基本構文

基本構文

let命令

従来のJavaScriptでは、ブロックレベルのスコープは存在しなかったが、let命令を使用することで、ブロックスコープが有効な変数を宣言できるようになりました。

if (true) {
  var i = 1;
}

console.log(i);
// 従来：1
// ECMAScript：エラー(i is not defined)

また、var命令は重複を認められているが、letでは重複を認めません。
var命令はECMAScriptでも利用できるようですが、スコープは最大限限定すべき、重複チェックをコンパイラーに任せられる という理由から、今後はletを優先して利用していくことになりそうです。

const命令

私も最初誤った認識だったのですが、const命令は 「変更できない」ではなく「再入できない」 という認識が正しいそうです。

エラーになる例

const data = 100;
data = 150; // エラー

エラーにならない例

const data = [1, 2, 3];
data[0] = 10;
console.log(data);
// 結果：[10, 2, 3]

※constもletと同様にブロックスコープです。

テンプレート文字列

個人的にこれ便利って感動してました。
例えば・・・

こんにちは
○○さん

という文字列を出力する場合。

let str = `こんにちは
○○さん`;

という感じで書けるようになりました。また、○○を変数の値にしたい場合は

let name = '山田';
let str = `こんにちは
${name}さん`;

という形で書けます。便利です。

Symbol

ECMAScriptでは新しくデータ型 Symbol が追加されました。
名前の通りシンボルを作成するための型です。

一度作成したシンボルは、それ自身とのみ等しくなります

なので、以下のように文字列で比較しても結果はfalseになります。

const JAPAN = Symbol('japan');

console.log(JAPAN === 'japan');
// 結果：false

自身とのみ等しくなるので、例え名前が同じでも結果はfalseになります。

const JAPAN1 = Symbol('japan');
const JAPAN2 = Symbol('japan');

console.log(JAPAN1 === JAPAN2);
// 結果：false

また、暗黙的な型変換はできませんが boolean と object への変換は可能です。

なかなか限定的な感じもしますが、 非公開なプロパティを定義 することもできるようです。
この辺りは積極的に取り入れていきたいです(゜゜)

分割代入

配列やオブジェクトを分解し、その要素やプロパティを個々の変数に展開するための構文です。

例えば・・・

let [hoge, foo] = [15, 20];

console.log(hoge);
// 結果：15

console.log(foo);
// 結果：20

演算子を使うことでまとめて配列として取り出すこともできます。

let [hoge, foo, ...other] = [10, 20, 30, 40, 50, 60];

console.log(hoge);
// 結果：10

console.log(foo);
// 結果：20

console.log(other);
// 結果：[30, 40, 50, 60]

配列を返す関数から、個々の変数に値を割り当てたい場合などは便利そうですね！

const destructure = (() => {
  let result1 = 10;
  let result2 = 20;
  return [result1, result2];
});

let [hoge, foo] = destructure();

console.log(hoge);
// 結果：10

console.log(foo);
// 結果：20

上記のresult2だけを割り当てたい場合は、切り捨てることも可能です。