JavaScript(変数構文)

変数の宣言

変数は次のように宣言されます.

var 이름;
let 나이;
const 성별;

このときvarキーワードは再宣言でき、let、constキーワードは再宣言できません.

変数の割当て

変数は次のように割り当てられます.

let 이름 = 'Kim';
이름 = 'Park';  //가능
const 나이 = 30;
나이 = 40; //에러

この場合、var、letで作成した変数は再割り当てでき、constで作成した変数は値を再割り当てできません.(一定値(定数)、contは定数に変更されません.
constで相手を作ったら?
次のように、割り当てられたオブジェクト値の名前の値を変更できます.
これはcont変数自体を再割り当てするのではなく、変数の値を変更するためです.

const 오브젝트 = { 이름 : 'Kim' }
오브젝트.이름 = 'Park'; //가능 

変更できないオブジェクトを作成したい場合は?

const 사람 = { 이름 : 'Kim' }
Object.freeze(사람); 사람이라는 객체는 수정불가능 설정
사람.이름 = 'Park'; //불가능 

変数の範囲

var変数の存在範囲は関数です.関数に宣言されている場合は、その関数でのみ使用できます.すなわち、varによって記述された宣言が関数で実行される場合、その宣言は関数が終了する前に有効である.
(関数以外の{}文または任意の場所にグローバル変数として適用されます.)

function 함수(){
  var 이름 = 'Kim';
  console.log(이름); //가능
}
console.log(이름); //에러

let,cont変数の存在範囲は大部分{}(カッコ)(for,if,functionなど)である.
以下に示すように、ifはドア内で使用できますが、外では使用できません.

if ( 1 == 1 ){
  let 이름 = 'Kim';
  console.log(이름); //가능
}
console.log(이름); //에러

変数のHOLING

JavaScriptが変数または関数を宣言すると、Hosist現象が発生します.
変数または関数の宣言部分を変数範囲の一番上にドラッグして、まず説明します.
次の場合、最初のコンソールウィンドウはundefined(定義されていない値)を出力し、2番目のコンソールウィンドウはkimを出力します.
通常、最初のコンソールの名前は宣言および割り当てされていませんが、var名が付いています.で説明したように、変数は宣言されていると考えられます.

<script>  
  console.log(이름);
  var 이름 = 'Kim';
  console.log(이름);
</script>

複数の変数を簡単に作成

そう宣言できると思って

var 이름 = 'Kim', 나이 = 20, 성별 = '남';

グローバル変数と変数の参照

変数の特徴は、外にいれば中で自由に使えることです.これは専門的な開発用語で、「参照可能」と呼ばれ、javascriptでは「閉パッケージ」現象と呼ばれています.
次のコードは関数を基準に変数を外部に宣言し、関数内部に年齢を出力しようとしても良い値を出力します.
また、グローバル宣言変数の概念はwindowオブジェクトにオブジェクトを宣言するのと同じです.だから、「window.「年齢」は、グローバル変数が同じ脈絡であることを宣言します.もちろん、関数を宣言することもできます.したがって、大規模なプロジェクトで数百の変数を宣言すると、グローバル変数は「window」になります.「変数」とマークすることを忘れないでください.

<script>
  var 나이 = 20; (window.나이 = 20)
  function 함수(){
    console.log(나이)
  }
</script>

と知る

함수();
function 함수() {
  console.log(안녕);
  let 안녕 = 'Hello!';
} 

関数は、関数宣言の前に呼び出されますが、関数(){}は上部にエスケープされるため、関数呼び出しに異常はありません.
また、関数のコードを表示すると、変数宣言がコンソールウィンドウの上に移動し、コンソールウィンドウにundefinedという値を出力すると考えられます.
ただしlet,constについては,出力の誤りはエスケープであってもよいが,未定義ではない.
これは宣言と割り当ての間に時間差があるために生じる現象であり,letとconstが厳密に使用される変数であることを知っている.(詳細を参照)

함수();
var 함수 = function() {
  console.log(안녕);
  var 안녕 = 'Hello!';
} 

1つ目の場合、function関数(){}自体は、関数呼び出しに異常がないように符号化される.ただし、2つ目の場合、var関数=function(){}は宣言部分にのみプラス記号を付けるので、var=関数のみが上に移動します.したがって、関数を呼び出すコードには宣言されていますが、宣言されたのは関数ではないと判断し、カッコを非関数の通常変数に追加し、エラーを出力します.

let a = 1;
var 함수 = function() {
  a = 2;
}
console.log(a);

もちろん出力1です.関数を作成して使用する必要がある場合は、関数を呼び出す必要があります.呼び出された場合はlet変数を再割り当てできるため、2が出力されます.

let a = 1;
var b = 2;
window.a = 3;
window.b = 4;
console.log(a + b);

bの場合、var b=2とwindowです.b=4は同じ機能を有するため,bは4に再割り当てされたと考えられる.
ただし、aの場合はlet変数で1を指定し、グローバル変数で3を指定します.このとき参照範囲がより小さく、より近い1を使用します.したがって、aは1を出力する.

for (var i = 0; i < 5; i++) { 
  setTimeout(function() { console.log(i); }, i*1000 ); 
}

上記のコードは、1秒後にi値が1つずつ繰り返し出力されることを要求します.この場合、settimeoutはタイムアウトして出力されるため、重複文と同時に実行されません.すなわち、1秒後、反復文はiによって0から4まで反復され、iは4というグローバル変数として保持される.このため、4万個の出力を繰り返す.
したがって、for反復文では、i変数を作成するときにlet宣言を使用します.let変数の範囲は括弧であり,for文も括弧に相当する.したがって、i値はfor反復文に保持されるため、0、1、2、3、4は順次出力される.

<div style="display : none">모달창0</div>
<div style="display : none">모달창1</div>
<div style="display : none">모달창2</div>
<button>버튼0</button>
<button>버튼1</button>
<button>버튼2</button>
<script> 
var 버튼들 = document.querySelectorAll('button');
var 모달창들 = document.querySelectorAll('div');
for (var i = 0; i < 3; i++){
  버튼들[i].addEventListener('click', function(){
    모달창들[i].style.display = 'block';
  });
}
</script>

上のコードは、ボタンラベルを1つクリックするたびに対応するモードウィンドウを出力するコードです.呂奇書文書.QuerySelector Allは、jQueryの$("")コレクターとよく似ています.これは、複数の要素を同時に検索し、並べ替えと似たような資料型に入れることを意味します.すなわち,類似要素のボタンラベル,divラベルにはそれらの情報が含まれている.したがって,繰り返し文によりそれぞれインデックスが与えられ出力される.
このとき、「モードウィンドウ」の値はクリックして生成したコードで、動作速度が遅い.従って、iは、前のvarのグローバル変数特性のために3に割り当てられている.
したがって、varではなくletを使用して{}でi値を使用することができます.