2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

JavaScriptのconstに関して

Last updated at Posted at 2022-03-18

初めに

現在、JavaScriptでvarを使用している箇所をconst、letに置き換えているが、具体的にどのような場面で使用できるかが気になった。

constに関して参考文献から拝借した内容。

定数は、let キーワードを使って定義する変数と同様にブロックスコープを持ちます。定数の値は、再代入による変更ができず、再宣言もできません。

再代入、再定義は不可能であることが分かるが、配列へのプッシュやブロックがある場合の挙動が知りたかったのでアウトプットのため投稿する。

実行環境

■ Node.js
v11.1.0

配列でconstを使用

新しい要素のプッシュは成功する。

const a = [];
a.push("a");
console.log(a);

// 出力結果
[ 'a' ]

新しい配列を代入するとエラーになる。

const a = [];
a = [];
console.log(a);

// 出力結果
TypeError: Assignment to constant variable.

オブジェクトでconstを使用

オブジェクトのプロパティの追加は正常に動作する。

const a = {b: "b"};
a.c = "c";
console.log(a);

// 出力結果
{ b: 'b', c: 'c' }

新しいオブジェクトを代入するとエラーになる。

const a = {b: "b"};
a = {c: "c"};
console.log(a);

// 出力結果
TypeError: Assignment to constant variable.

for文でconstを使用

for...of文の場合、iは定数でも可能である。

const arr = ["a","b","c"];
for(const i of arr) {
 console.log(i);
}

// 出力結果
a
b
c

for...in文の場合も正常に動作する。

const obj = {"a": 1,"b": 2,"c": 3};
for(const i in obj) {
 console.log(i);
}

// 出力結果
a
b
c

以下のfor文は、初期化式で使用している定数iを加算式にてインクリメント演算子を使用しているため、ループが実行される前にエラーになる。

for(const i = 0; 0 < 5; i++){
  console.log(i);
}

// 出力結果
TypeError: Assignment to constant variable.

ブロックがある場合のconst

下記だと、ブロック内外どちらも参照できる

const a = "a";
{
  console.log(a);
}
console.log(a);

// 出力結果
a
a

下記は、ブロック内外で同じ名前の定数を代入している。
そのため、最下部で参照する定数aの値はブロック外で定義した「"a"」という文字列になり、ブロック内で参照する定数aの値はブロック内で定義した「"block"」という文字列になる。
また、ブロック内で定義した定数のスコープはブロック内のみである。

const a = "a";
{
  const a = "block";
  console.log(a);
}
console.log(a);

// 出力結果
block
a

上記を踏まえると、下記は、定数aをスコープ外で参照しているためエラーになる。

{
  const a = "block";
  console.log(a);
}
console.log(a);

// 出力結果
ReferenceError: a is not defined

関数を使用した場合のconst

以下だと、各関数のブロック内にスコープを持った定数が作成されるため、エラーにならずに正常に動作する。

const aFunc = ()=> {
    const c = "aFuncの処理";
    bfunc();
    console.log(c);
}

const bfunc = ()=> {
    const c = "bfuncの処理";
    console.log(c);
}
aFunc();

// 出力 
bfuncの処理
aFuncの処理

以下を確認すると、1回目の呼び出しと2回目の呼び出しで定数を代入可能であることが分かる。

const aFunc = (num)=> {
    const c = num;
    console.log(c);
}

aFunc("1回目");
aFunc("2回目");

//出力
1回目
2回目

参考文献

MDN

2
0
0

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
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?