자바스크립트 데이터 형변환에는 어떤 것들이 있나요?

키워드
암시적 형변환, 명시적 형변환

자바스크립트에서는 생각보다 다양한 형변환이 일어난다. 이를 크게 2개로 분류할 수 있는데, 코드가 실행됨에 따라 엔진이 필요성을 느끼고 타입을 변형시키는 암시적 형변환 implicit type conversion 과 개발자의 의도에 의해 타입을 변형시키는 명시적 형변환 explicit type conversion 으로 나눌 수 있다.

암시적 형변환

산술 연산에 의한 변환

• + 의 경우 숫자보다 문자열이 우선시 된다. 문자열과 다른 타입이 만나면 상대 타입은 문자로 변환된다.
• + 외 다른 산술 연산자 %, /, -, * 는 문자열보다 숫자가 우선시 된다. 숫자와 다른 타입이 만나면 상대 타입은 숫자로 변환된다.

  // + 
  number + number // number
  number + string // string
  string + string // string
  string + boolean // string
  number + boolean // number
  
  // %, /, -, *
  string * number // number
  string * string // number
  number * number // number
  string * boolean //number
  number * boolean //number

비교 연산자

• 비교 연산자 가운데 엄격하지 않은 비교 == 의 경우, 비교하기 전 두 피연산자를 같은 타입으로 변화시킵니다. 여기서 중요한 점은 타입만 변화시키지 값은 변화시키진 않습니다.

  // == 
  "10" == 10 // true
  true == 1  // true
  0 == " " // true
  0 == null // true
  0 == NaN // false
  
  // 타입만 변화시킨다.
  true == 100 // false

boolean 조건문

• 값을 평가하는 경우, 필요에 따라 값을 boolean 으로 형변환 합니다. 예를 들어 조건문에서 숫자 0 은 false 로 이외의 숫자는 true 로 변환합니다. (음수 역시도 true 로 형변환 됩니다)

명시적 형변환

형변환 함수

• 자바스크립트에는 데이터 형변환을 가능하게 하는 내장 메서드가 존재합니다.
• Number(), String() , Boolean()

  Number() // number
  String() // string
  Boolean() // boolean
  

toString()

• toString() 메서드는 모든 데이터 유형의 값을 문자열로 변환하는 것이 가능합니다.

valueOf()

• valueOf() 메서드는 모든 데이터 유형의 값을 원시 값으로 변환하는 것이 가능하다.
• toString() 과 valueOf() 의 차이가 있다고 하는데, 너무 복잡하고 취업에 도움이 되나 싶은 항목이다.

  // 메서드 재정의
  var x = {
      toString: function () { return "foo"; },
      valueOf: function () { return 42; }
  };
  
  alert(x); // foo
  "x=" + x; // "x=42"
  x + "=x"; // "42=x"
  x + "1"; // 421
  x + 1; // 43
  ["x=", x].join(""); // "x=foo"
  
  // 요약하자면
  // valueOf() 연산을 위한 값. 원시 값을 뱉어서 연산에 필요한 기능 제공한다.
  // toString() 문자열로 표시할 값. 오로지 문자열로만 표시하기 위해 사용한다.

parseInt(), parseFloat()

• parseInt() : 문자열을 정수로 반환하는 것이 가능하다. 문자열이 0 으로 시작하면 8진수 0x 로 시작하면 16진수로 변환한다. 앞부분 빈 공백은 숫자 변환 시 무시되며, 숫자로 표현할 수 없는 글자가 포함되어 있다면 NaN 의 반환한다.
• parseFloat() : 문자열을 부동소수점 숫자로 변환하다. 앞부분 빈 공백은 숫자 변환 시 무시되며, 숫자로 표현할 수 없는 글자가 포함되어 있다면 NaN 을 반환한다.

toFixed()

해당 메서드의 인자만큼 반올림하여 소수점을 표현한다. 만약 들어가는 인자가 기존 소수점 자리보다 많다면 남은 자리를 0 으로 채운다. 이때 반환 값은 string 타입으로 반환되니 유의하자.

단항 연산자를 이용한 변환

이러한 형변환도 가능하다고 하니 참조하자.

+'1000'; // 1000
+'-1000'; // -1000
+'Infinity'; // Infinity
-'1000'; // -1000
+true; // 1
+[]; /// 0
+false; // 0
+null; // 0
+'';// 0

참고
(JS) 자바스크립트의 형변환(Type Casting)
valueOf 메소드, 뭐하러 있냐?
JavaScript 자바스크립트 형변환 - Int, String 바꾸기
자바스크립트의 형변환은 두가지다
JavaScript / 연산자 / 비교 연산자
Javascript에서 String을 Number타입으로 바꾸기 :: Outsider's Dev Story