변수와 타입

var/let/const의 차이, 6가지 원시 타입, typeof 연산자, 명시적·암묵적 형변환, 그리고 백틱으로 작성하는 템플릿 리터럴을 익힙니다.

JavaScript변수타입

소요 시간

⏱ 30~60분

난이도

📊 초보

선수 조건

🎯 css-07

결과물

타입 안전하게 변수를 선언·변환·조합하는 능력

이 강의에서 배우는 것

1var/let/const의 스코프·재선언·재할당 차이를 안다
2string/number/boolean/null/undefined/symbol을 구분한다
3typeof 연산자로 타입을 확인한다
4Number()/String()/parseInt() 명시적 변환을 사용한다
5백틱(`)과 ${}로 템플릿 리터럴을 작성한다

1. 변수 선언

var (구식, 사용 지양)

javascript

var name = "홍길동";
var name = "이순신";  // 재선언 가능 → 버그 위험
name = "강감찬";     // 재할당 가능

함수 스코프
호이스팅: 선언이 위로 끌어올려져 undefined로 시작

let (변수)

javascript

let age = 25;
// let age = 30;  // 재선언 불가
age = 30;          // 재할당 가능

블록 스코프 — { } 안에서만 유효.

const (상수)

javascript

const PI = 3.14159;
// PI = 3.14;  // 재할당 불가

const user = { name: "홍길동" };
user.name = "이순신";  // 객체 내부는 변경 가능

비교

	재선언	재할당	스코프
var	가능	가능	함수
let	불가	가능	블록
const	불가	불가	블록

💡

기본은 const, 값이 변경될 때만 let. var는 사용하지 않습니다.

2. 원시 타입 6가지

javascript

// string
const greeting = "안녕하세요";
const sentence = `제 이름은 ${name}입니다.`;

// number
const integer = 42;
const float = 3.14;
const infinity = Infinity;
const notANumber = NaN;

// boolean
const isLoggedIn = true;

// null (의도적 빈 값)
let selectedItem = null;

// undefined (할당되지 않음)
let uninitializedVar;

// symbol (고유 식별자)
const id = Symbol("id");

3. typeof 연산자

javascript

typeof "안녕"        // "string"
typeof 42            // "number"
typeof true          // "boolean"
typeof undefined     // "undefined"
typeof null          // "object" ← 유명한 버그
typeof {}            // "object"
typeof []            // "object"
typeof function(){}  // "function"

4. 형변환

명시적

javascript

String(42)            // "42"
Number("42")          // 42
Number("abc")         // NaN
parseInt("42px")      // 42
parseFloat("3.14abc") // 3.14

Boolean(0)            // false
Boolean("")           // false
Boolean(null)         // false
Boolean("hello")      // true

암묵적

javascript

"5" + 3      // "53"  (숫자 → 문자열)
"5" - 3      // 2     (문자열 → 숫자)
"5" * "3"    // 15
true + 1     // 2
false + 1    // 1

5. 템플릿 리터럴

javascript

const name = "홍길동";
const age = 25;

// 기존 방식
const m1 = "안녕하세요, " + name + "님! 나이는 " + age + "세입니다.";

// 템플릿 리터럴
const m2 = `안녕하세요, ${name}님! 나이는 ${age}세입니다.`;

// 여러 줄
const multiLine = `
  첫 번째 줄
  두 번째 줄
`;

// 표현식
const result = `10 + 20 = ${10 + 20}`;

예제 코드 / 강의 자료

전체 강의 자료와 예제 코드는 GitHub에서 자유롭게 받아볼 수 있습니다.

GitHub에서 보기 ↗