> 웹 프론트엔드 > JS 튜토리얼 > JavaScript의 범위 이해

JavaScript의 범위 이해

Mary-Kate Olsen
풀어 주다: 2025-01-14 06:58:43
원래의
691명이 탐색했습니다.

Understanding Scopes in JavaScript

Javascript의 범위와 클로저 개념은 언어를 익히는 데 필요한 기본 블록입니다. 그들은 생성자, 팩토리 기능, IIFE 등을 뒷받침하는 숨은 영웅입니다.

이 글은 실용적인 예를 들어 JavaScript의 범위를 설명하는 것을 목표로 합니다. 다음 기사에서는 JavaScript 클로저에 대해 논의하겠습니다.

범위 및 어휘 범위 지정

범위는 단순히 JavaScript 프로그램에서 변수를 사용할 수 있는 위치를 결정합니다. 기본적으로 범위에는 두 가지 유형이 있습니다.

  1. 글로벌 범위
  2. 로컬 범위

글로벌 범위

전역 범위를 사용하면 변수를 어디에서나 사용할 수 있으며 프로그램 내 어디에서나 사용할 수 있습니다. 기술적으로 변수가 어떤 함수나 { 중괄호 } 내에서 선언되지 않은 경우 전역 범위에 있다고 합니다.

로컬 범위

반면에 로컬 범위를 사용하면 변수는 특정 컨텍스트에서만 사용할 수 있으며 해당 컨텍스트에서만 사용할 수 있습니다. 기술적으로 변수가 함수나 { 중괄호 } 내에서 선언되면 로컬 범위에 속한다고 합니다.

let x = 3; // x (global scoped)

function addXY () {
    let y = 5; // y (locally scoped)
    return  x + y; // returns 8 since x is available anywhere in this program
}
로그인 후 복사

더 많은 범위

ECMAScript는 JavaScript와 같은 스크립팅 언어의 핵심 기능을 정의하여 플랫폼 전반에 걸쳐 일관성과 상호 운용성을 보장하는 표준화된 사양입니다. 국제 단위계(SI)가 전 세계적으로 일관성을 보장하기 위해 미터 및 킬로그램과 같은 측정에 대한 표준화된 프레임워크를 제공하는 것처럼 ECMAScript는 JavaScript와 같은 스크립팅 언어에 대한 표준을 설정하여 다양한 플랫폼과 환경에서 균일하게 작동하도록 보장합니다.

JavaScript에 대한 이 표준화된 사양은 각 버전에 새로운 기능과 개선 사항이 추가되면서 버전을 통해 발전해 왔습니다. 이러한 버전 중에는 let/const를 도입한 주요 업데이트를 제공한 ES6(ECMAScript 2015)이 있습니다.

ES6 이전에는 JavaScript에서 var 키워드를 사용하여 변수를 정의했습니다. var를 사용하면 변수를 재정의하고 업데이트할 수 있습니다. 그러나 var 변수는 함수 내에서만 로컬 범위로 지정됩니다. { 중괄호 } 내에 스니펫을 포함하는 로컬 범위 확장은 ES6에서 let/const를 통해 도입되었습니다. 간단히 말해서, var 변수는 함수 내에서 로컬로 범위가 지정되지만 다른 곳에서는 전역으로 범위가 지정됩니다.

let과 const는 변수가 정의된 가장 가까운 { 중괄호 } 집합 내에서만 변수를 사용할 수 있도록 하는 블록 범위 지정을 도입합니다. 이러한 중괄호는 for 루프, if-else 조건 또는 기타 유사한 JavaScript 구문의 중괄호일 수 있습니다. 이러한 중괄호를 코드 블록이라고도 합니다.

예:

function addXYZ() {
    var x = 3;
    let y = 4;
    const z = 5;
    return x + y + z; // 12
}

// These log undefined because var, let, and const variables are locally scoped within functions.
console.log(x);
console.log(y);
console.log(z);
로그인 후 복사
let age = 10; // global variable

if (age < 18) {
    let letCandy = 2; // block-scoped variable
    console.log(`You are entitled to ${letCandy} candies`);
} else {
    var varCandy = 4; // function-scoped variable
    console.log(`You are entitled to ${varCandy} candies`);
}

console.log(age); // Logs 10, as age is globally scoped
console.log(letCandy); // Throws ReferenceError, as letCandy is block-scoped
console.log(varCandy); // Logs 4, as varCandy is globally scoped outside of functions
로그인 후 복사

다음 기사에서는 어휘 범위 지정 및 클로저에 대해 논의하겠습니다. 읽어주셔서 감사합니다.

위 내용은 JavaScript의 범위 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿