LoginSignup
1

posted at

updated at

【JavaScript】変数と宣言

概要

JavaScriptを学習、理解を深めるため「JavaScript Primer 迷わないための入門書」を読み、
理解した内容等を記載していく。

JavaScript入門一覧に他の記事をまとめています。

この記事で理解できること

  • 変数宣言に使用できるキーワード
  • 各宣言キーワードの特徴
  • 変数名のルール(命名規則)

変数と宣言

JavaScriptには以下3つの変数宣言キーワードが存在する。

  • const(ES2015〜)
  • let(ES2015〜)
  • var

「const」「let」 および「var」について

  • varは古くから変数宣言に用いられていたキーワードで、意図しない動作を生み出しやすいことが懸念されていた。
  • ES2015からconst、letが追加されたことでvarが抱えていた問題を回避できるようになった。
  • 既にvarで書かれたコードの動作を考慮し、var自体の変更・改善はされていない。

ECMAScript
JavaScriptの動作を決めている仕様の名称
2015年にECMAScript 2015(ES2015)という大きなアップデートが行われた仕様が公開された
ECMAScriptは毎年更新され、構文や機能が追加されている

各宣言キーワードと特徴について

各キーワードの宣言方法および、特徴を記載していく。

const

  • 初期値は必須。
  • constで宣言された変数には再代入できない。
  • 同じ変数名を複数定義しようとすると構文エラーとなる。
  • 変数に対して値を再代入する必要がない場合は、constが推奨されている。
// 定義方法
const 変数名 = 初期値;
// 例:titleという変数を宣言し、初期値を設定
const title = "JavaScript入門"

let

  • 初期値なしの変数宣言が可能(値が未定義ということを表すundefinedという値で初期化される)
  • 同じ変数名を複数定義しようとすると構文エラーとなる。
  • 変数が参照する値を変化させたい場合など、変数への再代入が必要な場合はletを利用する(例:ループなどの反復処理)
// 定義方法(初期値なし、あり)
let 変数名;
let 変数名 = 初期値;
// 例:初期値なし
let title;

// 例:titleという変数を宣言し、初期値を設定
let title = "JavaScript入門";

// 「JavaScript入門」から「JavaScript初級」へ値を再代入
title = "JavaScript初級";

var

  • 初期値なしの変数宣言が可能。(値が未定義ということを表すundefinedという値で初期化される)
  • 変数への値の再代入が可能。
  • 同じ変数名を再定義してもエラーにならない。
// 定義方法(初期値なし、あり)
var 変数名;
var 変数名 = 初期値;
// 例:初期値なし
var title;

// 例:titleという変数を宣言し、初期値を設定
var title = "JavaScript入門";

// 「JavaScript入門」から「JavaScript初級」へ値を再代入
var title = "JavaScript初級";
// 例:同じ変数名で再定義
var title = "JavaScript入門";
var title = "JavaScript初級"; // 変数titleの値は「JavaScript初級」へと上書きされる

// ちなみに値を設定せず再定義した場合は「undefined」にはならず「JavaScript入門」のまま
var title = "JavaScript入門";
var title;                    // →この時点では「JavaScript入門」のまま
var title = "JavaScript初級"; // 変数titleの値は「JavaScript初級」へと上書きされる

変数名に使える名前のルール

  • 変数や関数の宣言時に付ける名前にはルールが存在する(命名規則という表現する場合もある)
  • 以下のようなルール(命名規則)が存在する。

OKなこと

  • 名前には半角アルファベット_(アンダースコア)、$(ダラー)、数字が使用できる。
  • 上記を組み合わせて使用する。

※大文字小文字は区別される

const $;           // OK
const _result;     // OK
const javascript;  // OK *この二つは別の変数として区別される
const JAVASCRIPT;  // OK *この二つは別の変数として区別される
const js_2021:     // OK

NGなこと

  • 数字から始まる名前にすること。
  • 予約語と同じ名前にすること(JavaScriptで用意している機能名に使用されているもの)

※ ひらがなや一部の漢字など変数名に使用できるが、全角文字が混在すると扱いにくい場合があるため非推奨

const 2021_js;      // 数字からは始まる名前はNG
const let;          // 予約語(JavaScriptが用意している機能の名前)と同じはNG
const Qiitaで学習;  // OK(だが全角が混在すると扱いにくい場合があるため非推奨)

【Tips】 constは定数(不変)ではない

  • constキーワードの宣言された変数への値の再代入はできないが不変ではない。
// 例:オブジェクトが持つ値(プロパティや、プロパティの値)の変更は可能
const taro = {name: "Taro", age: 24};
console.log(taro); // => {name: 'Taro', age: 24}

// オブジェクトtaroのnameプロパティの値を変更
taro.name = "taro";
console.log(taro); // => {name: 'taro', age: 24}

// プロパティを追加
taro.u = "プロパティuを追加しました";
console.log(taro); // => {name: 'taro', age: 24, u: 'プロパティuを追加しました'}

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
1