JavaScript의 범위 및 호이스팅 - 포괄적으로 설명

JavaScript의 범위

JavaScript의 범위는 특정 변수나 함수를 사용하거나 볼 수 있는 코드의 영역을 의미합니다. 특정 값이나 작업에 액세스할 수 있는 위치를 정의합니다. JavaScript에는 주로 두 가지 유형의 범위가 있습니다.

1. 글로벌 범위

2. 로컬 스코프(함수 및 블록 스코프)

글로벌 범위

변수가 함수나 블록 외부에서 선언되면 전역 범위의 일부가 됩니다. 코드 어디에서나 액세스할 수 있습니다.

let globalVar = "I'm global";

function printGlobalVar() {
  console.log(globalVar); // Accessible here
}

printGlobalVar(); // Output: I'm global
console.log(globalVar); // Output: I'm global

이 예에서 globalVar는 함수 외부에서 선언되어 전역 변수가 됩니다. 이는 함수 내부와 외부 모두에서 코드의 어느 곳에서나 액세스할 수 있음을 의미합니다. printGlobalVar() 함수가 호출되면 함수가 전역 범위에 액세스할 수 있으므로 globalVar 값을 기록합니다. 그 후에는 globalVar를 함수 외부에 직접 기록해도 프로그램 전체에서 전역 변수로 사용할 수 있기 때문에 여전히 동일한 값을 인쇄합니다. 기본적으로 전역 범위를 사용하면 이 변수를 코드의 어느 곳에서나 사용하고 액세스할 수 있습니다.

로컬 스코프(함수 및 블록 스코프)

함수 또는 블록(예: 루프 또는 if 문) 내에 정의된 변수는 해당 함수 또는 블록으로 제한됩니다. 해당 범위 외부에서는 액세스할 수 없습니다.

함수 범위: 함수 내부에 선언된 변수는 해당 함수 내에서만 액세스할 수 있습니다.

function myFunction() {
  let localVar = "I'm local";
  console.log(localVar); // Output: I'm local
}

myFunction();
console.log(localVar); // Error: localVar is not defined

블록 범위: let 및 const에 도입된 블록 범위는 루프, 조건 및 try-catch 블록과 같이 블록({}) 내부에 선언된 변수에 적용됩니다. 이러한 변수는 해당 블록 내에서만 액세스할 수 있습니다.

if (true) {
  let blockVar = "I'm block scoped";
  console.log(blockVar); // Output: I'm block scoped
}

console.log(blockVar); // Error: blockVar is not defined

반대로 var로 선언된 변수는 함수 범위입니다. 즉, 블록 내에서 선언된 경우에도 함수의 맨 위로 또는 전역으로 끌어올려집니다.

자바스크립트에서 호이스팅

호이스팅은 컴파일 단계에서 선언을 포함 범위의 맨 위로 이동하는 JavaScript의 기본 동작입니다. 이는 코드가 실행되기 전에 변수와 함수 선언이 처리된다는 의미입니다.

변수 호이스팅

var를 이용한 변수 선언의 경우 변수는 호이스팅되지만 초기화는 되지 않습니다. 초기화되기 전에 변수에 액세스하려고 하면 악명 높은 "정의되지 않은" 동작이 발생합니다.

console.log(myVar); // Output: undefined
var myVar = "Hello";
console.log(myVar); // Output: Hello

자바스크립트 엔진은 뒤에서 다음 작업을 수행합니다.

var myVar;
console.log(myVar); // Output: undefined
myVar = "Hello";
console.log(myVar); // Output: Hello

이 예에서 JavaScript는 var myVar 선언을 맨 위로 끌어올려 코드가 맨 위에 작성된 것처럼 동작합니다. 첫 번째 console.log는 변수가 선언(호이스팅)되었지만 아직 값이 할당되지 않았기 때문에 unjust를 출력합니다. 할당 후 두 번째 console.log는 5를 출력합니다. 이는 var에서 호이스팅이 작동하는 방식을 보여줍니다. 선언은 호이스팅되지만 값은 나중에 할당됩니다.

let 및 const의 경우 선언이 호이스팅되는 동안 코드가 해당 줄에 도달할 때까지 초기화되지 않으며 선언 전에 액세스하려고 하면 ReferenceError가 발생합니다.

console.log(myLet); // ReferenceError: Cannot access 'myLet' before initialization
let myLet = "Hello";

기능 호이스팅

함수 선언은 완전히 호이스팅됩니다. 즉, 함수를 선언하기 전에 호출할 수 있습니다.

greet(); // Output: Hello, World!

function greet() {
  console.log("Hello, World!");
}

함수를 상단으로 이동시켜 선언하기 전에 호출할 수 있도록 했습니다.

그러나 var, let 또는 const를 사용하는 함수 표현식은 함수 선언과 같은 방식으로 호이스팅되지 않습니다. 호이스팅 측면에서 일반 변수처럼 동작합니다. 즉, 할당 후에만 함수를 사용할 수 있습니다.

greet(); // Error: greet is not a function

var greet = function() {
  console.log("Hello!");
};

위 예에서 Greeting은 var 변수로 끌어올려졌지만 처음에는 정의되지 않았으므로 할당 전에 호출하려고 하면 오류가 발생합니다.

실제 범위 및 호이스팅

• 전역 범위 변수는 전체 스크립트에서 액세스할 수 있습니다.

• 로컬 범위 변수는 선언된 블록이나 함수로 제한됩니다.

• 호이스팅을 사용하면 함수와 변수를 선언하기 전에 사용할 수 있지만 let, const 및 함수 표현식에는 제한이 있습니다.

이러한 개념은 JavaScript에서 변수와 함수가 작동하는 방식을 이해하는 데 기본이 되며, 명확하고 버그 없는 코드를 작성하려면 이러한 개념을 익히는 것이 필수적입니다.

위 내용은 JavaScript의 범위 및 호이스팅 - 포괄적으로 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!