イイダリョウのブログ。varとletとconst(再代入、再宣言の挙動の違い)JSES2015から新しく加わった変数letとconst。なんとなく新しいから使おう、良いものらしいから使おう、というのもアレなので、挙動の違いを体験してみる。なにか?具体例を見てみましょう。varは再代入も再宣言もできるまずはなんでもありのvarから。慣れ親しんだ変数です。年号は何?ボタンを押してみてください。CodePen.「昭和!」「平成!」「令和!」というアラートが立ち上がります。新年号なので年号を値に入れてみました。コードを見ていきます。変数btnにクリックイベントを設定クリックイベントの中に処理を書いていきます。alert(nengo);varで変数nengoを宣言し、値に「昭和!」を代入。アラートでnengoを表示(昭和!)変数nengoに値「平成!」を再代入。アラートでnengoを表示(平成!)varで変数nengoを再宣言し、値に「令和!」を代入。アラートでnengoを表示(令和!)一つ目は変数の宣言と代入を同時に行っています。普段よく書く書き方だと思います。二つ目は変数の前にvarがありません。これは変数の再代入です。三つ目は再びvarがつきます。これは変数の再宣言です。同じ名前の変数を宣言し、違う値を入れているのでこちらも値が上書きされます。letは再代入はできるが再宣言はできない次はlet。ボタンを押してみてください。CodePen.「昭和!」「平成!」「平成!」おや?令和が出ませんね...。alert(nengo);letで変数nengoを宣言し、値に「昭和!」を代入。アラートでnengoを表示(昭和!)変数nengoに値「平成!」を再代入。アラートでnengoを表示(平成!)letで変数nengoを再宣言し、値に「令和!」を代入。(エラーになるのでコメントアウトした)アラートでnengoを表示(平成!)先ほどと同じ形ですが変数がvarではなくletです。この状態だとエラーになって処理(アラート)が実行されません。原因は「再宣言」にあります。letは同じ名前の変数を再宣言することができません。この再宣言をコメントアウトするとアラートが立ち上がります。3個目のアラートは「再代入」の値を表示しているので「平成!」になるわけです。constは再代入も再宣言もできない最後はconst。ボタンを押してください。CodePen.「昭和!」「昭和!」「昭和!」連呼していますね。昭和への思いが強そうです。alert(nengo);constで変数nengoを宣言し、値に「昭和!」を代入。アラートでnengoを表示(昭和!)変数nengoに値「平成!」を再代入。(エラーになるのでコメントアウトした)アラートでnengoを表示(昭和!)constで変数nengoを再宣言し、値に「令和!」を代入。(エラーになるのでコメントアウトした)アラートでnengoを表示(昭和!)constも元の形のままだとエラーで処理(アラート)が実行されません。constは「再代入」も「再宣言」もできないため、どちらもコメントアウトにするとアラートが動きます。エラーになるのでしょう。エラーにするメリットは?変数の値を変えることは普通はあまりありません。円周率は(今は)3.14だし、消費税率は(今は)1.08です。消費税を定義してくて変数zeiを宣言し1.08を代入します。//1,080円もし違う場所で全く同じ変数名で500と宣言されたらどうなるでしょう。//500,000円!!こんな請求書されたら目ん玉飛びでちゃう!!同名の別の変数zeiの再宣言によって最初のzeiの値が上書きしてしまったわけです。した事故を防ぐ目的でletやconstが生まれました。(他のプログラミング言語ではもともとあった概念)letとconstの使い分け「再言言」ができないlet、「再代入」も「再宣言」もできないconst。この二つはどう使い分ければいいでしょう。基本的にはconstでいいと思います。for文の条件の中の変数iは再代入したいのでletにします。これは従来の変数varを使ったfor文です。CodePen.ボタンを押すと「昭和!」を5回連呼します。CodePen.変数iの数値が再代入されるので挙動は変わりません。CodePen.変数iの数字が再代入されないため、アラートが1回しか実行されません。まとめコードが増えてくると変数の重複に気付きにくくなります。varのときは問答無用に値が上書きされていました。エラーで処理が実行されず、ブラウザのデベロッパーツールを見るとエラーの場所がわかる。これで不測の事態が起こりにくくなります。挙動の違いが体験できたので、私もこれからは変数にconstやletを使っていきたく思います。WordPress等で...2018-07-05CSS変数でドット絵マリオをルイージにしたった!「CSSドット絵マリオ」の続きです。はてなブログProフロントエンドエンジニア。神奈川に住まう四十路のオジキ。DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。(24)リンクTwitterInstagramYoutubeCodePenGitHubPinterestQuolaFacebooknoteQiitaはてなブログをはじめよう!idr_zzさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。