さくっと学ぶ!! ES2015(ES6)入門

こんにちはメゾンマークでフロントエンドを担当している、けいたろうです。
今までもES2015(ES6)を使って開発していましたが、自分の勉強も兼ねて、
これから何回かにわたりES6で追加された機能を解説していきたいと思います。

初回はlet, constを解説します！

概要

今までは変数宣言をvarのみで行なっていましたが、
新しくconst, letが使えるようになりました。
特徴は以下です。

解説

ES5の変数宣言はvarで行なっていました。

var foo = 'fooだよ!!';
console.log(foo); // 'fooだよ!!'
こんな感じですね。

ただ、varの変数宣言だと関数でしかスコープされないため、予期せぬ上書きをしてしまうことがあります。

var foo = 'fooだよ!';
if(foo) {
var foo = 'fooやん!';
var bar = 'barだよ!';
}
console.log(foo) // 'fooやん!';
console.log(bar) // 'barだよ!';

そこで、const,letを使って変数を定義しスコープを小さくし上書きのリスクを減らします。

const foo = 'fooだよ!';
let bar = 'barだよ!';
if(foo) {
const foo = 'fooやん!'; // 再代入エラー
bar = 'barやん!';
const baz = 'bazだよ!';
}

console.log(bar); // 'barやん!'
console.log(baz); // 未定義エラー

Let's Challenge!!
・Let’s Challenge!!とは
気になったことや、実際にありそうなことを色々試してみるコーナーです!（次回からなくなる可能性もあります。）

検証①）constでオブジェクト、配列を定義をした場合、valueを変更できるのか？？

// オブジェクトを定義
const foo = {
name: 'fooname',
number: '1',
};
foo.name = 'fooname2';
console.log(foo); // {name: "fooname2", number: "1"}

// 配列を定義
const bar = ['hoge', 'fuga', 'piyo'];
bar[1] = 'yeah!!';
console.log(foo); // ["hoge", "yeah!!", "piyo"]

constを使ってもオブジェクト、配列の中身を変更することが可能なようです。

まとめ & 所感
・const,letを使えばvarは必要なくなった！
・基本はconst, 値の変更の場合があるのみletを使うという感じで使い分けると良さそう！
・ニホンゴムズカシイ

次回はArrow Functionについてみていきたいと思います！