<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>변수에 대해서 알아보자 -var vs let vs const</h1>
<script>
// 변수선언 선언할 때 var 생략도 가능
// var 변수 이름;
// var 변수이름 = 값;
var a;
var b = 20;
c = 3.14;
document.write("<h4>");
document.write("a=" + a + "," + (typeof (a)) + "<br>");
document.write("b=" + b + "," + (typeof (b)) + "<br>");
document.write("c=" + c + "," + (typeof (c)) + "<hr>");
document.write("</h4>");
//값 변경
a="안녕하세요";
b= new Array(1, "hi", 3.14, true);
c=false;
document.write("a=" + a + "," + (typeof (a)) + "<br>");
document.write("b=" + b + "," + (typeof (b)) + "<br>");
document.write("c=" + c + "," + (typeof (c)) + "<hr>");
var a="졸지 말아요";
document.write("a=" + a + "," + (typeof (a)) + "<br>");
document.write("age=" + age + "," + (typeof(age))+"<br>");
document.write("</h4>");
var age=20;
document.write("</h4>");
document.write("age=" + age + "," + (typeof(age))+"<br>");
// 함수에 대해서 알아보사 선언적 함수
function test(){
alert("test() 호출됨......1")
}
function test(){
alert("test() 호출됨......1")
}
//자바스크림트에서의 변수 scope에 대해서 알아보자
var i = 10; // 전역 변수
function test2() {
var i = 5; // test2 함수 내 지역 변수
var j = 20; // test2 함수 내 지역 변수
k = 50; // 전역 변수 (var 선언이 없으므로 전역 객체에 등록됨)
console.log("--- test2 실행 ---");
console.log("i=" + i); // 지역 변수 5
console.log("this.i=" + this.i); // 전역 변수 10 (브라우저 환경 기준)
console.log("j=" + j); // 20
console.log("k=" + k); // 50
}
function test3() {
console.log("--- test3 실행 ---");
console.log("i=" + i); // 전역 변수 10 (test2의 지역변수 i와는 무관)
console.log("this.i=" + this.i); // 전역 변수 10
console.log("k=" + k); // test2에서 생성된 전역 변수 50
// 1. 반복문 수정: index 변수를 사용하도록 조건식 수정 (i<=10으로 두면 무한루프 위험)
// 전: index를 출력하기 위해 반복문 밖에서도 볼 수 있게 var로 유지
for (var index = 0; index <= 10; index++) {
// 반복문 수행
}
console.log("전: index=" + index); // var는 함수 스코프이므로 출력 가능 (결과: 11)
// 2. 블록 스코프 테스트
{
var nickName = "김도룽";
}
// 자바스크립트의 var 변수의 scope은 함수 단위이므로 {} 블록 밖에서도 접근 가능
console.log("후: index=" + index);
console.log("후: nickName=" + nickName);
}
test2();
test3();
</script>
</body>
</html>
📒 자바스크립트 변수와 스코프 (var vs let vs const)
1. 호이스팅 (Hoisting) 🚀
호이스팅은 선언문이 코드의 최상단으로 끌어올려진 것처럼 동작하는 자바스크립트의 독특한 특징입니다.
- var: 선언과 초기화(undefined)가 동시에 호이스팅됩니다. 선언 전에 호출해도 에러가 나지 않고 undefined를 반환합니다.
- let / const: 선언은 호이스팅되지만, 초기화는 되지 않습니다. 선언 전에 접근하려고 하면 **참조 에러(ReferenceError)**가 발생합니다. 이를 TDZ(Temporal Dead Zone) 구간이라고 부릅니다.
2. 스코프 (Scope) 🔍
변수에 접근할 수 있는 유효 범위를 말합니다.
| 구분 | 유효 범위 (Scope) | 설명 |
| var | 함수 레벨 스코프 | 함수 내부에서 선언되면 함수 전체에서 유효. {} 블록은 무시함. |
| let / const | 블록 레벨 스코프 | {} 블록(if, for, while, function 등) 내부에서만 유효. |
💡 var vs let 결과 차이점 (노션 정리용)
1. 반복문 변수 (index)
- var 사용 시: for문이 끝나도 함수가 끝나기 전까지 index 값이 메모리에 남아 있어 11이 출력됩니다.
- let 사용 시: for문의 { } 블록이 끝나는 순간 index는 메모리에서 사라집니다. 따라서 밖에서 호출하면 "index is not defined" 에러가 발생합니다.
2. 블록 변수 (nickName)
- var 사용 시: 단순 중괄호 { }는 스코프를 형성하지 못하므로 밖에서도 호출 가능합니다.
- let 사용 시: 중괄호 { }를 하나의 독립된 구역으로 인정합니다. 밖에서는 내부를 들여다볼 수 없으므로 호출 시 에러가 발생합니다.
//선언적 함수 스타일이 아닌 표현식으로 선언하면 중복되는 함수이름을 사용할 수 없다.
let test04 = function (){
alert("출력되나요?");
}
test04();'Dev > React' 카테고리의 다른 글
| 자바스크립트 함수선언방식 | 함수선언방식, 함수표현식, 화살표함수, function생성자 함수 , window객체 주요함수 (0) | 2026.03.30 |
|---|---|
| 자바스크립트 prmot 입력창 값 (0) | 2026.03.26 |
| [JS] 등록form 이메일 유효성 체크 및 JavaScript 적용 예제 (0) | 2026.03.26 |
| Display - flex , grid (0) | 2026.03.25 |
| CSS margnin padding ,position (0) | 2026.03.25 |