2025 / 01 / 06
오늘은 저번 시간에 했던 내용을 복습하는 시간을 가졌습니다.
let과 var의 차이를 이해하고, 스코프와 백틱(`)을 사용하여 정의되는 문자열인 템플릿 리터럴에 대해 배웠습니다.
💌 let / var
let과 var는 변수를 선언할 때 사용되는 키워드지만, 여러 중요한 차이점이 있습니다.
- 영향력의 범위
- 변수의 재선언 방지
- 호이스팅에서의 차이
1. 영향력의 범위 (스코프)
var로 선언된 변수
- 함수 스코프 - 변수가 선언된 함수 내에서만 유효
- 함수 밖에서 var로 변수를 선언하면, 해당 변수는 전역 스코프로 취급됩니다.
function testVar() { var a = 10; if (true) { var b = 20; // var는 함수 스코프이므로, if 블록 밖에서도 접근 가능 } console.log(a); // 출력: 10 console.log(b); // 출력: 20 (if 블록 밖에서도 접근 가능) } testVar();
- var로 선언된 변수 b는 if 블록 안에 선언되었지만, 함수 전체에서 접근할 수 있습니다.
- var는 블록 스코프를 무시하고 함수 스코프를 따릅니다.
let으로 선언된 변수
- 블록 스코프(block scope) - 변수는 선언된 코드 블록 { } 내에서만 유효
- 블록이 끝나면 해당 변수는 더 이상 접근할 수 없습니다.
function testLet() { let a = 10; if (true) { let b = 20; // let은 블록 스코프이므로, if 블록 밖에서는 접근 불가 } console.log(a); // 출력: 10 console.log(b); // ReferenceError } testLet();
- let으로 선언된 변수 b는 if 블록 안에서만 유효합니다.
- 블록 밖에서 참조하려고 하면 참조 오류가 발생합니다.
2. 변수의 재선언 방지
var로 선언된 변수
- 동일한 스코프 내에서 재선언이 가능합니다.
- 같은 스코프 내에서 동일한 변수 이름을 여러 번 선언해도 에러가 발생하지 않습니다.
- 후에 선언된 변수로 덮어쓰기가 일어납니다.
var a = 10; var a = 20; // var는 재선언이 가능 console.log(a); // 출력: 20
- a는 두 번 선언되어도 오류가 발생하지 않고, 최종적으로 a는 20이 됩니다.
let으로 선언된 변수
- 동일한 스코프 내에서 재선언을 방지합니다.
- 같은 스코프 내에서 이미 선언된 변수는 재선언이 불가능 - 구문 오류 발생
let a = 10; let a = 20; // SyntaxError
- let으로 이미 선언된 변수 a를 다시 선언하려고 하면 구문 오류가 발생합니다.
3. 호이스팅에서의 차이
var로 선언된 변수
- 선언은 끌어올려지지만 초기화는 끌어올려지지 않습니다.
- 변수 선언 전에 값을 참조하면 undefined로 초기화된 상태가 됩니다.
let으로 선언된 변수
- let으로 선언된 변수는 호이스팅될 때 선언과 초기화가 동시에 이루어집니다.
- 하지만 변수의 초기화가 끝나기 전에는 참조할 수 없습니다.
- 초기화 전에 참조하려고 하면 참조 오류가 발생합니다.
💌 let / var 요약
| 특성 | let | var |
|---|---|---|
| 스코프 | 블록 스코프 (코드 블록 내에서만 유효) | 함수 스코프 (블록 스코프 무시) |
| 재선언 방지 | 동일한 스코프 내에서 재선언 불가 | 동일한 스코프 내에서 재선언 가능 |
| 호이스팅 | 선언과 초기화가 함께 호이스팅, 초기화 전에는 접근 불가 | 선언만 호이스팅, 초기화는 그대로 유지 |
var
- 함수 스코프를 따르고, 재선언을 허용
- 호이스팅에서 선언만 끌어올려지는 특징이 있음
- 이로 인해 코드 예측이 어렵고, 의도치 않은 오류가 발생할 수 있습니다.
let
- 블록 스코프를 따르며, 재선언을 방지
- 호이스팅에서도 초기화가 이루어지기 전에는 접근할 수 없는 안전한 방식입니다.
- 더 나은 가독성과 오류 예방을 위해 let을 사용하는 것이 권장됩니다.
💌 스코프 - 보충
스코프(Scope)는 변수, 함수 또는 객체가 어디에서 유효하고 참조될 수 있는지 결정하는 범위입니다.
- 변수는 특정 함수 내에서만 유효할 수도 있고, 블록({}) 내에서만 유효할 수도 있습니다.
- 변수의 스코프는 함수 스코프( var )와 블록 스코프( let )로 나눌 수 있습니다.
스코프 차이로 인한 문제점
- var는 함수 스코프를 따르기 때문에, 제어문(if, for, 등) 안에서 선언된 변수도 함수 바깥에서 참조할 수 있게 되어 예기치 않은 동작을 일으킬 수 있습니다.
- let은 블록 스코프를 따르므로, 변수의 유효 범위가 명확해져 코드의 예측 가능성이 높아집니다.
var의 문제점 예시
function testVar() { for (var i = 0; i < 3; i++) { console.log(i); // 0, 1, 2 출력 } console.log(i); // 3 출력 (for문 바깥에서도 i에 접근 가능) } testVar();
- 위 코드에서 i는 for문 안에서만 사용되는 변수라고 생각할 수 있지만, var로 선언되었기 때문에 함수 스코프에 속합니다.
- for문 바깥에서도 i에 접근할 수 있어, console.log(i)는 3을 출력합니다.
let을 사용하는 이유
- 블록 스코프는 변수의 유효 범위를 더 명확하게 정의해주므로, 코드의 유지보수성과 예측 가능성이 높아집니다.
- let은 블록 내에서만 변수를 사용할 수 있기 때문에, 불필요한 변수의 재사용을 방지하고 코드 오류를 줄이는 데 유용합니다.
💌 스코프 - 정리
| 특성 | let (블록 스코프) | var (함수 스코프) |
|---|---|---|
| 스코프 | 변수가 선언된 블록({ }) 내에서만 유효 | 변수가 선언된 함수 내에서만 유효 |
| 예시 | let x = 10; if(true) { let x = 20; } | var x = 10; function test() { var x = 20; } |
| 블록 내 접근 | 블록 내에서만 변수에 접근 가능 | 블록 내에서도 함수 스코프를 따라 접근 가능 |
let
- 블록 스코프를 따르므로, 변수의 유효 범위가 명확하고 예측 가능한 코드 작성을 도와줍니다.
var
- 함수 스코프를 따르기 때문에, 변수의 유효 범위가 예상과 달라 오류를 일으킬 가능성이 높습니다.
권장 사항
- 현대적인 JavaScript에서는 let을 사용하는 것이 권장됩니다.
- 블록 스코프를 따르는 let이 더 안전하고, 오류를 예방할 수 있기 때문입니다.
💌 템플릿 리터럴
템플릿 리터럴은 백틱(`)을 사용하여 정의되는 문자열을 의미합니다.
- 백틱(`)을 사용하여 문자열을 감쌉니다.
- 템플릿 리터럴 내에서는 ${ } 구문을 이용해 변수나 표현식을 문자열에 삽입할 수 있습니다.
- 여러 줄의 문자열을 작성할 때도 유용하게 사용할 수 있습니다.
const name = "진하"; const age = 23; // 백틱을 사용한 템플릿 리터럴 const greeting = `안녕하세요, ${name}님! 나이는 ${age}살입니다.`; console.log(greeting); // 출력: 안녕하세요, 진하님! 나이는 23살입니다.
- 백틱(`)으로 문자열을 정의하고, ${} 안에 변수를 삽입해서 문자열을 쉽게 만들 수 있습니다.
3일차 후기
- 저번 시간에 배운 let / var를 다시 복습하며, 모르는 부분이 생겨 다시 공부하였습니다.
- 스코프에 대한 개념과 전역변수와 지역변수의 차이에 대해 비교를 하며 정리를 하니까 그냥 읽고 이해하는 것 보다 빠르게 습득할 수 있었습니다.
- 템플릿 리터럴에서 사용되는 백틱( ` )을 사용해 본 경험이 있는데 정확한 명칭은 이번 수업에서 알 수 있었습니다. 강사님께서 백틱이라고 했을 때는 뭔지 몰랐으면서 ${ }로 들었을 때는 알아들은 것처럼 프로그래밍 분야에서의 단어와 개념들을 구분할 수 있도록 공부해야겠다고 생각했습니다.
- 찾아보며 헷갈리는 부분도 많았지만 오늘처럼 함께 공부하는 친구와 하나씩 차근차근 지식을 쌓아가도록 하겠습니다!! ◌ ｡˚✩( › ̫ ‹ )✩˚ ｡◌
૮꒰ ྀི〃´꒳`〃꒱ა
열심히 공부하시길 ...