[TIL] JavaScript 형변환

Javascript는 느슨한 언어이므로 변수 선언시 타입을 지정하지 않기 때문에 개발자가 명시적으로 타입을 지정해주기도 하고, 자바스크립트 엔진 내에서 암시적으로 타입을 변한하기도 한다.

 

명시적 타입 변환이나 암시적 타입 변환이나 기존 원시값을 직접 변경하는 것은 아니다. 원시값은 변경 불가능한 값이므로 변경할 수 없다. 타입 변환이란 기존 원시 값을 사용해 다른 타입의 새로운 원시 값을 생성하는 것이다.

 

자바스크립트가 느슨한 언어이기에 정확한 코드를 작성하기 위해서는 형변환의 원리를 꼭 알고 가야되겠구나 생각했다.

 

 

(1) 명시적 형변환(explicit coercion)

개발자가 의도적으로 값의 타입을 변환하는 것을 명시적 타입 변환 또는 타입 캐스팅이라고 한다. 명시적 형변환(explicit coercion)은 Number(”123”)처럼 프로그래머의 코드에서 명시적으로 자료형을 정해서 변환하는 과정이다. 말 그대로 명시! 하겠다는 의미다!! 대표적으로 Number(), parseInt(), parseFloat(), String(), Boolean() 등이 있다.

Javascript에서의 형변환은 세가지가 있다.

• String으로 형변환
• Number로 형변환
• Boolean으로 형변환

또, 원시 타입과 객체(Object)에 대해 형변환이 다르게 적용된다.

• Javascript의 원시 타입 형 변환
  • String으로 형변환 
  • String(12345) // "12345" String(-3.14) // "-3.14" String(true) // "true" String(false) // "false" String(undefined) // "undefined" String(null) // "null" String(Bigint(42)) // "42"
  • 명시적 형변환은 String() 함수를 쓰면 된다. String 형변환은 자연스럽다. 출력하는 형태 그대로 반환이 된다.
  • Number로 형변환
  • Number(null) // 0 Number(undefined) // NaN Number(true) // 1 Number(false) // 0 Number(" 12 ") // 12 Number("-12.34") // -12.34 Number("\\n") // 0 Number(" 12s ") // NaN Number(123) // 123
  • Boolean으로 형변환
  • Boolean('') // false Boolean(0) // false Boolean(-0) // false Boolean(NaN) // false Boolean(null) // false Boolean(undefined) // false Boolean(false) // false Boolean({}) // true Boolean([]) // true Boolean(Symbol()) // true Boolean(function() {}) // true

 

 

(2) 암시적 형변환 (implicit coercion)

개발자의 의도와는 상관없이 표현식을 평가하는 도중에 자바스크립트 엔진에 의해 암묵적으로 타입이 변환되는 것을 암시적 형변환이라고 한다. 암시적 형변환(implicit coercion)은 비교, 산술, 논리 연산자 사용으로 인해 자바스크립트 엔진이 필요에 따라 자동으로 타입을 변환하는 형변환이다. 대표적인 예시로 ==, +, > 등 연산자의 사용이 있다. 예외적으로 === 는 형변환이 일어나지 않는다. 암시적 형변환을 잘 이용하면 더욱 가독성 있는 코드를 작성할 수 있지만, Javascript는 느슨한 타입의 언어이기 때문에 자칫 잘못하면 프로그램의 버그가 될 수 있다.

 

 

- Javascript의 원시 타입 형 변환

• String으로 형변환
  연산자 사용시 피연산자 중 문자열이 하나라도 있으면 String 타입으로 형변환 된다. undefined나 null도 문자열로 변환된다.
  
  
• Number로 형변환

  "2" + "2" //22
  
  // Number로 형변환
  "2" - "2" //0
  "2" * "2" //4
  "2" / "2" //1
  [0] - 1 //-1
  

  
  숫자 이외의 글자가 들어있는 문자열, 배열 및 undefined는 숫자타입으로 변환되지 않고 NaN(Not a Number)를 반환한다.
  
  
• 엄격하지 않은 동등 비교 (==)

"hello" - 1 //NaN
["hello"] -1 // NaN
undefined - 1 // NaN

• + 연산자를 제외한 산술연산자 사용시 (-,/,*,>,< 등) 사용시 Number Type으로 변환된다.

true == 1;    // true  (true를 1로 변환) 
false == 0;   // true  (false를 0으로 변환)
'1' == true;  // true  ('1'를 true로 변환)
'1' == 1;     // true  ('1'를 1로 변환)

• 논리연산자(!!)

const arr = []
!!arr //true