>웹 프론트엔드 >JS 튜토리얼 >JavaScript의 변수 이해: Let, Const 및 Var 설명.

JavaScript의 변수 이해: Let, Const 및 Var 설명.

Mary-Kate Olsen
Mary-Kate Olsen원래의
2025-01-24 20:33:11983검색

Understanding Variables In JavaScript: Let, Const and Var Explained.

변수는 프로그래밍의 기본 구성 요소이며 데이터 컨테이너 역할을 합니다. JavaScript는 var, let, const의 세 가지 변수 선언 방법을 제공합니다. 비슷해 보이지만 목적과 동작이 다릅니다. 이 문서에서는 차이점을 살펴보고 적절한 사용법을 명확히 하기 위한 실제 예를 제공합니다.

자바스크립트 변수의 진화

ES6(ECMAScript 2015) 이전에는 var가 변수 선언을 위한 유일한 방법이었습니다. 그러나 함수 범위와 호이스팅 동작으로 인해 예상치 못한 버그가 발생하는 경우가 많았습니다. ES6에서는 letconst을 도입하여 개발자가 변수 동작을 보다 세밀하게 제어할 수 있도록 하여 더 깔끔하고 오류가 발생할 가능성이 적은 코드를 만들었습니다.

1. var: 유산 선언

var은 JavaScript의 원래 변수 선언입니다. 함수 범위이므로 접근성이 정의된 함수로 제한됩니다. 결정적으로 블록 범위가 부족하여 루프나 조건문 내에서 문제를 일으킬 가능성이 있습니다.

주요 var 특성:

  • 기능 범위:
<code class="language-javascript">function example() {
    var message = "Hello, world!";
    console.log(message); // Accessible here
}
// console.log(message); // ReferenceError: message is not defined</code>
  • 호이스팅: var 변수는 해당 범위의 최상위로 호이스팅되지만 undefined.
  • 으로 초기화됩니다.
<code class="language-javascript">console.log(name); // undefined
var name = "John";</code>
  • 재선언 허용:
<code class="language-javascript">var age = 25;
var age = 30; // No error
console.log(age); // 30</code>

사용 시기 var: 일반적으로 최신 JavaScript에서는 피합니다. letconst은 범위 지정 및 호이스팅 관련 문제를 방지하는 데 선호됩니다.

2. let: 유연한 현대적 접근 방식

ES6에서는 블록 범위 변수 선언으로 let를 도입했습니다. var과 유사하지만 많은 함정을 피합니다.

주요 let 특성:

  • 블록 범위: 정의된 블록, 문 또는 표현식 내에서만 액세스할 수 있습니다.
<code class="language-javascript">if (true) {
    let greeting = "Hi!";
    console.log(greeting); // Accessible here
}
// console.log(greeting); // ReferenceError: greeting is not defined</code>
  • 호이스팅 없음(초기화 포함): var과 달리 let는 선언 전에 액세스를 방지합니다.
<code class="language-javascript">console.log(color); // ReferenceError: Cannot access 'color' before initialization
let color = "blue";</code>
  • 재선언 불가(동일 범위 내):
<code class="language-javascript">let score = 10;
// let score = 20; // SyntaxError: Identifier 'score' has already been declared</code>

사용 시기 let: 특정 블록 내에서 또는 시간이 지남에 따라 값이 변경될 수 있는 변수에 사용합니다.

3. const: 불변 상수

또한 ES6에 도입된 const은 재할당되어서는 안 되는 변수를 위해 설계되었습니다. let처럼 블록 범위이고 호이스트되지 않습니다.

주요 const 특성:

  • 블록 스코프 : 와 유사합니다 let
재 할당 허용되지 않음 :
<code class="language-javascript">function example() {
    var message = "Hello, world!";
    console.log(message); // Accessible here
}
// console.log(message); // ReferenceError: message is not defined</code>
초기 할당 후에는 값을 변경할 수 없습니다.
  • 변이 가능한 물체 및 배열 :
  • 참조 자체는 불변이지만 로 선언 된 객체 또는 배열의 내용을 수정할 수 있습니다.
<code class="language-javascript">console.log(name); // undefined
var name = "John";</code>
  • 를 사용하는 시점 : 재 할당하지 말아야 할 변수의 기본 선택, 코드 예측 가능성 및 디버그 가능성을 향상시킵니다. 비교 테이블 const 기능
    <code class="language-javascript">var age = 25;
    var age = 30; // No error
    console.log(age); // 30</code>
    스코프 기능 블록 블록 호이 스팅 예 (정의되지 않은) 아니요 아니요 재고 예 아니요 아니요 재 할당 예 예 아니요 테이블> 모범 사례

    const 호의

    :

    는 불변성을 나타냅니다. 필요한 경우 사용 : 재 할당이 필요한 변수에 대한 예약

    피하십시오
    Feature var let const
    Scope Function Block Block
    Hoisting Yes (undefined) No No
    Re-declaration Yes No No
    Re-assignment Yes Yes No
    :

    는 우수한 기능을 제공합니다

    결론
    • , 및 의 뉘앙스를 이해하는 것은 깨끗하고 효율적이며 오류가없는 JavaScript를 작성하는 데 필수적입니다. 필요할 때만 우선 순위 const를 사용하면 코드 품질과 가독성이 크게 향상됩니다. 는 과거로 안전하게 강등 될 수 있습니다

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사:소닉 모험다음 기사:소닉 모험