ES2015以降でよく使われるものを学ぶ1

学んだこと

従来 ES2015 以前の変数宣言

// 従来の変数宣言
var value = 'var変数';
console.log(value);

// var変数は上書き可能
value = 'var変数上書き';
console.log(value);

• 同じ変数名で再宣言も行うことができる。
  • バグの原因になる可能性がある。

// 従来の変数宣言
var value = 'var変数';
console.log(value);

// var変数は上書き可能
value = 'var変数上書き';
console.log(value);

// var変数は再宣言可能
var value = 'var変数を再宣言';
console.log(value);

ES2015 以降の変数宣言

let

• 上書き可能な変数

let value = 'let変数';
console.log(value);

value = 'let変数を上書き';
console.log(value);

• 再宣言できない。

let value = 'let変数';
console.log(value);

value = 'let変数を上書き';
console.log(value);

let value = 'let変数再宣言';

• 再宣言できないため、バグの防止につながる。

const

• 定数のため、上書きができない。
• 再宣言も不可能。

const value = 'const変数';
console.log(value);

value = 'const変数上書き';

• オブジェクトはプロパティの変更ができる。
  • オブジェクトを使う場合は、const をつかう。

const value = {
  name: 'user',
  age: 20,
};

value.name = 'user1';
value.address = 'tokyo';
console.log(value)

• 配列の要素の中身を書き換えたり、追加することができる。

const value = ['dog', 'cat'];
value[0] = 'bird';
value.push('monkey');
console.log(value);

実務ではどう分けて使うべきか

• 基本的には配列やオブジェクトは const を使用
• 動的に値が変わるものは state(React で使われる型)を使用する。