[Javascript] 형변환

💡

형 변환(Type Conversion) : 프로그래밍에서 자료형을 다른 형태로 변경하는 것.

명시적 형 변환

사용자가 원하는 형태로 직접 데이터의 타입을 변경하는 것

 

# 1. to String 

• String( )
  • 어떤 형태든 문자로 형변환 가능 (null, undefined ... )

String(111) // "111"
String(Undefined) // "Undefined"
String(NaN) // "NaN"
String(true) // "true"

 

• ( ).toString()
  • 2~36 사이의 값을 대입하면 숫자를 해당 진수로 변환한 문자열을 얻을 수 있음
  • 일반적으론 인자없이 사용해서 문자열을 얻음
  • String()과 달리 null, undefined를 .toString() 할 경우 오류 발생

let num = 25;
let str = num1.toString() // "25"
let str2 = num1.toString(2) // "11001"
(true).toString() // "true"

 

• ( ) + ""
  • 문자열 연결 연산자(+)를 활용해, 빈 따옴표 문자열을 더해주면 전체가 String으로 변환됨

111 + "" // "111"
true + "" // "true"
NaN + "" // "NaN"​

 

# 2. to Number

• Number( )
  • 인자를 소수점까지 포함된 숫자형으로 변환한다.
  • 문자열이 숫자로만 이루어지지 않는 경우 NaN으로 변환

Number("1"); //1
Number("11.11"); // 11.11
Number("1a2b3c"); // NaN
Number(true); // 1

• parseInt( )
  • 인자를 소수점 앞자리까지의 정수로 변환한다.

• parseFloat( )
  • 인자를 소수점 이하까지 포함한 실수로 변환한다.

parseInt("11.11"); // 11
parseFloat("11.11"); // 11.11

 

# 3. to Boolean

• Boolean( )
• !! (부정 논리연산자 두번) 
  • 인자를 true / false 로 변환한다.
  • Boolean = !! 과 동일하게 사용가능

// Number
Boolean(0); // false
Boolean(1); // true

Boolean(NaN); // false

Boolean(Infinity); // true

// String
Boolean(''); // false  빈문자열만 false
Boolean('   '); // true 공백이 하나라도 들어가면 true. 나머지 모두 true

// Object, Array : 배열 객체는 모두 true
Boolean({}); // true
Boolean([]); // true

// Undefined, null : 둘다 false
Boolean(undefined); // false
Boolean(null); // false

 

암시적 형 변환

엔진에 의해 자동으로 형 변환이 이루어 지는 것

 

# 1. String Type

• 연결연산자(+) 사용시 피연산자 중 문자열이 하나라도 있으면 String Type으로 변환됨.
• undefined, null 도 문자열로 변환됨

let a = "123"; //문자열
let b = 123; //정수

a+b; // "123123"

 

# 2. Number Type

• 연결연산자(+) 를 제외한 산술연산자(-,/,*,>,<...등)는 사용시 피연산자 중 문자열이 하나라도 있어도 Number Type으로 변환된다.

2 * "2"  // 4 Number
1 + true // 2 : number
6 / "3" // 2 : number

 

---

자료형 비교시 유의할 것

동등연산자(==)와 일치연산자(===)

• 동등연산자(==) : 피연산자의 리터럴만 비교.
• 일치연산자(===) : 피연산자의 리터럴과 자료형 타입까지 비교. 일치연산자를 지향하는 것이 좋다.

let a = true;
let b = 1;

a == b; // true
a === b; // false

💡

변수의 값이 어떤 자료형인지 모를때 : typeof 변수명

 

 

참고 링크