JavaScript에서 내 전역 변수가 정의되지 않은 이유는 무엇입니까?

JavaScript에서 전역 변수에 정의되지 않은 값이 있어서 놀랐나요?

JavaScript에서 전역 변수가 예기치 않게 정의되지 않은 값을 반환하는 상황을 경험해 보셨나요? 다음과 같은 난처한 예를 생각해 보십시오.

var value = 10;

function test() {
    //A
    console.log(value);
    var value = 20;

    //B
    console.log(value);
}

test();

이 코드의 출력은 많은 사람들을 놀라게 합니다.

undefined
20

전역 변수가 정의되지 않은 이유

이 퍼즐의 근본 원인은 변수 호이스팅이라는 JavaScript의 기본 개념에 있습니다. JavaScript 엔진은 코드를 해석하고, 처음에 전체 코드 블록을 스캔하고 모든 변수 선언을 맨 위로 "호이스트"합니다. 단, 선언만 호이스팅되고 할당은 호이스트되지 않습니다.

위의 예에서는 함수 테스트를 실행할 때 전역 변수 값에 어떠한 지점에서도 접근하지 않습니다. 대신 새로운 지역 변수 값이 선언되고 할당됩니다. 이 지역 변수는 전역 변수를 섀도잉하여 A 지점에서 console.log(value) 호출에 대해 정의되지 않은 값을 생성합니다.

설명

이를 더 자세히 설명하려면, 마치 호이스팅이 발생한 것처럼 코드를 다시 작성해 보겠습니다.

// Variable declarations hoisted to the top of the function
var value = undefined;
var value = 20;

function test() {
    //A
    console.log(value);

    //B
    console.log(value);
}

이제 첫 번째 이유가 분명해졌습니다. console.log 호출이 정의되지 않음을 반환합니다. 지역 변수 값이 아직 할당되지 않았습니다.

다른 예

호이스팅 개념을 강조하려면 다음 코드를 고려하세요.

var test = 'start';

function end() {
    test = 'end';
    var test = 'local';
}

end();
alert(test);

이 코드는 'end' 또는 'local'이 아닌 'start' 값을 경고합니다. 이는 test 변수가 end 함수의 맨 위로 호이스팅되어 전역 변수를 섀도잉했기 때문입니다.

함수도 호이스팅됩니다

호이스팅은 변수에만 적용되는 것이 아니라 기능에도. 다음 코드는 이를 보여줍니다.

test("Won't work!");

test = function(text) { alert(text); }

test("Won't work!")가 호출될 때 테스트 변수가 선언되었지만 함수가 할당되지 않았기 때문에 이 코드는 참조 오류를 발생시킵니다. 적절한 함수 선언 구문만이 완전한 호이스팅을 보장합니다.

위 내용은 JavaScript에서 내 전역 변수가 정의되지 않은 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!