[JS] 명시적 형변환(explicit coercion), 암시적 형변환(implicit coercion)

자바스크립트는 변수 선언 시 타입을 지정하지 않기에 용도에 따라 개발자가 명시적으로 타입을 지정해주기도 하고, 자바스크립트 엔진 내에서 암시적으로 타입을 변환하기도 한다. 형변환의 원리는 코드를 간결하게 작성하고, 정확한 코드를 작성하기 위해서 꼭 한 번 짚고 넘어가야하는 개념이라고 생각했기에 명시적 형변환과 암시적 형변환에 대해 정리하고자 한다.

---

1. 형변환

앞서 언급한 바와 같이 형변환은 명시적으로 이뤄질 수도, 암묵적으로 이뤄질 수도 있다. 형변환에는 말그대로 코드 내에 String(), Number(), Boolean() 등의 함수를 사용하여 명시적으로 타입을 변환하는 명시적 형변환(explicit coercion)과 비교, 산술, 논리 연산자 이용시 자바스크립트 엔진이 필요에 따라 자동으로 타입을 변환하는 암시적 형변환(implicit coercion)이 있다.

---

2.명시적 형변환(explicit coercion)

1) String Type

String() : 인자를 문자열로 변환한다.
toString() : 인자로 기수를 받을 수 있다.

//String
String(22) // "22"

//toString
const foo = 22;
foo.toString()  //”22"
foo.toString(2) // "10110"

2) Number Type

Number() : 인자를 숫자로 변환한다.
parseInt() : 인자를 정수형의 숫자로 변환한다. 이때 인자가 숫자 0으로 시작할 경우 8진수로 변환하고, 0x로 시작한다면 16진수 숫자로 변환한다. 또한 앞 부분에 공백 뒤에 문자가 나오는 경우 NaN을 반환한다.

//Number
Number("123")  //123

//parseInt
parseInt(333.234) //333
parseInt(0134) // 92 (8진수)
parseInt(0x1b) // 27 (16진수)
parseInt(  "가나") //NaN

3) Boolean Type

Boolean : 인자를 불리언 값으로 변환한다.

Boolean("1") //true

//falsy value
값이 없는 경우
0
-0
null
false
NaN
undefinded
""

---

3.암시적 형변환(implicit coercion)

1) String Type

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

2) Number Type

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

"2" + "2" //22
"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

3) 엄격하지 않은 동등 비교 (==)

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

4) 논리연산자(!!)

const arr = []
!!arr //true

---

참고

• medium.com/gdana/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EC%9D%98-%ED%98%95%EB%B3%80%ED%99%98%EC%9D%80-%EB%91%90%EA%B0%80%EC%A7%80%EB%8B%A4-b46875be4a88
  velog.io/@yejinh/Javascript-%ED%98%95%EB%B3%80%ED%99%98