[Javascript] JS 형변환 총 정리

JavaScript 형변환 정리

변환 방식방법예제

문자열 변환	String(x)	String(123) → "123"
	.toString()	(true).toString() → "true"
	x + ""	123 + "" → "123"
숫자 변환	Number(x)	Number("10") → 10
	parseInt(x) / parseFloat(x)	parseInt("10px") → 10
	+x	+"10" → 10
불리언 변환	Boolean(x)	Boolean(0) → false
	!!x	!!"hello" → true
JSON 변환	JSON.stringify(x)	JSON.stringify({a:1}) → '{"a":1}'
	JSON.parse(x)	JSON.parse('{"a":1}') → {a:1}

 

 

 

🔹1. 암묵적(자동) 형변환 (Type Coercion)

JavaScript는 연산자에 따라 자동으로 타입을 변환할 수 있

✅ 문자열 변환 (String Conversion)

문자열이 아닌 값을 문자열로 변환할 때 자동으로 변환

 

console.log(123 + "");       // "123"
console.log(true + "");      // "true"
console.log(null + "");      // "null"
console.log(undefined + ""); // "undefined"
console.log([1, 2, 3] + ""); // "1,2,3"

---

✅ 숫자 변환 (Number Conversion)

산술 연산 시 문자열이 숫자로 변환될 수 있어.

console.log("10" - 0);       // 10
console.log("10" * 2);       // 20
console.log("10" / 2);       // 5
console.log("10" - "2");     // 8
console.log("10px" - 2);     // NaN (숫자가 아님)
console.log(true + 1);       // 2 (true → 1)
console.log(false + 1);      // 1 (false → 0)
console.log(null + 1);       // 1 (null → 0)
console.log(undefined + 1);  // NaN (undefined는 숫자로 변환할 수 없음)

 

---

✅ 불리언 변환 (Boolean Conversion)

조건문에서 false로 취급되는 Falsy 값들은 false로 변환돼.

false

 

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));    // false

 

true

console.log(Boolean(1));        // true
console.log(Boolean("hello"));  // true
console.log(Boolean([]));       // true (비어 있어도 true)
console.log(Boolean({}));       // true (비어 있어도 true)
console.log(Boolean(" "));      // true (공백 문자열도 true)

---

🔹 2. 명시적(수동) 형변환 (Explicit Type Conversion)

명확하게 변환하려면 형변환 함수를 사용

✅ String() (문자열 변환)

console.log(String(123));      // "123"
console.log(String(true));     // "true"
console.log(String(null));     // "null"
console.log(String(undefined));// "undefined"
console.log(String([]));       // ""
console.log(String([1, 2, 3])); // "1,2,3"
console.log(String({}));       // "[object Object]"

---

✅ Number() (숫자 변환)

console.log(Number("123"));      // 123
console.log(Number(" 123 "));    // 123 (공백 무시)
console.log(Number("123abc"));   // NaN (숫자로 변환 불가)
console.log(Number(true));       // 1
console.log(Number(false));      // 0
console.log(Number(null));       // 0
console.log(Number(undefined));  // NaN
console.log(Number([]));         // 0
console.log(Number([1, 2, 3]));  // NaN
console.log(Number({}));         // NaN

 

---

✅ Boolean() (불리언 변환)

console.log(Boolean(0));        // false
console.log(Boolean(1));        // true
console.log(Boolean(""));       // false
console.log(Boolean("hello"));  // true
console.log(Boolean([]));       // true
console.log(Boolean({}));       // true
console.log(Boolean(null));     // false
console.log(Boolean(undefined));// false

---

🔹 3. 특수 형변환

✅ parseInt() / parseFloat() (문자열을 숫자로 변환)

Number()와 다르게, 문자열에서 숫자 부분만 추출해서 변환할 수 있다

console.log(parseInt("100px"));    // 100
console.log(parseInt("12.34"));    // 12
console.log(parseFloat("12.34"));  // 12.34
console.log(parseInt("abc"));      // NaN
console.log(parseFloat("0.1e3"));  // 100

---

✅ toString() (숫자, 불리언, 객체 등을 문자열로 변환)

console.log((123).toString());  // "123"
console.log((true).toString()); // "true"
console.log((false).toString());// "false"
console.log([1, 2, 3].toString()); // "1,2,3"
console.log(({}).toString()); // "[object Object]"

---

✅ JSON.stringify() / JSON.parse()

객체를 JSON 문자열로 변환하거나 JSON 문자열을 객체로 변환할 때 사용해.

const obj = { name: "John", age: 30 };
const json = JSON.stringify(obj);
console.log(json); // '{"name":"John","age":30}'

const parsed = JSON.parse(json);
console.log(parsed); // { name: 'John', age: 30 }

---

🔹 4. 기타 형변환 연산자

✅ 단항 + 연산자 (숫자 변환)

console.log(+"10");  // 10
console.log(+true);  // 1
console.log(+false); // 0
console.log(+null);  // 0
console.log(+undefined); // NaN
console.log(+[]);    // 0
console.log(+{});    // NaN

---

✅ !! (불리언 변환)

console.log(!!1);      // true
console.log(!!0);      // false
console.log(!!"hello"); // true
console.log(!!"");     // false
console.log(!![]);     // true
console.log(!!{});     // true