1. 자바 스크립트 변수(Variable)
1️⃣ 변수란?
프로그램에서 데이터를 저장하고 사용하기 위해 이름을 붙여 저장하는 공간
let age =20;2️⃣ 자바스크립트 변수 선언 방식
1) var (옛 방식)
var x =10;✔️ 함수 스코프(function scope)
✔️ 호이스팅됨 (선언이 위로 끌어올려짐)
❌ 블록 스코프 지원 안함 (
if, for 내부에서도 밖에서 접근 가능)❌ 예측 어려움 → 요즘 거의 사용하지 않음
2) let (가장 기본)
let y =20;✔️ 블록 스코프(block scope)
✔️ 재할당 가능 (
y = 30 가능)✔️ 호이스팅되지만 초기화 전 사용 불가 (TDZ 존재)
➡️ 일반 변수 선언은
let 권장3) const (상수)
const z =30;✔️ 블록 스코프
❌ 재할당 불가
✔️ 값 변경이 안 되는 것이 아니라 변수 바인딩을 바꿀 수 없음
const arr = [1,2];
arr.push(3);// 가능
arr = [4,5];// 불가능 ❌➡️ 변하지 않는 값 또는 객체 참조를 고정할 때 사용
3️⃣ 스코프(Scope) 정리
변수가 유효한 범위
키워드 | 스코프 |
var | 함수 스코프 |
let | 블록 스코프 |
const | 블록 스코프 |
4️⃣ Hoisting(호이스팅)
변수를 선언부가 코드 최상단으로 끌어올려지는 현상
console.log(a);// undefined
var a =5;let, const도 호이스팅은 되지만 초기화 전에는 사용불가 → TDZ(Temporal Dead Zone) 발생5️⃣ 재선언/재할당 비교
키워드 | 재선언 | 재할당 |
var | ⭕ 가능 | ⭕ 가능 |
let | ❌ 불가 | ⭕ 가능 |
const | ❌ 불가 | ❌ 불가 |
6️⃣ 값 저장 형태
- 자바스크립트 변수는 동적 타입(dynamic type)
→ 마음대로 타입 변경 가능
let a =10;
a ="hello";// 문제 없음- 기본 자료형: number, string, boolean, null, undefined, symbol, bigint
- 참조 자료형: object, array, function 등
2. 실습
1️⃣ 변수의 선언
// 변수 선언
let n1; // undefinded
console.log(n1);
기본 자료형 없고, 모든 것이 객체 → heap
값을 넣지 않으면 undefinded
2️⃣ 변수의 초기화
// 변수의 초기화
let n2 = 1;3️⃣ 변수의 타입
1) 숫자
// 변수의 타입 (동적타입=타입추론 - 실행 시에 타입 결정)
let n3 = 10; // number타입(숫자는 전부 number 타입)
console.log(typeof n3);
let n4 = 10.5;
console.log(typeof n4);
2) 문자열
let n5 = "문자열";
console.log(typeof n5);
// -> 용도 : 기본 문자열
let n6 = '문자열';
console.log(typeof n6);
// -> 용도 : '문자열 "안녕"'
let n7 = `문자열`;
console.log(typeof n7);
// -> 용도 : 변수를 문자열 안에 바인딩 가능/엔터 가능
let n6 = '문자열 "안녕"';
console.log(typeof n6);
console.log(n6);
let n7 = `문자열 ${n4}`;
console.log(typeof n7);
console.log(n7);
3) true/false
let n8 = true;
console.log(typeof n8);
console.log(n8);
4) null
let n9 = null;
console.log(typeof n9);
console.log(n9);
Share article