IORI online School

JavaScript、html、css の無料学習サイト

【JavaScript 初心者講座】読み取り専用の変数(const)

[JavaScript 初心者講座]読み取り専用の変数(const)

本講座では、読み取り専用の変数を学習する。 とても軽い学習内容なので、動画か音楽かを再生しながら学習してほしい。

定数に値を再代入するとエラーになるプログラム

001<script>
002
003//読み取り専用の変数を宣言して値を代入
004const a = 10 ;
005
006//値を表示[10]
007alert ( a ) ;
008
009//変数aに値を再代入[ERROR]
010a = 100 ;
011
012//値を表示:実行しない!!
013alert ( a ) ;
014
015</script>

プログラムを実行すると、「10」と表示される。 またはブラウザによっては、エラーが発生してプログラムが実行しない。

プログラムを実行すると「10」と表示された後、裏でエラーが発生する。 利用するブラウザによっては、エラーが発生してプログラム自体が動かない可能性がある。

読み取り専用の変数とは 読み取り専用変数とは、一度値を代入したら、 その後別の値を再代入できない変数である。

本講座で学習する「読み取り専用の変数」とは、一度値を代入したら、 再度別の値を代入できない変数である。

読み取り専用の変数を宣言して値を代入 const [変数] = [値] ;

読み取り専用の変数は、const を利用して宣言する。 今まで変数を宣言する際、var を利用してきた。 読み取り専用の変数を利用する場合はconstを利用する。 または、varではなく、基本的にconstで変数を定義する。 では、プログラムを解説する。

003//読み取り専用の変数を宣言して値を代入
004const a = 10 ;
005
006//値を表示[10]
007alert ( a ) ;
008
009//変数aに値を再代入[ERROR]
010a = 100 ;
011
012//値を表示:実行しない!!
013alert ( a ) ;

4行目で、読み取り専用変数aを宣言して「10」を代入する。 7行目で、変数aの値をダイアログに表示する。「10」と表示する。 つぎのプログラムがが問題である。10行目で、変数aに「100」を代入する。 変数aは「読み取り専用」の変数なので、新しい値を代入することはできない。 10行目で エラーが発生する。 10行目でエラーが発生するので、13行目は実行されない。 つまり、このプログラムを実行すると、「10」と表示された後、 裏でエラーが発生して終了する。 何度も述べているが、ブラウザによっては 「constの変数に値を再代入している」という理由で、 このプログラム自体実行できない。

constの注意点(配列の要素に値を再代入)

前回のプログラムで、constが読み取り専用の変数という事と、 読み取り専用の変数の意味をご理解頂けたと思う。 「値を再代入できない」という事である。 こんかい、少し踏み込んだプログラムを見る。

001<script>
002
003//読み取り専用の変数を宣言して配列を代入
004const a = [ 10 , 20 ] ;
005
006//値を表示[10]
007alert ( a [ 0 ] ) ;
008
009//index[0]に値を代入
010a [ 0 ] = 100 ;
011
012//値を表示[100]
013alert ( a [ 0 ] ) ;
014
015</script>

プログラムを実行すると、「10」と「100」が表示する。

プログラムを実行すると、エラーが発生せずに終了する。 プログラムを解説する。 4行目で読み取り専用の変数aを宣言して、配列を代入する。 配列の値は「10」と「20」である。

index
0 10
1 20

読み取り専用変数aには、このような配列が入っている。

003//読み取り専用の変数を宣言して配列を代入
004const a = [ 10 , 20 ] ;
005
006//値を表示[10]
007alert ( a [ 0 ] ) ;
008
009//index[0]に値を代入
010a [ 0 ] = 100 ;
011
012//値を表示[100]
013alert ( a [ 0 ] ) ;

7行目で、インデックス「0」を指定して配列の値を表示する。 インデックス「0」は「10」なので、「10」が表示する。 つぎのプログラムは問題である。 いや、実は問題ない。 10行目で、読み取り専用変数aの中に入っている配列のインデックス「0」に「100」を代入する。

変数aは読み取り専用なので、「値を変更できないのでは?」と疑惑の視線を向けたくなるプログラムである。 しかし、疑うなかれ。このプログラムは正常に動作する。 読み取り専用変数は、変数に値を再代入できない。 これは確かである。しかし、 変数の中に入った値(配列やオブジェクト)の中の値は変更できる。

index
0 100
1 20

変数aに入っている配列の値が変更される。 さてプログラムの最後、13行目で配列のインデックス「0」の値を表示する。 解説は以上である。

「100」が表示して、プログラムが終了する。 読み取り専用変数に再代入はできない。 しかし、すでに入っている値の中の状態(値)は変更可能である。

constの注意点(オブジェクトのプロパティに値を再代入する)

先ほど読み取り専用変数の中に入った配列の値を変更した。 今回はオブジェクトの値を変更する。

001<script>
002
003//読み取り専用の変数を宣言してオブジェクトを代入
004const a = { label : "OK" } ;
005
006//値を表示[OK]
007alert ( a.label ) ;
008
009//labelプロパティに値を代入
010a.label = "NG" ;
011
012//値を表示[NG]
013alert ( a.label ) ;
014
015//これは[ERROR]
016a = { label : "OK" } ;
017
018//実行されないプログラム
019alert ( "実行されない" ) ;
020
021</script>

プログラムを実行すると、「OK」と「NG」が表示する。 利用するブラウザによっては、ファイル自体が実行しない。

プログラムを実行すると、「OK」と「NG」が表示した後、 裏でエラーが発生して、一番最後のプログラム(19行目)は実行しない。 プログラムを解説する。 4行目でオブジェクトを作成して、読み取り専用変数aへ代入する。 オブジェクトには、labelプロパティが定義され、値「OK」が入っている。 7行目で、オブジェクトのlabelプロパティを表示する。「OK」と表示する。 10行目で、オブジェクトのlabelプロパティに文字列「NG」を代入する。 変数aは読み取り専用だが、変数aの中に入っているオブジェクトの状態(プロパティの値)を 変更する事は可能である。 10行目で、オブジェクトのlabelプロパティに「NG」が代入する。 13行目で、オブジェクトのlabelプロパティを表示する。 「NG」とダイアログに表示する。 問題はつぎのプログラムである。

012//値を表示[NG]
013alert ( a.label ) ;
014
015//これは[ERROR]
016a = { label : "OK" } ;
017
018//実行されないプログラム
019alert ( "実行されない" ) ;

16行目で、読み取り専用変数aに新たな値(オブジェクト)を代入している。 読み取り専用変数に値の再代入はできない。 ここでエラーが発生する。 16行目でエラーが発生するので、19行目は実行しない。 解説は以上である。

定数を利用する

constを利用したサンプルプログラムを掲載する。 constは一般的に「定数」と言われる。 その「定数」という言葉に注目したサンプルプログラムである。

001<script>
002//商品配列
003const items = [
004    { name : "A" , price : 150 } ,
005    { name : "B" , price : 350 } ,
006    { name : "C" , price : 200 }
007  ] ;
008//金額上限:500円
009const MAX_PRICE = 500 ;
010
011//購入金額合計
012var sum = 0 ;
013
014//購入商品
015for ( var i = 0 ; i < items.length ; i ++ ) {
016
017  //購入金額を合算
018  sum += items [ i ].price ;
019}
020//500円以下の場合、OK
021if ( sum <= MAX_PRICE ) {
022
023  alert ( "OK" ) ;
024} else {
025  alert ( "NG" ) ;
026}
027</script>

プログラムを実行すると、「NG」と表示する。

プログラムを解説する。3行目で読み取り専用変数itemsを宣言して、 配列を代入する。配列の値は3つで、全てオブジェクトである。

インデックス オブジェクト
0 { name : "A" , price : 150 }
1 { name : "B" , price : 350 }
2 { name : "C" , price : 200 }

変数itemsに入っている配列の状態である。 配列の値はオブジェクトである。オブジェクトは、それぞれnameプロパティとpriceプロパティを持っている。 このオブジェクトは商品を表現している。

002//商品配列
003const items = [
004    { name : "A" , price : 150 } ,
005    { name : "B" , price : 350 } ,
006    { name : "C" , price : 200 }
007  ] ;
008//金額上限:500円
009const MAX_PRICE = 500 ;
010
011//購入金額合計
012var sum = 0 ;
013
014//購入商品
015for ( var i = 0 ; i < items.length ; i ++ ) {
016
017  //購入金額を合算
018  sum += items [ i ].price ;
019}

9行目で、 定数MAX_PRICEを宣言して「500」を代入する。 MAX_PRICEは読み取り専用変数であり、定数として利用している。 これは、「遠足に持って行くお菓子は500円まで」という「500」を意味している。 15行目から19行目までのfor文で、商品の価格を全て加算して変数sumへ代入する。 for文一回目の場合、プログラムは次のようになる。

011//購入金額合計
012var sum = 0 ;
013
014//購入商品
015for ( var i = 0 ; i < items.length ; i ++ ) {
016
017  //購入金額を合算
018  sum += {name:"A",price:150}.price ;
019}

配列の最初の値(オブジェクト)が取り出される。

変数に値を加算 変数 += [値] ;

このプログラムはつぎのプログラムと同じである。

変数に値を加算 変数 = 変数の値 + [値] ;

値をどんどん変数へ加算するプログラムである。

011//購入金額合計
012var sum = 0 ;
013
014//購入商品
015for ( var i = 0 ; i < items.length ; i ++ ) {
016
017  //購入金額を合算
018  sum += {name:"A",price:150}.price ;
019}

このプログラムはつぎのプログラムと同じである。

011//購入金額合計
012var sum = 0 ;
013
014//購入商品
015for ( var i = 0 ; i < items.length ; i ++ ) {
016
017  //購入金額を合算
018  sum = sum + {name:"A",price:150}.price ;
019}

「sum += 値」のプログラムは、

「sum = sum + [値]」のプログラムと同じである。

18行目でオブジェクトの中のpriceプロパティを取り出す。 オブジェクトのpriceプロパティの値は「150」である。

011//購入金額合計
012var sum = 0 ;
013
014//購入商品
015for ( var i = 0 ; i < items.length ; i ++ ) {
016
017  //購入金額を合算
018  sum = sum + 150 ;
019}

18行目で、変数sumの値と一つ目のオブジェクトのpriceプロパティの値「150」が加算されて、 変数sumへ代入される。現在、変数sumの値は「0」だが、 18行目が実行すると、「150」になる。 さて、for文二回目を見る。

011//購入金額合計
012var sum = 150 ;
013
014//購入商品
015for ( var i = 0 ; i < items.length ; i ++ ) {
016
017  //購入金額を合算
018  sum += {name:"B",price:350}.price ;
019}

12行目の変数sumの値に「150」が代入されている。これは、最初のオブジェクトのpriceプロパティの値である。 for文二回目の処理で、18行目が実行する。 配列のインデックス「1」のオブジェクトが取り出される。 priceプロパティの値は「350」である。この「350」が変数sumの値に加算される。

011//購入金額合計
012var sum = 500 ;
013
014//購入商品
015for ( var i = 0 ; i < items.length ; i ++ ) {
016
017  //購入金額を合算
018  sum += {name:"C",price:200}.price ;
019}

12行目の変数sumの値に「500」が代入されている。 これは、配列のインデックス「0」と「1」のオブジェクトの、 priceプロパティが加算した値である。

for文三回目の処理で、18行目が実行する。 まず、配列のインデックス「2」のオブジェクトが取り出される。 priceプロパティの値は「200」である。この「200」が変数sumの値に加算される。 変数sumの値は「700」になる。以上でfor文が終了する。

008//金額上限:500円
009const MAX_PRICE = 500 ;
010
011//購入金額合計
012var sum = 0 ;
013
014//購入商品
015for ( var i = 0 ; i < items.length ; i ++ ) {
016
017  //購入金額を合算
018  sum += items [ i ].price ;
019}
020//500円以下の場合、OK
021if ( sum <= MAX_PRICE ) {
022
023  alert ( "OK" ) ;
024} else {
025  alert ( "NG" ) ;
026}

for文が終了すると、21行目のif文が実行する。 if文の条件式で、変数sumの値と定数MAX_PRICEの値を比較する。 変数sumの値は「700」で、定数MAX_PRICEの値は「500」である。

020//500円以下の場合、OK
021if ( 700 <= 500 ) {
022
023  alert ( "OK" ) ;
024} else {
025  alert ( "NG" ) ;
026}

if文の条件式は「false」になる。 そのため、elseブロックが実行する。 elseブロックが実行して、「NG」と表示する。 購入する物を見直す必要がありそうだ。

読み取り専用変数について

本講座で読み取り専用変数を学習した。constである。 一般的に変数を宣言する場合、 constを利用する。 必ず利用する。なぜなら、const は var よりも「良いプログラム(堅牢なプログラム)」を記述できるからである。 ただし、constを利用できない場面もある。 それは、値を再代入する変数を利用する場合である。 その場合は、let を利用する。

  1. 基本的に、const を利用する。
  2. const が利用できない場合、let (または var )を利用する。

このような手続きでプログラムを記述する。 基本的にvarは利用しない。 しかし本講座で利用するサンプルプログラムでは、 varとconstを利用する(本講座ではletは利用しない)。

まとめ

読み取り専用の変数とは 読み取り専用変数とは、一度値を代入したら、 その後別の値を再代入できない変数である。

読み取り専用の変数を宣言して値を代入 const [変数] = [値] ;

変数に値を加算 変数 += [値] ;