読者です 読者をやめる 読者になる 読者になる

marc tech

株式会社MAISON MARCが運営するブログです。Tech Blogとは名ばかりの、採用・福利厚生の情報や、日々の活動記録(?)からエンジニアのくだらない小話までMAISON MARCに関する情報をお伝えするブログとなっています!興味のある方は是非ご覧になってください。

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

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


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

 

 

概要

 

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

f:id:marctech:20170508221523p:plain

 

 

解説


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