ハウスティンとは何ですか。

ブラウザでJavaScriptを解析する場合、これは変数と関数のメモリ領域を宣言する前に予め割り当てられていることを意味します.
変数の宣言と初期化を分離した後、宣言のみを最上位に移動します.

例による理解

関数宣言

catName("클로이"); //함수호출

function catName(name) { //함수선언
  console.log("제 고양이의 이름은 " + name + "입니다");
}

/*
결과: "제 고양이의 이름은 클로이입니다"
*/
|
|
|
V
//호이스팅발생
function catName(name) { //함수선언
  console.log("제 고양이의 이름은 " + name + "입니다");
}


catName("클로이"); //함수호출

上記の場合、関数を呼び出すときにエラーが発生するはずですが、JavaScriptは、関数宣言文をエスケープ(hilling)することによって上に移動し、関数呼び出し文を実行します.

関数式

catName("클로이"); //함수호출 ReferenceError


var catName = function(name) {//함수 표현식
  console.log("제 고양이의 이름은 " + name + "입니다");
}
// const catName = (name) => { //화살표 함수
// 	console.log("제 고양이의 이름은 " + name + "입니다");
// }


|
|
|
V
//호이스팅
var catName;
catName("클로이"); //함수호출 ReferenceError

catName = function(name) {//함수 표현식
  console.log("제 고양이의 이름은 " + name + "입니다");
}

関数式catNameには番号宣言が付けられていますが、ブラウザはまず変数として認識しerrorを発行します.
宣言しかないから.

知るところ

関数宣言式はハイライトOです
関数式はHosting X

関数式を使用する理由

号給油の影響を受けません.

エンクロージャ

コールバック使用

変数の宣言

console.log(num); // 호이스팅한 var 선언으로 인해 undefined 출력
var num; // 선언
num = 6; // 초기화
|
|
|
V
//호이스팅 발생
var num; // 선언
console.log(num); // 호이스팅한 var 선언으로 인해 undefined 출력
num = 6; // 초기화

宣言子がないため、次のコードにエラーが発生します.

console.log(num); // ReferenceError
num = 6; // 초기화

護衛注意事項

コードの可読性とメンテナンス性を向上させるために、クロストークを回避します.
関数式として宣言

号塗装が発生すると故障し、メンテナンス時に原因を見つけるのが難しい.

varではなくlet/constを使用

var、let、constエスケープの違い

宣言前にvarにアクセスすると、未定義として表示されます.
var、let、constにも転義が現れます.
ただし、letとconstは初期化前に読み取りや使用できません.

console.log(bar); // undefined
console.log(foo); // ReferenceError
console.log(con); // ReferenceError
var bar = 1;
let foo = 2;
const con = 3;

var

varは、トップレベルのエスケープで宣言されるエスケープ発生です.

letとconstの違い

信号が発生したように見えますが、constは宣言時に初期化する必要があります.

let ne;
const nj; // 초기화 error 발생

constは変更されませんので、宣言時にも初期化する必要があります.

スコットランド

簡単に言えば変数に近い範囲です.
デフォルトでは、Javaスクリプトは関数スキャンの言語に従います.
ブロックスキャンと関数スキャンに分けることができます.

かんすうそういん

関数を生成するたびに新しいスキャンが発生します.

ブロックミラー

ソース:https://developer.mozilla.org/ko/docs/Glossary/Hoisting
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/let#%EC%8B%9C%EA%B0%84%EC%83%81_%EC%82%AC%EA%B0%81%EC%A7%80%EB%8C%80
https://gmlwjd9405.github.io/2019/04/22/javascript-hoisting.html
https://joshua1988.github.io/web-development/javascript/function-expressions-vs-declarations/
https://www.sitepoint.com/demystifying-javascript-closures-callbacks-iifes/
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/let#temporal_dead_zone_and_errors_with_let
https://velog.io/@fromzoo/%ED%95%A8%EC%88%98%EC%8A%A4%EC%BD%94%ED%94%84-vs-%EB%B8%94%EB%A1%9D%EC%8A%A4%EC%BD%94%ED%94%84