Post

JAVASCRIPT) var, let, const 차이

Posted Updated
Preview Image
By parksohyunnn 7 min read

안녕하세요! 오늘은 JavaScript에서 var, let, const의 차이에 대해 알아보겠습니다. JavaScript는 프로그래밍 언어로서 변수를 선언하고 사용할 수 있는 여러 방법을 제공합니다. 가장 널리 사용되는 변수 선언 방법은 var, let, const입니다. 이 세 가지는 비슷해 보이지만, 실제로는 중요한 차이점이 있습니다. 이번 글에서는 이 차이점들을 명확히 설명하고, 각각의 사용 방법을 예시 코드와 함께 살펴보겠습니다.

1. var

정의 및 사용 방법

var는 ES6(ECMAScript 2015) 이전의 JavaScript에서 변수를 선언하는 유일한 방법이었습니다. var로 선언된 변수는 함수 스코프(function scope)를 가지며, 이는 변수가 선언된 함수 내에서만 접근할 수 있음을 의미합니다.

  • 예시 코드
1
2
3
4
5
6
7
8
9
10

function varExample() {
    var x = 10;
    if (true) {
        var x = 20; // 같은 함수 스코프 내에서 변수 x를 재선언
        console.log(x); // 20
    }
    console.log(x); // 20
}

varExample();
  • 위 예시에서 보듯이, var로 선언된 변수는 함수 내 어디서든 접근이 가능하며, 블록 스코프(block scope)를 무시하고 다시 선언될 수 있습니다.

2. let

정의 및 사용 방법

let은 ES6에서 도입된 변수 선언 방법으로, 블록 스코프(block scope)를 가집니다. 이는 변수가 선언된 블록 내에서만 접근할 수 있음을 의미합니다.

  • 예시 코드 ````javascript function letExample() { let x = 10; if (true) { let x = 20; // 새로운 블록 스코프 내에서 변수 x를 선언 console.log(x); // 20 } console.log(x); // 10 }

letExample();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

- 위 예시에서 let으로 선언된 변수는 블록 내에서만 유효하므로, if 블록 내부의 x와 외부의 x는 서로 다른 변수로 취급됩니다.

## 3. const

### 정의 및 사용 방법

const 역시 ES6에서 도입된 변수 선언 방법으로, 선언과 동시에 초기화되어야 하며, 이후 값이 변경될 수 없습니다. const도 블록 스코프를 가집니다.

- 예시 코드
````javascript
function constExample() {
    const x = 10;
    if (true) {
        const x = 20; // 새로운 블록 스코프 내에서 변수 x를 선언
        console.log(x); // 20
    }
    console.log(x); // 10
}

constExample();
  • const로 선언된 변수는 재할당이 불가능하지만, 객체나 배열의 경우 그 내부의 값은 변경할 수 있습니다.
1
2
3
4
5
6
7

const arr = [1, 2, 3];
arr.push(4);
console.log(arr); // [1, 2, 3, 4]

const obj = { a: 1 };
obj.b = 2;
console.log(obj); // { a: 1, b: 2 }

요약

  • var: 함수 스코프를 가지며, 변수가 선언된 함수 내 어디서든 접근할 수 있습니다. 호이스팅(hoisting)으로 인해 변수가 선언되기 전에 참조될 수 있습니다.
  • let: 블록 스코프를 가지며, 변수가 선언된 블록 내에서만 접근할 수 있습니다. 호이스팅은 발생하지만, 초기화 전에 참조할 수 없습니다.

  • const: 블록 스코프를 가지며, 선언과 동시에 초기화되어야 하고, 재할당이 불가능합니다. 객체와 배열의 경우 내부 값은 변경할 수 있습니다. 호이스팅(hoisting) 호이스팅은 JavaScript의 독특한 동작 방식 중 하나로, 변수 선언이 해당 스코프의 최상위로 끌어올려지는 것을 의미합니다. 그러나 let과 const는 호이스팅되지만, 초기화 전에 참조할 수 없습니다. 이를 ‘Temporal Dead Zone’(TDZ)이라고 합니다.

  • 예시 코드
1
2
3
4
5
6
7
8

console.log(a); // undefined
var a = 10;

console.log(b); // ReferenceError: b is not defined
let b = 10;

console.log(c); // ReferenceError: c is not defined
const c = 10;
  • 위 예시에서 var로 선언된 변수는 선언이 호이스팅되지만, let과 const는 TDZ로 인해 초기화 전에 참조할 수 없습니다.

결론

JavaScript에서 var, let, const의 차이를 이해하고 적절히 사용하는 것은 코드의 가독성과 유지보수성을 높이는 데 중요합니다. var는 함수 스코프를 가지며, 호이스팅으로 인해 예기치 않은 동작을 유발할 수 있습니다. let과 const는 블록 스코프를 가지며, 더 안전하고 예측 가능한 동작을 제공합니다. 특히, 재할당이 필요하지 않은 경우에는 const를 사용하는 것이 좋습니다.

이 블로그 글이 var, let, const의 차이점과 사용 방법을 이해하는 데 도움이 되었기를 바랍니다. 추가적인 질문이나 도움이 필요하다면 언제든지 댓글로 남겨주세요. 여러분의 JavaScript 여정을 응원합니다!

감사합니다! 다음에 더 유익한 정보로 찾아뵙겠습니다.

JAVASCRIPT
git github
This post is licensed under CC BY 4.0 by the author.

Trending Tags

git github