> 웹 프론트엔드 > JS 튜토리얼 > Let, Const 및 Var 개요: 주요 차이점 설명

Let, Const 및 Var 개요: 주요 차이점 설명

WBOY
풀어 주다: 2024-08-05 21:42:52
원래의
640명이 탐색했습니다.

An Overview of Let, Const, and Var: Key Differences Explained

JavaScript에서 let, const, var의 실제 사용법을 사용하고 이해한 때가 있었지만 말로 설명하는 것이 어려웠습니다. 유사한 곤경에 처한 경우 초점을 맞춰야 할 핵심 사항은 범위, 호이스팅, 재초기화 및 재할당의 차이점입니다.

범위:

  • var는 함수 범위이거나 함수 외부에서 선언된 경우 전역 범위입니다.

var(함수 및 전역 범위)의 예

function varExample() {
    if (true) {
        var x = 10; // x is function-scoped
    }
    console.log(x); // Outputs: 10
}
varExample();

if (true) {
    var y = 20; // y is globally scoped because it's outside a function
}
console.log(y); // Outputs: 20
로그인 후 복사
  • let과 const는 블록 범위입니다. 즉, 선언된 블록({}로 구분) 내에서만 액세스할 수 있습니다.

let(블록 범위)의 예

function letExample() {
    if (true) {
        let x = 10; // x is block-scoped
        console.log(x); // Outputs: 10
    }
    console.log(x); // ReferenceError: x is not defined
}
letExample();

if (true) {
    let y = 20; // y is block-scoped
    console.log(y); // Outputs: 20
}
console.log(y); // ReferenceError: y is not defined

로그인 후 복사

const(블록 범위)의 예

function constExample() {
    if (true) {
        const x = 10; // x is block-scoped
        console.log(x); // Outputs: 10
    }
    console.log(x); // ReferenceError: x is not defined
}
constExample();

if (true) {
    const y = 20; // y is block-scoped
    console.log(y); // Outputs: 20
}
console.log(y); // ReferenceError: y is not defined
로그인 후 복사

게양

호이스팅은 작업을 시작하기 전에 작업 공간을 설정하는 것과 같습니다. 당신이 부엌에서 식사 준비를 하고 있다고 상상해 보세요. 요리를 시작하기 전에 모든 재료와 도구를 손이 닿는 곳에 있도록 카운터에 올려두세요.

프로그래밍에서 코드를 작성할 때 JavaScript 엔진은 코드를 실제로 실행하기 전에 코드를 살펴보고 해당 범위의 최상위에 모든 변수와 함수를 설정합니다. 즉, 코드에서 함수와 변수를 선언하기 전에 함수와 변수를 사용할 수 있습니다.

  • 세 가지(var, let, const) 모두 실제로 호이스팅되었습니다. 다만, 호이스팅 과정에서 초기화되는 방식에 차이가 있습니다.

  • var가 호이스팅되고 정의되지 않은 상태로 초기화됩니다.

console.log(myVar); // Outputs: undefined
var myVar = 10;

로그인 후 복사
  • let과 const는 호이스팅되지만 초기화되지는 않습니다. 이는 블록 시작부터 선언이 나타날 때까지 "일시적 데드존"에 있음을 의미합니다.
console.log(myLet);
// ReferenceError: Cannot access 'myLet' before initialization
let myLet = 10;
로그인 후 복사
console.log(myConst); 
// ReferenceError: Cannot access 'myConst' before initialization
const myConst = 20;

로그인 후 복사

재할당 및 재초기화:

  • var는 다시 초기화(다시 선언)하고 재할당(새 값 할당)할 수 있습니다. ### var를 사용한 예
var x = 10;
x = 20; // Reassignment
console.log(x); // Outputs: 20

var x = 30; // Reinitialization
console.log(x); // Outputs: 30

로그인 후 복사
  • let은 동일한 범위 내에서 다시 초기화될 수 없지만 재할당될 수 있습니다.
let y = 10;
y = 20; // Reassignment
console.log(y); // Outputs: 20

let y = 30; // SyntaxError: Identifier 'y' has already been declared
로그인 후 복사
  • const는 재할당될 수 없습니다. 선언 시 초기화되어야 합니다. 그러나 const가 객체 또는 배열인 경우 객체 또는 배열의 내용(속성 또는 요소)이 수정될 수 있습니다. ### const의 예
const z = 10;
z = 20; // TypeError: Assignment to constant variable.

const z = 30; // SyntaxError: Identifier 'z' has already been declared

로그인 후 복사

const 객체의 예

const obj = { a: 1 };
obj.a = 2; // Allowed, modifies the property
console.log(obj.a); // Outputs: 2

obj = { a: 3 }; // TypeError: Assignment to constant variable.
로그인 후 복사

const 배열의 예

const arr = [1, 2, 3];
arr[0] = 4; // Allowed, modifies the element
console.log(arr); // Outputs: [4, 2, 3]

arr = [5, 6, 7]; // TypeError: Assignment to constant variable.
로그인 후 복사

위 내용은 Let, Const 및 Var 개요: 주요 차이점 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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