さくっと学ぶ!! 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についてみていきたいと思います!