JavaScript/JS 변수

var, let, const 차이점

SMASMC 2023. 12. 28. 20:11

변수 선언 방식

1. var : 중복 선언 가능

var name = 'javascript';
console.log(name); // javascript

var name = 'flutter';
console.log(name); // flutter
  • var로 선언한 변수는 동일한 이름으로 여러번 중복해서 선언이 가능함. 이와 같은 경우, 마지막에 할당된 값이 변수에 저장된다.
  • 장점으로는 필요할 때마다 변수를 유연하게 사용할 수 있다는 점이고,
  • 단점으로는 기존에 선언해둔 변수의 존재를 잊고 값을 재할당하는 등의 실수가 발생할 가능성이 있다는 점이다.
    위와 같은 단점을 보완하기 위해 ES6부터 추가된 변수 선언 방식이 let 과 const 이다.

2. let : 중복 선언 불가능, 재할당 가능

let name = 'javascript';
console.log(name); // javascript
let name = 'flutter';
console.log(name); // Uncaught SyntaxError: Identifier 'name' has already been declared
name='dart';
console.log(name); // dart
  • var 와 다르게 let은 해당 변수가 이미 선언되었다는 에러 메시지가 출력된다.
  • name = 'dart' 와 같이 변수 선언 및 초기화 이후 반복해서 다른 값을 재할당 할 수 있다.

3. const : 중복 선언 불가능, 재할당 불가능

const name = 'javascript';
console.log(name); // javascript

const name = 'flutter';
console.log(name);
// Uncaught SyntaxError: Identifier 'name' has already been declared

name = 'dart';
console.log(name);
// Uncaught TypeError: Assignment to constant variable
  • let 과 const의 차이점은 immutable(불변)의 여부이다. let은 변수에 다른 값을 재할당할 수 있지만, const는 재할당 시 에러 메시지가 출력된다.

const를 기본으로 사용하여 불필요한 변수의 재사용을 방지하고, 재할당이 필요한 경우 let을 사용하는 것이 좋다.

스코프 (Scope)

  • Scope란 유효한 참조 범위를 뜻하며, 기존의 방법인 var로 선언한 변수와 let 또는 const로 선언한 변수의 스코프는 다르다.

1. var : 함수 레벨 스코프 (function-level scope)

function func() {
    if (true) {
        var a = 5;
        console.log(a); // 5
    }
    console.log(a); // 5
}

func(); // 5
console.log(a); // ReferenceError: a is not defined
  • 함수 내에서 선언된 변수는 함수 내에서만 유효하며, 함수 외부에서는 참조할 수 없다.
    함수 내부에서 선언한 변수는 지역 변수, 함수 외부에서 선언한 변수는 전역 변수로 취급

2. let, const : 블록 레벨 스코프 (block-level scope)

function func() {
    if (true) {
        let a = 5;
        console.log(a); // 5
    }
    console.log(a); // ReferenceError: a is not defined
}

console.log(a); // ReferenceError: a is not defined
  • founction, if문, for문, while문, try/catch문 등의 모든 코드 블록 ({...}) 내부에서 선언된 변수는 코드 블록 내에서만 유효하다.
    코드 블록 내부에서 선언한 변수는 지역 변수로 취급

참고 사이트

https://80000coding.oopy.io/e1721710-536f-43f2-823b-663389f5fbfa