ホイスティンについて知りましょう.

リファレンスリンク
- https://gmlwjd9405.github.io/2019/04/22/javascript-hoisting.html

注釈:リンクされたブログ記事を復唱するために書かれた記事.正確で詳細な情報を得るには、上のリンクに入ります.

護衛する
ハウスティンとは何ですか.
:シースは、関数内のすべての宣言を関数有効範囲の上部にドラッグ＆ドロップします.

上図でブログ記事を知りました.
①関数は{}に囲まれており、その関数ブロック内で有効である.
②JavaScript Parserが関数を実行する前に、その関数を参照し、関数内の変数/関数宣言に関する情報を記憶します.
③関連変数/関数の言及時に実行します.

関数では、必要な値

が、下部のコンテンツから抽出される.
狙いを定める

護衛はvar変数宣言および関数宣言でのみ発生します.

var変数/関数の宣言のみを上に移動します.X

に割り当てる

let/cont変数宣言と関数式における反発具体値X

var apple; // 호이스팅 -> 선언
apple = "red"; // 할당
let peach = "pink"; // 호이스팅 X (let 변수)

関数宣言、例示的な関数式

foo();
foo2();
function foo() { } // 함수선언문
var foo2 = function() { } // 함수표현식

号給油

var foo2; // 호이스팅 -> 함수표현식의 변수값 선언
function foo() { } // 호이스팅 -> 함수선언문
foo();
foo2(); // error -> foo2가 상단에서 변수로 선언되어 호이스팅 되었기 때문에 함수가 아니다.
foo2 = function() { }

->宣言変数に割り当てられた関数式はドラッグされないので、変数のスキャン規則に従います.
関数宣言、関数式のエスケープ
関数宣言のエスケープ

関数宣言は、コード実装の場所に関係なく、ブラウザがJavaScriptを解析すると、上部に昇格します.

function printName() {
  var result = inner(); // 선언 및 할당
  console.log(typeof inner); // "function"
  console.log(result); // "inner value"
  
  function inner() {
    return "inner value";
  }
}

printName();

->カーネル関数は割り当てられており、その値をコンソールに出力する部分よりも低いですが、jsの解析器はよくチェックした後にinner()という関数を覚えているので、JavaScriptを解釈する際にエラーは発生しません.

関数宣言上でも下でも、関数内で関数が関数として認識されるため、エラーは発生しません.

関数式のエスケープ

関数式は、関数宣言とは異なり、宣言と呼び出しの順序によって関数が正常に動作しない可能性があります.

関数式は、宣言と割り当てを分離する

1.関数式の宣言が呼び出しよりも高い場合(通常の出力)

function printName() { // 함수선언문
  var inner = function() { // 함수표현식
    return "inner";
  }
  var result = inner(); // 함수 호출
  console.log(result); // "inner"
}

printName();

function printName() { // 함수선언문
  var inner; // 호이스팅 - 함수표현식의 변수값 선언
  var result; // 호이스팅 - 변수 선언
  
  inner = function() { // 함수표현식 할당
    return "inner";
  }
  
  result = inner();
  console.log(result); // "inner"
}

printName();

2.関数式の宣言が呼び出しより低い場合-var(エラー)

function printName() { // 함수선언문
  console.log(inner);  // undefined -> 선언은 되어있지만, 할당이 되지 않은 경우
  var result = inner(); 
  // error -> 함수가 실행되면서 inner가 함수로 인식되지 않아 undefined로 지정되는데, 
  // undefined에 함수를 할당하고 있기 때문에 에러 발생
  console.log(result); 
  var inner = function() { // 함수표현식
    return "inner";
  }
}

printName();

function printName() { // 함수선언문
  var inner; // 호이스팅 - 함수표현식의 변수값 선언
  
  console.log(inner); // undefined
  var result = inner(); // error
  // inner는 이미 선언은 되었지만 할당되지 않은 상태라 undefined 값을 가지고 있기 때문에 함수로 인식 X
  console.log(result); // "inner"
  inner = function() { // 함수표현식 할당
    return "inner";
  }
}

printName();

2.関数式の宣言が呼び出しより低い場合-var(エラー)

function printName() { // 함수선언문
  console.log(inner);  // undefined -> 선언은 되어있지만, 할당이 되지 않은 경우
  var result = inner(); 
  // error -> 함수가 실행되면서 inner가 함수로 인식되지 않아 undefined로 지정되는데, 
  // undefined에 함수를 할당하고 있기 때문에 에러 발생
  console.log(result); 
  var inner = function() { // 함수표현식
    return "inner";
  }
}

printName(); // inner is not a function 에러 발생

function printName() { // 함수선언문
  var inner; // 호이스팅 - 함수표현식의 변수값 선언
  
  console.log(inner); // undefined
  var result = inner(); // error
  // inner는 이미 선언은 되었지만 할당되지 않은 상태라 undefined 값을 가지고 있기 때문에 함수로 인식 X
  console.log(result); // "inner"
  inner = function() { // 함수표현식 할당
    return "inner";
  }
}

printName(); // inner is not a function 에러 발생

号ドリフトにより、内層が関数ではないというエラーが発生します.

3.関数式の宣言が呼び出しの下にある場合-cont/let(エラー)

function printName() { // 함수선언문
  console.log(inner);  // error -> inner 함수가 let으로 선언되었기 때문에 호이스팅 X ->  에러 발생
  var result = inner(); 
  console.log(result); 
  let inner = function() { // 함수표현식
    return "inner";
  }
}선

printName(); // inner is not defined 에러 발생

let/constと宣言された関数はエスケープされないため、コンソールです.log(内部)セクションでは、内部が定義されていないとエラーが発生します.

転送優先度
変数宣言が関数宣言に昇格

var myName; // 호이스팅 - 변수값 선언 
var yourName;

function myName() {} // 호이스팅 - 함수선언문
function yourName() {}

myName = "hi"; // 변수값 할당
yourName = "bye";

console.log(type myName); // string
console.log(type yourName); // string

値が割り当てられていない変数と値が割り当てられている変数で呼び出されます.

var myName = "Hi"; // 값 할당 
var yourName; // 값 할당 X

function myName() {} // 같은 이름의 함수 선언
function yourName() {} // 같은 이름의 함수 선언

console.log(type myName); // string
console.log(type yourName); // function

値

が指定されていない変数の場合、関数宣言は変数を上書きします.

の値が割り当てられた変数の場合、変数は関数宣言を上書きします.

護衛の概要
ハウスティンとは何ですか.

号は、関数のすべての宣言を関数有効範囲の最上位レベル、すなわち

に昇格させます.
転送が発生した場合?

var変数/関数

関数を使用して宣言された

浮き彫り防止の方法
コード上部に

関数と変数

を宣言する

let/const使用