범위 및 범위 체인의 개념은 JavaScript 및 기타 프로그래밍 언어의 기본입니다. 그러나 이러한 중요한 개념은 때때로 새로운 JavaScript 개발자를 당혹스럽게 합니다.

범위와 범위 체인을 완전히 이해하고 있다면 더 우수하고 효율적이며 깔끔한 코드를 생성할 수 있습니다. 그리고 이것은 당신이 더 나은 JavaScript 개발자가 되는 데 도움이 될 것입니다.

따라서 이 기사에서는 다양한 유형, 역할 및 기능을 포함하여 범위 및 범위 체인이 무엇인지 설명합니다.

JavaScript의 범위는 무엇입니까?

범위는 JavaScript에서 변수의 접근성 또는 가시성을 나타냅니다. 범위는 변수에 액세스할 수 있는 프로그램 섹션과 변수를 볼 수 있는 위치를 결정합니다.

범위가 중요한 이유는 무엇입니까?

요즘 JavaScript에서 Scope의 가장 중요한 두 가지 요구 사항은 다음과 같습니다.

범위를 사용하여 프로그램의 다른 부분에서 원하지 않는 변수 변경을 방지할 수 있습니다.

범위는 보안에 중요합니다. 범위는 프로그램의 특정 부분에서만 변수에 액세스할 수 있음을 의미합니다.

JavaScript의 범위 유형

JavaScript에는 전역 범위, 함수/로컬 범위 및 블록 범위의 세 가지 형태의 범위가 있습니다. 각각이 무엇을 의미하는지 살펴봅시다.

1. JavaScript의 전역 범위

함수 외부에서 정의된 변수는 전역 범위를 갖는다고 합니다. JavaScript 문서에는 전역 범위가 하나만 있습니다. 일단 전역 변수를 선언하면 코드의 어디에서나 사용할 수 있습니다. 심지어 함수에서도 사용할 수 있습니다.

다음은 JavaScript에서 전역 범위의 예입니다.

var message = 'Welcome';
function greet() {
 console.log(message);
}

// Prints 'Welcome'
greet();

2. JavaScript의 기능 및 로컬 범위

함수 내부에 정의된 변수는 로컬 범위에 있습니다. 해당 함수에 대한 각 호출에 대해 고유한 범위가 있습니다. 또한 함수가 호출되면 새로운 범위를 설정합니다.

다음은 JavaScript의 함수 및 로컬 범위의 예입니다.

function greet() {
 var message= 'Welcome';
 console.log(message);
}

// Prints 'Hello World!'
greet();

// Uncaught ReferenceError: message is not defined
console.log(message);

3. JavaScript의 블록 스코프

var 변수와 달리 let 변수 및 const 변수는 ES6에서 가장 가까운 중괄호 쌍으로 범위를 지정할 수 있습니다. 중괄호 쌍 외부에서는 접근할 수 없습니다. 즉, 외부에서 접근할 수 없습니다.

다음은 JavaScript의 블록 범위 예입니다.

{
 let message = 'Welcome';
 var lang = 'JavaScript';
 console.log(message); // Prints 'Welcome'
}

// Prints 'JavaScript'
console.log(lang);

// Uncaught ReferenceError: message is not defined
console.log(greeting);

Var 변수는 블록 범위가 아니므로 블록 외부에서 사용할 수 있습니다.

JavaScript의 스코프 체인

JavaScript에서 변수를 사용할 때 JavaScript 엔진은 JavaScript Pointers 과 같이 해당 값에 대한 현재 범위를 검색합니다. 변수가 내부 범위에서 발견되지 않으면 변수를 찾거나 전역 범위에 도달할 때까지 외부 범위에서 찾습니다.

여전히 변수를 찾을 수 없으면 오류를 발생시키거나 암시적으로 전역 범위에서 변수를 선언합니다.

다음은 JavaScript에서 스코프 체인의 예입니다.

let foo = 'foo';

function bar() {
let baz = 'baz';
// Prints 'baz'
console.log(baz);
// Prints 'foo'
console.log(foo);


number = 42;
console.log(number);  // Prints 42
}

bar();

bar() 함수가 호출되면 JavaScript 엔진은 현재 범위에서 baz 변수를 검색하여 찾습니다. 그런 다음 현재 범위에서 찾지 못하는 foo 변수를 찾습니다. 그래서 그것을 찾은 외부 범위, 즉 전역 범위로 이동합니다.

그런 다음 숫자 변수에 42를 추가하여 JavaScript 엔진이 먼저 현재 범위에서 검색한 다음 외부 범위에서 검색하도록 지시합니다.

스크립트가 엄격 모드가 아닌 경우 엔진은 number라는 새 변수를 만들고 여기에 값 42를 할당하거나 오류를 발생시킵니다.

변수를 사용할 때 엔진은 범위 체인 아래까지 변수를 찾습니다.

결론

범위는 간단히 말해서 변수에 대한 가시적이고 접근 가능한 공간입니다. JavaScript 범위는 함수와 같이 중첩될 수 있으며 JavaScript 엔진은 범위 체인을 통과하여 프로그램에서 사용되는 변수를 찾습니다.

JavaScript에서 변수의 어휘 범위는 구성 프로세스 중에 결정됩니다. JavaScript 엔진은 프로그램 실행 중에 어휘 환경에서 변수를 유지합니다.

랩입니다!!! 기사가 마음에 드셨기를 바라며 Developer Noon에게 Subscribing to our Newsletter 보상을 드릴 수 있습니다.