JavaScript의 범위

JavaScript 및 전체 프로그래밍에서 범위는 다음을 수행하기 위해 파악해야 하는 초석입니다.

정의되지 않은 변수 및 수정과 관련된 잠재적 오류 및 버그 방지

실수로 메모리 사용을 관리하고 제한하는 보다 깔끔한 코드 생성

범위는 현재 컨텍스트에서 사용할 수 있는 값 및 표현식의 가시성으로 정의할 수 있습니다. 처음 시작할 때 대부분의 개발자는 일반적으로 전역적으로 정의된 변수와 표현식을 가지고 있으므로 기본 사항을 학습할 때 문제가 발생하지 않습니다. 그러나 시간이 지남에 따라 많은 경로 지정 레이어로 코드가 점점 더 조밀해지면 값에 액세스하고 수정할 때 겹치거나 간섭하기 때문에 모든 코드 줄을 반드시 실행할 의도가 없는 순간이 있을 것입니다. 스레드 컨텍스트)

JavaScript에는 3가지 주요 범위 영역이 있습니다.

글로벌 범위
함수 또는 블록(코드를 포함하는 {}) 아래에 있지 않은 모든 정의는 범위의 전역 매개변수에 있는 것으로 정의됩니다. 전역적으로 선언된 모든 것은 어디에서나 사용 및 수정할 수 있습니다.

const greeting = "Hello World"
function sayHello(){
   console.log(greeting)
}
console.log(greeting)
//The greeting will be logged twice as it was accessed twice; 
//once in the function and another in the global scope

기능 범위
함수 블록 내부에 명시된 정의입니다. 해당 함수의 컨텍스트에서만 선언이 중요합니다. 함수 범위에서 생성된 모든 변수는 해당 범위에서만 참조할 수 있습니다. 그러나 위의 규칙이 해당 범위의 컨텍스트에 적용되므로 이 범위 수준 위의 변수에 대한 모든 수정 사항을 고려할 수 있습니다.

let greeting = "Hello World"
function sayHello(){
   let newGreeting = "Hello Human"
   console.log(newGreeting)
}
console.log(newGreeting)
//This will result in an error despite a declaration of
//newGreeting, as the function was never called in a global
//scope

let greeting = "Hello World"
function sayHello(){
   newGreeting = "Hello Human"
   console.log(newGreeting)
}
sayHello()
console.log(greeting)
//Now there will be two logs to the function

블록 범위
블록 범위는 블록 범위의 변수 선언이 블록 아래의 자식에서 참조될 수 있다는 점을 제외하면 함수 범위와 유사하게 취급될 수 있습니다. 이 범위는 일반적으로 if 및 switch 케이스와 같은 조건문에서 찾을 수 있습니다.

function sayHello(name){
   console.log(`Hello ${name}`)
let gender = 'boy'

if (baby === 'boy'){
   let name = 'Mark'
   sayHello(name)
}
else if(baby === 'girl'){
   let name = 'Alice'
   sayHello(name)
}

//This example showcases the 'name' variable being passed down
//through the block scope to the function scope of sayHello

전반적으로 범위는 전역 범위가 블록 범위의 부모인 함수 범위 위에 있는 계층적 시스템을 통해 학습되어야 합니다. 모든 범위를 통해 정의된 변수는 let 또는 const 태그로 사전 정의되어야 합니다. var 태그는 변수가 범위의 부모에서 참조되도록 허용할 수 있기 때문입니다.



참조

범위 - MDN 웹 문서 "https://developer.mozilla.org/en-US/docs/Glossary/Scope "

JavaScript 범위 - 개발자 Steve "https://www.stevethedev.com/blog/programming/javascript-scope-primer

JavaScript 변수 범위 - JavaScript 자습서
"https://www.javascripttutorial.net/javascript-variable-scope/#:~:text=JavaScript%20has%20three%20scopes%3A,Block%20scope%20(started%20from%20ES6) "