한양과기고 에듀테크 수업도구 대시보드

1정적 타이핑 vs 동적 타이핑

변수의 타입을 언제 확정하는가가 두 방식의 차이입니다. 정적 타이핑은 컴파일(실행 전) 시점에 타입이 고정되어 틀리면 실행 자체가 안 되고, 동적 타이핑은 실행 중에 값을 보고 타입을 그때그때 판단합니다.

TypeScript 정적 타이핑 — 컴파일 타임에 검사

function add(a: number, b: number): number { return a + b; } add(3, "5"); // ✗ 컴파일 에러: // Argument of type 'string' is not // assignable to parameter of type 'number'

장점: 실수를 실행 전에 잡아줍니다. 협업·대규모 프로젝트에서 안전.

JavaScript 동적 타이핑 — 실행 중에 결정

function add(a, b) { return a + b; } add(3, "5"); // → 에러 없이 실행됨 // → 결과: "35" (숫자가 문자열로 변환!)

주의: 실행은 되지만 개발자가 의도하지 않은 값이 나올 수 있습니다. 이런 자동 변환을 타입 강제 변환(Type Coercion)이라 부릅니다.

2JS의 암묵적 형변환 규칙

JS는 +, -, == 같은 연산자를 만나면 두 값의 타입을 강제로 맞춥니다. 핵심 흐름은 값을 원시값으로 먼저 바꾸는 ToPrimitive, 그다음 상황에 따라 ToString 또는 ToNumber로 좁히는 것입니다.

배열 [1,2]
object

toString()

"1,2"
string

+ 상대가 문자열?

그대로 이어붙이기

객체 {}
object

toString()

"[object Object]"
string

- 상대는 숫자로!

Number("[object Object]") = NaN

규칙 요약: +는 둘 중 하나라도 문자열이면 문자열 이어붙이기, 아니면 둘 다 숫자로 바꿔 더합니다. -, *, /는 문자열 여부와 상관없이 항상 숫자로 변환 후 계산합니다. ==는 타입이 다르면 규칙표에 따라 숫자로 맞춰서 비교하고, ===는 변환 없이 타입부터 다르면 바로 false입니다.

3변환 실험실 — 직접 조합해보기

왼쪽 값·연산자·오른쪽 값을 골라 실행하면, 실제 자바스크립트 엔진이 계산한 결과와 그 변환 과정을 보여줍니다.

"5" (문자열) + 5 (숫자) "55"

둘 중 하나 이상이 문자열 → 나머지도 문자열로 바꿔 이어붙이기(concat)
String("5") + String(5) = "55"

4JS의 괴상한 등식 모음

카드를 클릭하면 실제 계산 결과와 왜 그런 값이 나오는지 확인할 수 있습니다.