最近になって、Docker、Reactなどのフロントエンド技術を勉強し始めたのだが、Reactを扱うにあたって必須となるES6記法があやふやだったので、Progateで学び直した。

実務でJSを書く時は全てES5以前の記法で書いており、変数は全て「var」で宣言していたのだが、流石に時代遅れ感が否めないので、この機にES6へ書き直してみることにした。

今回はまず、ES6の変数(定数)宣言で新たに追加された「let・const」と「var」の違いについてまとめる。

ES5以前の変数定義:var

ES5以前では変数を宣言する場合、varを使う。

varは後からvarを使って同名の変数を同じスコープ内で再定義しても問題なく動作する。

var hoge = "abc";

// 再定義してもエラーにならない
var hoge = "def";

ES6の変数定義:let

ES6で変数を宣言する場合、letを使う。

letは変数の再定義が禁じられているため、誤って変数を上書きしてしまうことを予防することができる。

let hoge = "abc";

// 変数なので中身の書き換えはOK
hoge = "def";

// 再定義はエラーになる
let hoge = "def";

ES6の定数定義:const

ES6ではconstを使って定数を定義できるようになった。

const hoge = "abc";

// 定数なので書き換えはエラーになる。当然再定義も不可
hoge = "def";

ES6のletとconstにより、より他のプログラミング言語に近い感覚でコードを書けるようになった。

とりあえず現在のプロジェクトで書かれている古いコードを書き直し、実践で慣れるところから始めようと思う。