[Javascript] 형변환(1) - 명시적 형변환

 

  Javascript는 동적 타입 언어로 변수의 타입을 미리 선언할 필요가 없다. 

  Javascript는 컴파일 과정 없이 실행과 동시에 해석하는 인터프리터 언어다. 그런 원리에서 코드가 실행되는 과정에서 상황에 따라 값의 타입이 유연하게 바뀔 수 있는 것이다. 

 

명시적 형변환

  명시적 형변환은 말 그대로 명시적으로, 즉 의도적으로 형변환을 하는 경우에 해당한다.

  명시적 형변환은 주로 String, number, boolean 타입으로 이루어진다. 어떤 값의 타입을 의도적으로 변경해서 사용하겠다는 의미기 때문이다. symbol은 자주 사용되지 않고 null과 undefined는 자료형인 동시에 값이므로 필요한 경우 그 값을 할당하면 된다.

  따라서 이 세 종류의 명시적 형변환을 위해 각각 String(), Number(), Boolean() 함수를 사용할 수 있다.

 

---

 

String()

String(123); // 123

String(NaN); // NaN

String(1 / 0); // Infinity

String(-1 / 0); // -Infinity

String(true); // true

String(false); // true

String(undefined); // undefined

String(null); // null

String({name: 'developer'}); // [object Object]

  문자열이 아닌 값을 문자열로 바꾸려면 위와 같이 String() 함수를 활용하면 되는데, 소괄호 안에 값을 넣어주면 그 값이 문자열로 변한다.

  문자열로의 형변환은 간단해 보인다. 크게 특별한 점 없이 따옴표를 감싸준 결과가 나타난다. 또한 위와 같이 내부에 연산식을 넣을 경우 연산의 결과를 문자열로 반환하는데 Javascript에서 숫자를 0으로 나누면 Infinity 값이 나타난다.

  한 가지 특징적인 점은 마지막 예시인데 객체의 경우 [object Object]가 출력된다. 만약 우리가 바라보는 객체의 모습 그대로를 문자열로 만들고 싶다면 JSON 객체의 stirngify()를 사용해야 한다.

 

JSON.stringify({name: 'developer'}); // {"name": "developer"}

 

---

 

Number()

  숫자가 아닌 값을 숫자로 바꾸기 위해서는 Number() 함수를 활용한다.

Number(''); // 0

Number('abc'); // NaN

Number('123'); // 123

Number('123a'); // NaN

Number(true); // 1

Number(false); // 0

Number(null); // 0

Number(undefined); // NaN

Number({name: 'developer'}); // NaN

Number({}); // NaN

쉽게 생각해서 숫자가 아닌 값들은 모두 NaN으로 출력될 것 같지만 NaN이 아닌 것들이 있다.

가장 먼저 볼 수 있는 빈 문자열은 0으로 변환된다.

그리고 '123'과 같이 따옴표를 벗겨냈을 때 온전히 숫자로 사용이 가능한 문자열은 숫자로 변환된다.
그러나 '123a'와 같이 숫자와 문자가 혼합된 문자열은 NaN으로 변환된다.

또한 boolean 값은 true가 1, false가 0으로 변환된다.
비슷한 의미의 null과 undefined는 차이를 보이는데, null은 0으로 변환되지만, undefined는 NaN으로 변환된다.

마지막으로 빈 객체는 그대로 NaN값으로 변환된다.

 

 

---

 

 

parseInt(), parseFloat()

 

// 첫 문자가 숫자인 경우 parseInt는 정수형으로 해석이 가능한 만큼 숫자로 변환한다.
parseInt('123a'); // 123

parseInt('1.23a'); // 1


// 첫 문자가 숫자이거나 소숫점인 경우 parseFloat은 소수형으로 해석이 가능한 만큼 숫자로 변환한다.
parseFloat('1.23a'); // 1.23

parseFloat('.23a'); // 0.23


// 첫 문자가 문자일 경우는 NaN값으로 변환한다.
parseInt('a123'); // NaN

parseFloat('a1.23'); // NaN

  '123a'와 같이 숫자와 문자가 혼합된 경우에도 숫자로 시작하는 문자열인 경우 parseInt() 혹은 parseFloat() 함수를 사용하면 숫자 형태로 변환이 가능하다.

 

 

---

 

 

Boolean()

Boolean(""); // false

Boolean("abc"); // true

Boolean("123"); // true

Boolean("0"); // true

Boolean(0); // false

Boolean(123); // true

Boolean(NaN); // false

Boolean(null); // false

Boolean(undefined); // false

Boolean({name: 'developer'}); // true

Boolean({}); // true

  Boolean()은 true 혹은 false 중 하나의 값으로 변형되는데 쉽게 생각해서 어떤 값이 있는 듯한 뉘앙스를 가진 값들은 true로, 나머지는 false로 변환된다.

  그런 점에서 null과 undefined는 false로 변환되는 것을 예상할 수 있는데, 독특한 부분은 빈 문자열과 숫자 0, 그리고 NaN은 false로 변환된다는 점이다.

  한편 숫자 0이 false로 변환되는 것에 반해 문자열 "0"의 경우 true로 변환된다.

  마지막 예시의 빈 객체 또한 true로 변환된다.

  여기서 확인된 undefined, null, 0, NaN, ""를 falsy라 하고 반대로 이 값을 제외한 모든 값들을 truthy라 한다.

 

 

 

참고자료

bigtop.tistory.com/18?category=800038