[javascript] var, let, const

今回のリリースでは、JavaScriptの変数と定数について説明します.

💡 へんすう

let

変数(variable)は、データを格納するための「名前付きリポジトリ」です.JavaScriptはletキーを使用して変数を作成(宣言)します.
次の文は、季節という変数を生成し、springという値を指定します.

let season;
season = 'spring'; // 문자열 저장
alert(season); // spring

変数宣言と値割当てを1行で作成することもできます.

let season = 'spring';

// 한 줄에 여러 변수도 가능
let season = 'spring', month = 4, message = 'The flowers are pretty'; 

letキーを使用すると、必要に応じてどのくらいの値を変更できますか.あるいは、2つの変数を宣言し、1つの変数のデータを別の変数にコピーすることもできます.

// 값 변경
let season;
season = 'spring';
season = 'summer';
alert(season); // summer

// 값 복사
let message;
message = season;

alert(season); // summer
alert(message); // summer

🚫 2つの変数を宣言中にエラーが発生しました

let season = 'spring';
let season = 'summer';

このように同じ変数を複数回宣言すると、エラーが発生します.したがって、変数は一度だけ宣言され、letではなく変数名が使用されます.

var

作成されたスクリプトでは、letではなくvarというキーワードが見つかることがあります.

var season;

その時にvarをletに変えるには、varについてよく知っているはずです.
1)varにブロックスキャンはありません.
varとして宣言された変数のスケールは、関数スケールまたはグローバルスケールです.ブロック基準でスキャンが発生しないので、ブロック外から近づくことができます.

if (ture) {
  var test = ture;
}

for (var i = 0; i < 10; i++) {
  //
}

alert(test);
alert(i);

上記の文では、if文とfor文が終了してもvarはコードブロックを無視するため、testとiはグローバル変数となり、アクセスできます.

function hello() {
  if (true) {
    var phrase = "hi";
  }
  alert(phrase); // hi
}

hello();
alert(phrase); // Error 발생

ただし、コードブロックが関数にある場合、varは関数レベルの変数になります.
2)var宣言は、関数の開始時に処理されます.
var宣言は、関数の開始時に処理されます.グローバル宣言変数の場合は、スクリプトの起動時に処理します!!
関数本文内でvarとして宣言された変数は、宣言位置に関係なく、関数本文の先頭で定義されます.(ネストされた関数に変数が定義されていない限り、このルールは有効になります)

// 1번
function hello() {
  phrase = "hi";

  alert(phrase);

  var phrase;
}
hello();


// 2번
function hello() {
  var phrase;

  phrase = "hi";

  alert(phrase);
}
hello();

上の2つの文は同じように動作します.2番の「varフレーズ」が1行目でも、1番の宣言が上がる.
このような変数の昇格現象を「昇格」と呼ぶ.varとして宣言されたすべての変数は、「昇格」関数の上部にあるためです.
But宣言は反発しますが、割り当ては反発しません.

function hello() {
  alert(phrase);

  var phrase = "hi";
}
hello();

上の声明では

変数宣言(var)

変数に値を割り当てます(=)
二つのことが起こります.変数宣言は、関数の実行開始時に処理されますが、割り当ては割り当てられません.したがって、割り当て関連コードで処理されます.つまり、次のコードのように動作します.

function hello() {
  var phrase
  
  alert(phrase); // undefined

  phrase = "hi";
}
hello();

変数命名規則

変数名には、アルファベットと数字、および記号$としか含まれません.

最初の文字は数字ではありません.

文字/小文字を区別します.

予約語リストの単語は変数名として使用できません.ex) let, class, return, function

複数の単語を組み合わせて変数を作成する場合、アルパカマーク法がよく使用されます.キャメルマーク法は、単語を順番に並べ、最初の単語を除く各単語の最初のアルファベットを大文字にする.ex) myVeryLongName

💡 ていすう

const

変化しない変数を宣言する場合はletの代わりにconstを使用します.
このようにconstで宣言される変数を定数と呼ぶ.定数を再割り当てできないため、定数を変更しようとするとエラーが発生します.

const myBirthday = '99.07.28';

変数値が絶対に変更されないと判断した場合は、constを使用して変数が定数であることを他の人に通知します.

大文字定数

覚えにくい値を変数に割り当てて別名として使用するのは広く使われている習慣です.この定数は大文字と下線からなる名前で命名されます.
ex) const COLOR_RED = "#F00";
大文字定数の使用の利点

COLOR ORANGEは「#FF 7 F 00」よりも覚えやすく、エラーの確率が小さい.

COLOR ORANGEは「#FF 7 F 00」よりも意味があり、コードの毒性を増加させる.

大文字はいつ使いますか.
定数は、変数の値が絶対的に変わらないことを示します.
1)オレンジ色の16進数コードがFF 7 F 00のように、1つの定数は、実行前からその値を知っていた.
2)実行時に計算されるが、最初に割り当てられた値が変わらない定数ex)constpageLoadTime=/ページのロードに要する時間/;
=>2ページがロードされるまで不明なため、通常は変数名が使用されます.
したがって、大文字定数は「ハードコーディング」値の別名を作成するために使用されます!!

変数名の説明

userNameやshoppingCartのように人が読める名前を使います.

はできるだけ叙述性と簡潔な命名である.data,value no!

略語やa、b、cなどの短い名前は避けてください.

💡 サマリ

var:関数スキャン、再宣言、再割り当て
let:ブロックスキャン、再宣言不可、再割り当て可能
const:ブロックスキャン、再宣言および再割り当て不可
参考資料

https://ko.javascript.info/variables

https://ko.javascript.info/var