Javascript 타입 변환

타입 변환이란 값의 타입을 다른 타입으로 변환시키는 것을 의미합니다.
자바스크립트에는 개발자가 직접 타입을 변화시켜주는 명시적 타입 변환(타입 캐스팅)과 자바스크립트 엔진이 타입을 변경해주는 암묵적 타입 변환(타입 강제 변환) 두 가지 타입 변환이 있습니다.

1. 명시적 타입 변환

변수나 함수등을 개발자가 직접 형변환을 시켜주는 명시적 타입 변환입니다.
기본적으로 Number,String,Boolean등이 있고 그외에도 parseInt,parseFloat와 같은 형변환 함수들이 존재합니다.

1.1 숫자 타입으로 변환

• Number()

Number("12")       //12
Number(true)       //1
Number(false)      //0
Number("12Num")    //NaN
Number(null)       //0
Number(undefined)  //NaN

• parseInt()

parseInt("12",10)  //12
parseInt("12",8)   //10
parseInt("11",2)   //3

parseInt 의 경우 문자열과 N진수가 파라미터로 들어오게되고 해당 문자열을 N진수 형태로 인식해 10진수로 변환시켜줍니다.
N진수의 기본값은 10진수 입니다.

• parseFloat()

parseInt("12.34")  //12.34

1.2 문자열 타입으로 변환

• String()

String(12)         //"12"
String(true)       //"true"
String(false)      //"false"
String(12.3)       //"12.3"
String(null)       //"null"
String(undefined)  //"undefined"

1.3 불리언 타입으로 변환

• Boolean()

Boolean("12")      //true
Boolean(0)         //true
Boolean([])        //true
Boolean(NaN)       //false
Boolean(null)      //false
Boolean(undefined) //false

2. 암묵적 타입 변환

암묵적 타입 변환이란 개발자가 직접 데이터 타입을 변환시키는 것이 아니라 자바스크립트 엔진이 자율적으로 변환시키는 것을 의미합니다.

2.1 숫자 타입으로 변환

기본적으로 +를 제외한 산술연산자(-,*,/,%)등을 사용하면 산술연산이 이루어집니다.

"10"*3 //30
"10"-3 //7
"10"/3 //3.3333
"10"%3 //1

2.2 문자열 타입으로 변환

하지만 +의 경우 문자열과 숫자가 만나게 되면 숫자를 문자열로 형변환하게 됩니다.
그 결과 +는 문자열을 이어 붙이는 기능을 수행합니다.

"10"+3   //"103"
3+"10"   //"301"
3+"10"+3 //"3103"

2.3 불리언 타입으로 변환

자바스크립트의 모든 값들은 true와 false값으로 변경될수 있습니다.
true로 형변환 되는 것을 truthy라고 하고 false로 형변환 되는 것을 falsy라고 합니다.

우선 falsy로 취급되는 값들은 다음과 같습니다.

[false, 0, -0, null, undefined, "", NaN]

이 값들을 제외한 모든 값들은 truthy로 취급됩니다.
이러한 특징을 사용해 다음과 같은 코드를 작성할수 있습니다.

const a = 0;
if(a){
  console.log(a);
}else{
  console.log("falsy");
}

위의 코드를 실행하면 0은 falsy이므로 "falsy"가 출력됩니다.

3.단축 평가

단축 평가란 논리연산을 수행할때 해당 연산의 결과를 미리 반환하는 것을 의미합니다.

3.1 And 연산자

"A" && "B" //"B"

위의 경우 and 연산이 참인지 판별하려면 "B"까지 확인해야하므로 결과가 "B"가 나오게 됩니다.

0 && "B" //"B"

하지만 이 경우에는 0에서 이미 false값으로 판별이 났으므로 0을 반환합니다.

if(0 && "b"){
    console.log(1);
}else{
    console.log(0);
}
//0

3.2 Or 연산자

"A" || "B" //"A"

위의 경우 or 연산이 "A"에서 이미 참임을 확인했으므로 "A"를 반환합니다.

0 || "B" //"B"

하지만 이 경우에는 0까지만 봐서는 확인이 안되고 "B"까지 봐야 하므로 "B"가 결과값이 됩니다.

if("A" || "B"){
    console.log(1);
}else{
    console.log(0);
}
//1

---

참고자료

https://poiemaweb.com/js-type-coercion
https://velog.io/@design0728/%EC%95%94%EB%AC%B5%EC%A0%81-%ED%83%80%EC%9E%85-%EB%B3%80%ED%99%98implicit-coercion-0gqe2tex