자바스크립트 변수 — var·let·const와 타입이 헷갈리는 이유

변수는 값을 담아 두고 이름으로 꺼내 쓰는 그릇입니다. 자바스크립트는 그릇을 만드는 키워드가 셋이나 되고 담긴 값의 종류까지 바꿔 버려 입문자가 자주 미끄러집니다. 이 글에서는 세 키워드를 비교하고 자료형과 자동 변환의 함정, 배열·객체·템플릿 리터럴을 확인합니다.

var·let·const를 표로 비교합니다

세 키워드는 “값을 다시 넣을 수 있는가”와 “이름이 통하는 범위”에서 갈립니다.

키워드	재할당	같은 이름 재선언	유효 범위
`var`	가능	가능	함수 단위
`let`	가능	불가(오류)	중괄호 블록 단위
`const`	불가	불가(오류)	중괄호 블록 단위

var noteTitle = "카드뉴스 1편";
var noteTitle = "카드뉴스 2편";   // 조용히 덮어써집니다

let postCount = 3;
postCount = 4;                    // 재할당은 됩니다
// let postCount = 5;             // 오류: 재선언 불가

const siteName = "카드뉴스노트";
// siteName = "다른이름";         // 오류: 재할당 불가

가장 위험한 것이 var의 재선언입니다. 멀리 떨어진 곳에서 같은 이름을 또 선언해도 오류 없이 값만 덮어써집니다. 기본은 const, 값을 바꿔야 할 때만 let, var는 쓰지 않는 것이 표준 습관입니다.

원시 타입 여섯 가지

더 이상 쪼갤 수 없는 기본 값을 원시 타입이라 부릅니다. 종류는 typeof로 확인합니다.

console.log(typeof "카드뉴스");   // string — 글자
console.log(typeof 17);           // number — 정수와 소수
console.log(typeof true);         // boolean — 참/거짓
console.log(typeof undefined);    // undefined — 값을 아직 넣지 않음
console.log(typeof null);         // object — 비어 있음(표시는 object)
console.log(typeof Symbol("id")); // symbol — 고유한 이름표

null의 typeof가 object로 나오는 것은 초기부터 남은 유명한 버그입니다. undefined는 “아직 넣지 않은 상태”, null은 “비었다고 일부러 넣은 값”으로 구분하면 됩니다.

타입이 저절로 바뀌는 함정

서로 다른 종류의 값을 계산하라고 하면 오류를 내는 대신 한쪽을 몰래 바꿔 버립니다. 이를 자동 형 변환이라고 합니다.

console.log("3" + 2);    // "32"  — 더하기는 글자 붙이기로 처리
console.log("3" - 2);    // 1     — 빼기는 숫자 계산으로 처리
console.log(1 + true);   // 2     — true는 1로 바뀜

const input = "3";
console.log(Number(input) + 2);   // 5

입력창에서 받은 값은 숫자처럼 보여도 항상 글자입니다. 그래서 "3" + 2가 "32"가 되는 사고가 자주 납니다. 계산 전에 Number()로 바꾸는 습관을 들이십시오.

==와 ===는 다른 연산자입니다

==는 타입이 다르면 한쪽을 바꿔 비교하고, ===는 타입까지 같아야 참입니다.

비교식	`==` 결과	`===` 결과
`1`과 `"1"`	true	false
`0`과 `false`	true	false
`""`와 `0`	true	false

const postCount = 0;

if (postCount == false) {
  console.log("의도하지 않게 통과합니다");
}

if (postCount === 0 && typeof postCount === "number") {
  console.log("숫자 0일 때만 통과합니다");
}

첫 번째 조건은 false나 빈 문자열에도 똑같이 반응합니다. 특별한 이유가 없다면 항상 ===와 !==를 쓰십시오. 참고로 &&는 “그리고”, ||는 “또는”입니다.

배열·객체·템플릿 리터럴

값이 여러 개면 배열, 이름표가 붙은 묶음이면 객체를 씁니다. 글자와 값을 섞을 때는 백틱으로 감싸는 템플릿 리터럴이 편합니다.

// 배열: 순서가 있는 목록, 번호는 0부터
const tagList = ["HTML", "CSS", "자바스크립트"];
console.log(tagList[2]);       // 자바스크립트

// 객체: 이름(키)과 값의 짝
const note = { title: "변수 정리", count: 12 };
console.log(note.title);       // 변수 정리
note.count = 13;

// 템플릿 리터럴: ${ } 안에 값을 끼워 넣습니다
const readerName = "지민";
console.log(`${readerName}님이 ${note.count}편을 읽었습니다.`);

const로 선언한 객체의 속성을 바꿀 수 있다는 점이 처음에는 이상합니다. const가 잠그는 것은 “그릇에 다른 것을 담는 일”이지 “그릇 안을 정리하는 일”이 아니기 때문입니다.

핵심 정리

선언 순서 — const가 기본, 필요할 때만 let, var는 쓰지 않습니다.
원시 타입 — 문자열·숫자·불리언·undefined·null·심벌 여섯 가지입니다.
자동 변환 — "3" + 2는 "32"입니다. 입력값은 Number()로 바꿔 계산합니다.
비교 연산자 — ==는 타입을 강제로 맞추므로 항상 ===를 씁니다.
리터럴 — 목록은 배열, 이름 붙은 묶음은 객체, 문자열 조립은 템플릿 리터럴입니다.

이어서 자바스크립트 함수 편을 읽어 보십시오. 자바스크립트가 처음이라면 자바스크립트 시작하기 편이 먼저입니다.