특정 상황에서 WTF 효과가 있는 JavaScript 코드를 본 적이 없는 사람은 누구입니까? 이 기사 시리즈에서는 JavaScript의 필수 개념을 발견하여 기본으로 돌아갈 것입니다. 오늘은 호이스팅에 대해 알아보겠습니다.

"게이팅", 뭐?!

시작하기 전에 게양이 무엇인지 정의하고 싶습니다.
나는 바퀴를 재발명하고 싶지 않기 때문에 MDN에 의해 주어진 정의를 줄 것입니다.

Conceptually, for example, a strict definition of hoisting suggests that variable and function declarations are physically moved to the top of your code, but this is not in fact what happens. Instead, the variable and function declarations are put into memory during the compile phase, but stay exactly where you typed them in your code.

요컨대, JavaScript로 작성하는 코드가 예상대로 반드시 위아래로 실행되는 것은 아니라는 점을 기억하십시오. 충분한 이야기, 개발하자!

JS의 호이스팅에 대해 자세히 알아보기

기본 예제 w/ var

간단한 예부터 시작하겠습니다.






console.log(안녕하세요);



당연히 "hello is not defined"라는 오류 메시지가 나타납니다. 이제 hello라는 변수를 선언해 보겠습니다.






console.log(안녕하세요);
var hello = '안녕하세요!';



이제 오류 메시지는 없지만 "정의되지 않음"이 포함된 로그가 있습니다... 무슨 일이?! 자바스크립트 인터프리터가 호이스팅을 진행했으므로 이전에 실행한 코드는 다음과 같습니다.

var hello;
console.log(hello); // undefined
hello = 'Hi !';

이 변수의 초기화가 같은 위치에 있는 동안 선언이 hello 의 맨 위로 올라간 것을 볼 수 있습니다.
그렇기 때문에 JavaScript에서 변수를 사용할 때 주의해야 합니다.

BTW, 우리는 for 루프에서 var를 선언할 때 동일한 문제가 있습니다 ;)

let & const는 여전히 존재합니다 <3

다행히 let 또는 const 를 사용할 때 선언은 호이스팅되지 않습니다. 따라서 우리는 이 WTF 효과를 갖지 않을 것입니다!






console.log(안녕하세요);
let hello = '안녕하세요!';




이 예에서는 예상했던 오류 메시지를 볼 수 있습니다. 따라서 let 대신 ES6의 const & var를 사용하십시오!

함수를 사용하자!

이 동작이 함수와 동일함을 알 수 있습니다. 하지만 부작용을 피하기 위한 몇 가지 팁을 알려 드리겠습니다 ;)

간단한 예부터 시작하겠습니다.






안녕하세요();
var 안녕하세요 = function() {
console.log('이봐!');
}
안녕하세요();



놀랍지 않게, 이 예는 우리가 앞서 말한 것을 확인시켜줍니다. 선언은 호이스팅되지만 구현은 아닙니다.

함수를 변수에 저장하지 않고 직접 정의하면 어떻게 될까요?






안녕하세요();
함수 안녕하세요() {
console.log('이봐!');
}
안녕하세요();



와! 콘솔에 "Hey"가 두 번 표시됩니다...hello 함수의 전체 블록이 현재 스코프의 맨 위에 올려진다는 의미입니다.
선언이자 구현이기 때문에 두 번 나타나는 로그가 있습니다(그리고 보기 흉합니다...).

이전 코드의 해석은 다음과 같습니다.

function hello() {
    console.log('Hey!'); // 'Hey!' x2
}
hello();
hello();

다른 예를 계속해 보겠습니다.






var 안녕하세요 = function() {
함수 a() {
반환 3;
}
반환 a();
}
console.log(안녕하세요());




놀랍게도 이 코드는 "3"을 기록하고 있습니다. 이제 이 예제를 더 복잡하게 만듭니다.






var 안녕하세요 = function() {
함수 a() {
반환 3;
}
반환 a();
함수 a() {
반환 4;
}
}
console.log(안녕하세요());



이 예는 로깅 "4"입니다. 사실, 앞에서 말했듯이 이런 식으로 정의된 함수는 직접 호이스팅되므로 이런 종류의 이상한 동작이 있습니다.

이것을 피하는 방법?!
항상 변수에 함수를 선언하는 것이 좋습니다. 그러면 구현이 호이스팅되는 것을 피할 수 있습니다.






var 안녕하세요 = function() {
var a = 함수() {
반환 3;
}
반환 a();
var a = 함수() {
반환 4;
}
}
console.log(안녕하세요());



여기에서 이 코드는 "3"으로 잘 기록되고 이것이 우리가 원했던 것입니다!

따라서 JavaScript에서 변수와 함수를 사용할 때 호이스팅에 주의하시기 바랍니다.

짜잔!

이 기사를 통해 JavaScript의 호이스팅을 더 잘 이해할 수 있기를 바랍니다. 이 시리즈의 다음 에피소드에서는 폐쇄에 대해 이야기하겠습니다.

이 기사를 친구/동료/가족/애완동물에게 자유롭게 공유하세요!
그리고 건의사항이나 지적사항이 있으면 댓글로 알려주세요.

곧 봐요!