変数の宣言
let を使うと初期値がない変数や値の再代入が可能な変数を宣言できます。
let str = "a";
console.log(str); // 結果 a
// --------------------------------------
let name;
name = "太郎";
console.log(name);一度、宣言された変数と同じ変数名を定義することはできません。
let str = "a";
let str = "b";
console.log(str);
// 結果
SyntaxError: Identifier 'str' has already been declared変数をまとめて設定するには、カンマで区切り１行で定義することができます。
// 変数をまとめて宣言
let name, age;
// ------------------------------------
// 以下のようにまとめて値も設定することができます。
let name = "太郎", age = 28
console.log(name);
console.log(age);定数の宣言
const を使うと定数を宣言できます。一度、宣言された定数に値の再代入することはできません。
const str = "a";
str = "b";
console.log(str);
// 結果
TypeError: Assignment to constant variable.変数の命名規則
変数名のことを識別子と言う場合もあります。変数の命名規則を無視するとエラーが発生します。
変数の命名規則には次のような物があります。
- 予約語は使用しない
- 1文字目は、アルファベットかアンダースコアかドル記号のいずれかで始める
- 2文字目以降は、アルファベットかアンダースコアかドル記号か数字のいずれかが使用できる
- 大文字と小文字は区別される
var
var は、値の再代入が可能な変数を宣言できます。 var の使い方は let とほとんど同じです
var には同じ名前の変数を再定義できてしまう為、間違えて変数を二重に定義してしまうミスが生じることがあります。また、変数の巻き上げという意図しない挙動があります。
var を利用するのを避け let や const 利用したほうがよいでしょう。
変数名をつける時の留意点
- 名前からデータを類推しやすい
- 長すぎず、短すぎず、だいたい 8 ～ 20 文字
- 紛らわしくない
- 1 文字目のアンダースコアは、特別な意味を持つ場合があるので利用しない
- 決められた記法で統一する
- 基本的には英単語にする
| 記法 | 概要 | 例 |
|---|---|---|
| camelCase 記法 | 先頭単語の頭文字は小文字、それ以降の単語の頭文字は大文字 | firstName |
| Pascal 記法 | すべての単語の頭文字は大文字 | FirstName |
| アンダースコア記法 | すべての単語は小文字、単語同士は「 アンダースコア 」でつなぐ | first_name |
ブロックスコープ
ブロックの中で宣言された let 変数は宣言されたブロック内でのみ有効になります。
次の場合は、ブロックの外で変数 num を呼び出しているため、エラーになります。
if(true){ let num = 10;}
console.log(num);
// 結果
ReferenceError: num is not defined次の場合は、同じ変数が宣言されていますが、ブロックの中の num はその中でのみ有効なので、エラーになりません。
let num = 5;
if(true){
let num = 10;
}
console.log(num); # 5分割代入
オブジェクトの分割代入
const user = {
username: 'taro',
age: 25
}
const { username, age } = user;
console.log(username);
console.log(age);オブジェクトの分割代入では、以下のような構文が使われることがあります。
オブジェクトのプロパティを指定した変数名に代入する際に使われます。特定のプロパティを指定して、任意の変数名を作って代入することができます。
const { オブジェクトのプロパティ名: 変数名 } = オブジェクト;以下は、obj.class というプロパティを classAttr という変数に代入しています。
const obj = { class: 'form-control' };
const { class: classAttr } = obj;
console.log(classAttr); // 'form-control'オブジェクトの一部のプロパティの値を変数に代入して、レスト構文（Rest syntax）を使って新たなオブジェクトを作成するような場合に利用できます。
const user = {
username: 'Taro',
age: 23,
tell: '012-3456-7890'
}
const { age: user_age, ...restAttributes } = user;
console.log(user_age); // 23
console.log(restAttributes) // { username: 'Taro', tell: '012-3456-7890' }上記の場合 user オブジェクトをループで処理して、age のみ表示したくない場合など、if を書かなくても、restAttributes に代入された新なオブジェクトをループで処理すれば、age を含めないようにすることができます。
配列の分割代入
let [a, b] = [1, 2];
console.log(a);
console.log(b);複数の戻り値を返す関数などでも利用します。
function hello(){
const a = "hello";
const b = "javascript";
return [a, b];
}
let [a, b] = hello();
console.log(a);
console.log(b);デフォルト値を指定する
const user = {
username: 'taro'
}
const { username, age = 30 } = user;
console.log(username);
console.log(age);