자바스크립트의 '동적 타이핑'과 '형 변환'에 대하여

자바스크립트는 동적 타이핑 언어입니다.

✅ 변수를 선언할 때 타입을 정하지 않아도 되고,
✅ 값을 넣는 순간 타입이 자동으로 정해집니다.
✅ 나중에 다른 타입의 값으로 바꾸는 것도 가능합니다.

 

정적 타이핑 언어는 선언한 타입에 맞는 값만 할당할 수 있습니다.

//정적 타이핑 언어
char c; //선언한 타입에 맞는 값만 할당

int num;  //변수 선언 시점에 변수 타입이 결정되고 변경할 수 없음
num = "hello"; // ❌ 오류 발생 (타입 불일치)

 

반면에, 동적 타이핑 언어는 타입 변경이 가능합니다.

//동적 타이핑 언어
let value = 10;      // 숫자로 시작
value = "hello";     // 나중엔 문자열로 변경!
value = true;        // 불린 값으로도 변경 가능!

 

이처럼 자바스크립트는 동적 타이핑 언어이기때문에, 

값이 필요한 상황에 따라 자동으로 다른 자료형으로 바뀌기도 합니다. 

 

동적 타이핑 언어 Tip!

팁	이유
정말 필요한 변수만 만들기	코드가 깔끔해지고 실수도 줄어든다
변수의 범위(스코프)를 좁게 유지	예상치 못한 값 변경 방지한다
전역 변수는 피하기	어디서든 값이 바뀔 수 있어서 위험하다
가능하면 const를 사용하기	값을 바꾸지 않게 해서 안정성이 높아진다
의미 있는 변수 이름 사용하기	코드 읽기 쉬워지고, 실수를 줄여준다.

 

 

명시적 변환 vs 암묵적 변환

타입을 변경하는 방법으로는 명시적 변환과 암묵적 변환이 있습니다.

• 명시적 변환 (Explicit): 개발자가 직접 바꿈. String(123), Boolean(0);
• 암묵적 변환 (Implicit): 자바스크립트가 자동으로 바꿈 123 + "px" → "123px";

📌문자형 변환

• 명시적으로 변환: String() 사용
• 암묵적 변환: 덧셈 연산(+)에서 하나라도 문자열이면 나머지도 문자열로 변환

//명시적 변환
String(123) //"123"

//암묵적 변환
console.log(1 + "2");   // "12"
console.log("1" + true);   // "1true"
console.log("1" + {});   // "1[object Object]"
console.log("1" + null);   // "1null"
console.log("1" + undefined);   // "1undefined"

📌 숫자형 변환

• 명시적으로 변환: Number() 사용
• 암묵적 변환: 뺄셈(-), 나눗셈(/), 비교 연산자(<, >, == 등) 등을 사용하는 경우 숫자형으로 변환

//명시적 변환
Number("   123   "); // 123
Number("123z");      // NaN ("z"를 숫자로 변환하는 데 실패함)
Number(true);        // 1
Number(false);       // 0
Number(undefined)    //NaN
Number(null)        //0
//이때, 빈 문자열("")이나 공백 문자열(" ")은 0으로 변환


//암묵적 변환
console.log(1 - "2");   // -1
console.log("2" * "3");   // 6 //수학 표현식이 있으면 자동변환
console.log(4 + +"5");   // 9

📌 불린형 변환

• 명시적으로 변환: Boolean() 사용
• 암묵적 변환: 조건문(if, while, 삼항연산자)에서 자동으로 Boolean으로 변환

//명시적 변환
console.log(Boolean(0));   // false
console.log(Boolean(""));   // false
console.log(Boolean(null));   // false
console.log(Boolean(undefined));   // false
console.log(Boolean(NaN));   // false
console.log(Boolean("false"));   // true
console.log(Boolean({}));   // true


//암묵적 변환
if ("hello") { ... }   // 문자열은 true
if (0) { ... }         // 숫자 0은 false
//0, 빈 문자열(""), null, undefined, NaN은 false로 변환됩니다. 그 외의 값은 true로 변환

 

⚠️ 주의해야 할 타입 변환 예시

Number("   ")      // 0  ← 공백만 있어도 숫자 0으로 변환
Boolean("0")       // true ← 빈 문자열만 false, "0"은 true
"5" - "2"          // 3 ← 문자열끼리도 숫자 연산 가능
"5" + 1            // "51" ← 이건 문자열 덧셈​