안녕??? 나는 러버덕이야. 이번시간부터 개발 관련해서 질문과 대답 형식으로 시리즈를 이어가 볼 생각이야.
이 글을 쓰는 목적은 나중에 면접을 볼 때 조금이나마 도움이 될 수 있지 않을까 하는 것과 개발을 잘 모르는 사람들도 쉽게 이해가 되면 좋겠다는 취지로 시작해보려고 해.
그러니 이해가 안되거나, 질문이 있으면 댓글로 달아주어도 좋아!!
그럼 한번 시작해볼게 덕!
Q. 안녕!! 나는 러버덕이야. 오늘은 var, let, const 에 대해서 한번 알아보려고 해!
A. 응 좋아!! 처음이라 떨리지만 한번 잘 대답해 볼게. 궁금한게 해소될 때 까지 나에게 계속 질문을 줘!
Q. 아주 친절한걸?? 그럼 첫 질문이야. var가 뭐야??
A. 아주 좋은 질문이야!! 어디서부터 대답을 해야할지 모르겠지만, 최대한 초급자의 마음으로 대답을 해볼게!
✅ Var
var 라는건 1995년, JavaScript가 처음 만들어졌을때부터 존재하던 키워드이며, 변수를 선언할 때 사용을 하지.
지금 모르는 용어들이 마구마구 쏟아지는데 하나씩 천천히 알아보면 되니까 너무 걱정하지마!
🍯 JavaScript
- JavaScript란 하나의 프로그래밍 언어야.예를 들어 우리도 전세계적으로 다른 언어를 사용하고 있잖아??우리도 컴퓨터와의 의사소통을 위해서는 컴퓨터가 알아들을 수 있는 언어로 이야기를 해야겠지?
- 그런 언어의 종류 중 하나가 바로 JavaScript 가 있는거야! 이외에도 다양한 프로그래밍 언어가 많지만, 나는 계속 JavaScript에 기반해서 대답을 할 예정이야.
- 컴퓨터(프로그래밍 세계)에서도 마찬가지야.
- 프로그래밍 언어라는게 생소할 수도 있겠지만, 언어라는데 좀 더 집중해보면 좋을 것 같아.
🍯 키워드
- 키워드란 프로그래밍 언어에서 특정한 의미나 기능을 가진 단어로서, 언어의 문법에서 특별한 역할을 수행하도록 사전에 정의된 예약어야.그 중에 var, let ,const 라는 키워드는 변수를 선언 및 할당할 때 사용하는 키워드야.
- 이외에도 정해진 키워드로 조건문(if), 반복문(for, while) 등 많은 키워드들이 있어. 앞으로 계속 나올테니 너무 겁먹지 말자구!!
- 따라서 코드에서 정해진 키워드를 사용하면 특별한 힘을 가진다고 생각하면 돼.
var 라는건 variable 에서 왔다는 얘기가 있어.
variable이라는 변수라는 의미인데, 프로그래밍 언어에서는 변수는 어떤 값을 담기 위한 컨테이너라고 생각하면 될 것 같아!!
그럼 아래 예시를 볼까?
📌 예시: var 키워드의 x라는 변수에 값을 담는 예제
// var 키워드를 사용하여 x를 선언하고, 10이라는 값을 할당해주었다.
var x = 10;
console.log(x); // 10 변수 x에 있던 10이라는 값을 꺼내와서 콘솔에 보여준다.
위 예시와 같이 나는 x 라는 변수를 선언했고, 10이라는 값을 할당을 해줬어.
그래서 다음 줄에서 x라는 값을 확인을 할 때 x 컨테이너 안에 있는 10이라는 값을 볼 수 있는거지!
생각보다 별거 아니지??
그럼 var 키워드의 특징을 하나씩 알아볼까??
1️⃣ 재선언이 가능하다.
아까 내가 위에서 잠깐 선언과 할당이라는 얘기를 예시에서 했었지?
선언이라는건 내가 어떤 변수를 쓰겠다고 알리는 역할을 한다고 생각하면 될 것 같아!
위에 예시 코드를 생각해보면 나는 x라는 변수를 사용하겠다고 선언을 한거야.
JavaScript에서는 var, let, const 키워드를 통해 어떤 변수를 쓰겠다고 선언을 할 수가 있어.
그럼 재선언이라는건 다시 선언한다는 뜻이잖아?
이미 선언되어 있던 변수를 다시 선언한다는걸 의미하겠지?
아래 예시를 볼까?
📌 예시: var 재선언 예시
var x = 10; // x라는 변수를 선언하고 10을 할당
console.log(x); // 10
var x = 5; // x라는 변수를 재선언하고 5를 할당
console.log(x); // 5
위의 예시를 보면 나는 처음에 x를 선언하여 10이라는 숫자를 할당을 해줬어. 그럼 x에는 10이라는 숫자가 담겨있겠지?
그런데 또 밑에서는 x를 재선언하였더니 에러가 발생하지 않고 다시 5가 할당되는걸 볼 수 있어. 그래서 다시 x 컨테이너 안에 들어있는 값을 확인해봤더니 5라는 숫자가 나오는거지.
이제 재선언이 어떤것인지 알겠지??
2️⃣ 재할당이 가능하다.
그럼 위에 설명과 마찬가지로 재할당이란 값을 다시 할당하는 걸 말하겠지?? 바로 예시를 살펴볼까?
📌 예시: var 재할당 예시
var x = 10; // x라는 변수를 선언하고 10을 할당
console.log(x); // 10
x = 5; // x라는 변수에 5를 재할당
console.log(x); // 5
재선언 예시와 정말 비슷하지? 그런데 차이점은 재선언 예시에서는 var라는 키워드를 한번 더 사용을 했지만, 여기서는 그냥 같은 컨테이너에 값만 다시 바꿔줬다는거야!
좀 더 쉽게 비유를 하면 재선언을 했을때는 아예 새로운 컨테이너에 값 5를 담았다면, 재할당을 했을때는 같은 컨테이너에서 5를 다시 할당을 해준거야.
지금까지는 그렇게 어렵지 않지??
3️⃣ 스코프의 범위가 함수 스코프다.
지금부터 내용이 조금씩 어렵게 느껴질 수도 있어… 하지만 천천히 살펴보면 어렵지 않으니 한번 해보자!!
🍯 스코프
- 스코프란 유효한 참조 범위를 말해.
그래서 변수를 어디에 선언했느냐에 따라서 참조 범위가 달라질 수도 있는거야! - 만약 내가 초콜릿을 우리집 냉장고에 넣어뒀어.
그럼 내가 밖에서 그 초콜릿을 꺼내서 먹을 수 있을까? 마법을 쓰지 않는한 안되겠지?
내가 그 초콜릿을 먹고 싶으면 우리집에 와서, 냉장고를 열어야 초콜릿을 꺼내 먹을 수 있겠지?
여기서 냉장고를 변수라고 생각해봐. 그럼 냉장고에 스코프는 우리집이 된다고 생각하면 되는거지!!
어때 괜찮지???
- JS에서는 스코프를 크게 4가지로 볼 수 있어.
- Global scope (전역 범위)
- Module scope (모듈 범위)
- Function scope (함수 범위)
- Block scope (블록 범위)
- 스코프의 범위는 위로 갈수록 더 넓다고 생각하면 돼!
- Global scope > Module scope > Function scope > Block scope
그럼 함수 스코프면 함수 내에서 참조가 가능하다는 뜻이겠네?? 한번 예시로 살펴볼까?
📌 예시: var 함수 스코프 예시
function foo() {
var x = 10;
}
console.log(x); // Uncaught ReferenceError: x is not defined
위의 예시를 보면 함수 밖에서 x라는 변수를 출력하니 에러가 뜨지?? 에러 내용은 x가 정의가 되지 않았다는 내용이야.
왜냐하면 var 키워드로 선언한 변수는 함수 스코프의 유효 범위를 가지기 때문이지!!
📌 예시: var 함수 스코프 예시2
function foo() {
var x = 10;
console.log(x); // 10
if(true) {
console.log(x); // 10
}
}
foo();
한가지 예시를 더 가져왔어. 위의 예시를 살펴보면 내가 함수 안에서 x의 값을 확인하고 있지?
그런데 두번째로 x의 값을 확인할 때 if라는 블록으로 한번 더 감싸서 값을 확인했지?
그런데도 둘 다 값이 출력되는 걸 확인해 볼 수 있어.
그 이유는 var 키워드가 함수 스코프이기 때문에 블록 내에 있더라도 값을 출력할 수 있는거야!
스코프의 범위가 어떻게 되는지 궁금하면 위에 스코프에 대한 설명을 보면 될 것 같아!
4️⃣ 호이스팅이 발생한다.
지금까지 내가 설명했던 것들 중에 제일 어려운 이야기일 수 있어… 그래도 중요한 특징이니 한번 알아보자!
호이스팅이란 의미를 찾아보면 무언가를 ‘끌어올리다’ 라는 의미라는걸 알 수 있어.
그럼 무엇을 끌어올렸다는 걸까?
바로 예시를 통해 알아보자!!
📌 예시: var 호이스팅 예시
function foo() {
console.log(x); // undefined
var x = 10;
console.log(x); // 10
}
foo();
위에 예시를 살펴보면 처음에 x 값을 확인할 때는 아직 x가 선언하고 값을 할당하기 전인데 확인을 하고 있지?
그런데도 undefined라는 게 콘솔에 찍혀.
undefined는 값이 처음에 할당이 되지 않았을 때 나오는 값이야.
신기하지 않아? 아직 x라는 변수를 선언하기 전인데도, x 컨테이너에 값이 있는지 확인할 수가 있잖아!!
아직 컨테이너가 만들어지기 전인데도 거기 값이 있는지 확인을 하고 있어….
이게 어떻게 가능한가 보면, 처음에 함수의 호출이 일어날 때 그 함수 내에 있는 매개변수, 함수와 변수 정보들이 다 끌어올려지게 돼. (끌어올려지는 순서는 매개변수, 인자 → 함수 → 변수 이런 순서대로 돼!)
이게 실행컨텍스트가 생성되면서 일어나는 현상인데, 이건 나중에 얘기해줄테니 걱정하지마!
어쨌든 이렇게 끌어올려지면서 실행컨텍스트에 등록이 되기 때문에 아직 x를 선언하여 값을 할당하는 코드를 실행하기 전인데도 접근이 가능해지는 거지!!
러버덕아 혹시 내 대답이 만족이 됐을까…?
Q. Wow… var 라는 걸 물어봤는데 관련하여 엄청 많은 연관 단어들이 나왔네… 너무 어려운거 아냐?? 처음 프로그래밍을 하는 사람 입장에서는 쉽지 않을 것 같아.
A. 처음이라서 알아야 하는 개념이 많은 건 어쩔 수 없는 것 같아… 그래도 하나하나 차근차근 알아가다 보면 조금씩 이해가 되고, 그게 확장되면 한명의 멋진 개발자가 되어 있을거야!!
Q. 고마워… 한번 나도 노력해볼게 덕!!! 그럼 다음 키워드인 let에 대해서도 알려줄 수 있어?
A. 알았어!! 대신 let 이랑 const 를 같이 설명해줄게! 2개의 키워드는 거의 비슷한 성질을 가지고 있어서 같이 설명하는게 더 나을 것 같아 😎 순서는 아까와 똑같이 해볼게!
✅ let ,const
let 과 const 도 var 와 마찬가지로 변수를 선언할 때 사용하는 키워드야.
let과 const가 나오기 전까지는 var라는 키워드를 사용하여 변수를 선언하여 사용했어.
그런데 var에는 여러가지 문제점(스코프, 호이스팅)이 있었고,
이를 보완하기 위해 ECMAScript 6 (ES6, 2015) 에서 let과 const가 같이 도입이 되었어!!
🍯 ECMAScript
- 1997년, Ecma(European Computer Manufacturers Association) 인터내셔널에 의해 제정된 ECMA-262 기술 규격에 의해 정의된 범용 스크립트 언어를 말하며, 동의어로는 ‘ECMAScript 사양’(ECMAScript specification)가 있어!
ECMAScript를 구현한 하나의 언어가 바로 JavaScript가 되는거지! - 비유를 들어보면 ECMAScript는 공식으로 선언된 표준어이고, JavaScript는 그 표준어에서 파생된 하나의 방언(사투리)라고 생각해도 좋을 것 같아.
- ECMAScript는 스크립트 언어가 준수해야 하는 규칙, 세부 사항 및 지침을 제공해줘.
그럼 지금부터 어떤 특징을 가지고 있는지 살펴볼까?
1️⃣ 재선언이 불가능하다.
var 키워드는 재선언이 가능하다고 했지? 그와는 반대로 let과 const는 재선언이 불가능해!
한번 예시를 같이 살펴볼까?
📌 예시: let, const 재선언 예시
let x = 10; // x라는 변수를 선언하고 10을 할당
let x = 5; // Uncaught SyntaxError: Identifier 'x' has already been declared
const y = 10; // y라는 변수를 선언하고 10을 할당
const y = 5; // Uncaught SyntaxError: Identifier 'y' has already been declared
위의 예시를 보면 let과 const 둘 다 재선언을 하려고 하면 에러가 발생하는걸 볼 수 있어!
2️⃣ let은 재할당이 가능하지만, const는 재할당이 불가능하다.
그럼 재할당은 어떨까?
📌 예시: let, const 재할당 예시
let x = 10; // x라는 변수를 선언하고 10을 할당
x = 5; // 다시 5라는 값을 재할당
const y = 10; // y라는 변수를 선언하고 10을 할당
y = 5; // Uncaught TypeError: Assignment to constant variable.
예시를 보면 let은 재할당이 되는데 const는 재할당을 하면 에러가 발생하는걸 볼 수 있어!
왜 이런 차이를 두었을까?
const라는 의미를 살펴보면 왜 그런지 와닿을 수 있어!!
const는 constant 라는데서 왔다고 해.
constant 의미는 상수라는 의미인데, 프로그래밍에서 상수의 의미는 변경할 수 없는 값을 의미해.
그러니 당연히 const로 선언한 변수의 값을 바꾸려고 하면 에러가 발생하겠지?
3️⃣ 스코프의 범위가 블록 스코프다.
자 위에서 var의 경우에는 스코프가 함수 스코프라고 했지?
let과 const는 블록 스코프의 특징을 가지고 있어.
한번 예시를 같이 살펴볼까?
📌 예시: let 블록 스코프 예시
function foo() {
if(true) {
let y = 10;
}
console.log(y); // ReferenceError: y is not defined
}
foo();
위의 예시를 보면 if 블록 내에 y라는 변수를 let 키워드로 선언을 하고, 10으로 초기화를 해줬어. 그런데 if 블록이 끝나고 밖에서 y를 호출하면 y가 정의되지 않았다는 에러가 발생해.
만약 var로 했다면 결과가 달라졌을까?
📌 예시: var 함수 스코프 예시
function foo() {
if(true) {
var x = 10;
}
console.log(x); // 10
}
foo();
var 로 변수를 선언한 경우에는 if 블록이 종료되더라도 여전히 밖에서 x의 값을 확인해볼 수 있어!!
이게 함수 스코프와 블록 스코프의 가장 큰 차이야!!
어때 조금 이해가 될까??
4️⃣ 호이스팅이 발생한다.
let과 const도 호이스팅이 발생을 하긴 해. 그런데 var와 다른 방식으로 호이스팅이 발생하지!
뭐가 다른지 바로 예시로 같이 볼까?
📌 예시: let 호이스팅 예시
function foo() {
console.log(x); // undefined
console.log(y); // ReferenceError: Cannot access 'y' before initialization
var x = 10;
console.log(x); // 10
let y = 5;
console.log(y); // 5
}
foo();
var는 아까전에 살펴봤을 때 호이스팅이 발생하여 함수의 제일 윗단으로 끌어올려진다는 걸 확인했어.
let 과 const도 마찬가지로 호이스팅이 발생한다고 알고 있는데 왜 다른 결과가 나올까??
그건 let과 const는 호이스팅이 발생하지만, TDZ에 갇히기 때문이야!
TDZ(Temporal Dead Zone)는 변수를 참조할 수 없는 구간을 말하며, let 과 const로 선언된 변수의 경우에는 자신의 선언문에 이르기 전까지는 이 TDZ에 갇혀있기 때문에 선언은 됐지만, 값에 접근을 하지 못해!
Q. 고마워!! 덕분에 var와 let, const의 차이에 대해서 알게 되는 시간이 되었어 덕!!
A. 아냐, 나도 처음 이렇게 글로 설명해보는 거라 많이 부족함을 느꼈어… 점점 나아질 거라 생각하고 있으니 계속 지켜봐줘!
Q. 당연하지 덕!! 마지막으로 한번만 정리를 깔끔하게 해줄 수 있을까??
A. 알았어 내가 그럼 마지막으로 정리를 해서 알려줄게!
🎯 결론
| var | let | const | |
|---|---|---|---|
| 재선언 | O | X | X |
| 재할당 | O | O | X |
| 호이스팅 | O | △ | △ |
| 스코프 | 함수 단위 스코프 | 블록 단위 스코프 | 블록 단위 스코프 |
✅ 참조
'러버덕의 개발 이야기' 카테고리의 다른 글
| 러버덕의 개발 이야기 - 브라우저 랜더링 (2) | 2025.03.29 |
|---|---|
| 러버덕의 개발 이야기 - target, eventTarget (0) | 2025.03.24 |