자바스크립트의 형변환

 

 

 

'자바스크립트는 유연한 언어다.' 라는 말을 들어보셨을 거라 생각합니다. 이는 자바스크립트의 언어적 특성 때문인데 지금은 많은 사람들이 자바스크립트의 단점으로 지적하는 부분 중 하나의 특성입니다. (그래서 최근에는 타입스크립트가 주목을 받고 있습니다.)

 

그럼 왜 자바스크립트가 유연한 언어이냐?

그것은 자바스크립트가 자체적으로 일반적인 언어에선는 에러가 발생되어야 하는 부분에서 에러를 발생시키지 않고 데이터 타입을 변환시키기 때문입니다. 그렇기에 우리는 자바스크립트가 어떤 방식으로 데이터의 형 변환을 하는지 이해하면 많은 도움이 됩니다. 

 

자바스크립트의 형 변환은 크게 두가지 입니다. 

자바스크립트 엔진이 필요에 따라 ‘암시적변환’ 을 혹은 개발자의 의도에 따라 ‘명시적변환’ 을 실행하는데 형변환을 시행하는데 이는 아래 예시를 통해서 좀 더 명확하게 알아볼게요~!

 

추~~~우울발!!!!!!!!!😀😀😀

 

 

💡 암시적 변환

암시적 변환이란 자바스크립트 엔진이 필요에 따라 자동으로 데이터 타입을 변환시키는 것.

1. 산술 연산자

더하기(+) 연산자는 숫자보다 문자열이 우선시되기 때문에, 숫자형이 문자형을 만나면 문자형으로 변환하여 연산됩니다. (문자 > 숫자)

// 더하기(+)number + number // number
number + string // string
string + string // string
string + boolean // string
number + boolean // number

50 + 50; //100
100 + “점”; //”100점”
“100” + “점”; //”100점”
“10” + false; //”100"
99 + true; //100

 

다른 연산자(-,*,/,%)는 숫자형이 문자형보다 우선시 되기 때문에 더하기와 같은 문자형으로의 변환이 일어나지 않습니다. (문자 < 숫자)

// 다른 연산자(-,*,/,%)string * number // number
string * string // number
number * number // number
string * boolean //number
number * boolean //number

“2” * false; //0
2 * true; //2

 

2. 동치 비교

아래의 예제는 엄격하지 않은 동치(==) 비교이며, 아래의 결괏값은 좌우항 변환할 경우 모두 ‘0 == 0 이기 때문에’ `true`입니다.

null == undefined
“0” == 0
0 == false
“0” == false

여기서 유의해야 할 점은 위의 비교는 엄격하지 않은 동치 비교일 경우이기 때문에, 두 값을 비교할 때 데이터 타입을 변환하지 않는 엄격한 동치(===) 비교와 혼동되지 않도록 주의합니다.

 

💡 명시적변환

명시적 변환이란 개발자가 의도를 가지고 데이터 타입을 변환시키는 것으로 타입을 변경하는 기본적인 방법은 `Object(), Number(), String(), Boolean()` 와 같은 함수를 이용하는데 new 연산자가 없다면 사용한 함수는 타입을 변환하는 함수로써 사용됩니다.

var trans = 100; //NumberObject(trans); //100

Object(trans); //100
console.log(typeof trans); //Number

String(trans); //”100"
console.log(typeof trans); //String

Boolean(trans); //true
console.log(typeof trans); //Bolean

👍 A Type → Number Type

다른 자료형을 숫자 타입으로 변형하는 방법은 아래와 같습니다.

1. Number() 

Number()는 정수형과 실수형의 숫자로 변환합니다.

Number(“12345”); //12345
Number(“2”*2); //4

 

2. parseInt()

parseInt()는 정수형의 숫자로 변환합니다. 만약 문자열이 `숫자 0`으로 시작하면 8진수로 인식하고(구형 브라우저 O, 신형 브라우저 X), `0x, 0X` 로 시작한다면 해당 문자열을 16진수 숫자로 인식합니다. 또한 앞부분 빈 공백을 두고 나오는 문자는 모두 무시되어 NaN을 반환합니다.

parseInt(“27”) //27
parseInt(0033); //27
parseInt(0x1b); //27
parseInt(“ 2”); //2
parseInt(“ 2ㅎ”); //2
parseInt(“ ㅎ2”); //NaN

 

3. parseFloat()

parseFloat()는 부동 소수점의 숫자로 변환합니다. parseInt()와는 달리 parseFloat()는 항상 10진수를 사용하며 parseFloat() 또한 앞부분 빈 공백을 두고 나오는 문자는 모두 무시되어 NaN을 반환합니다.

parseFloat(“!123”); //NaN
parseFloat(“123.123456”); //123.123456
parseFloat(“ 123.123456”); //123.123456
parseFloat(“ a123.123456”); //NaN

// parseFloat와 비교
parseInt(“123.123456”); //123

 

👍  A Type → String Type

다른 자료형을 문자 타입으로 변형하는 방법은 아래와 같습니다.

1. String()

String(123); //”123"
String(123.456); //”123.456"

 

2. toString()

toString()는 인자로 기수를 선택할 수 있다. 인자를 전달하지 않으면 10진수로 변환합니다.

var trans = 100;

trans.toString(); //”100"
trans.toString(2); //”1100100"
trans.toString(8); //”144"

var boolT = true;
var boolF = false;

boolT.toString(); //”true”
boolF.toString(); //”false”

 

3. toFixed()

toFixed()의 인자를 넣으면 인자값만큼 반올림하여 소수점을 표현하며 소수점을 넘치는 값이 인자로 들어오면 `0`으로 길이를 맞춘 문자열을 반환합니다.

var trans = 123.456789;
var roundOff = 99.987654;

trans.toFixed(); //”123"
trans.toFixed(0); //”123"
trans.toFixed(2); //”123.46"
trans.toFixed(8); //”123.45678900"

roundOff.toFixed(2); //”99.99"
roundOff.toFixed(0); //”100"

 

👍 A Type → Boolean Type

다른 자료형을 불린타입으로 변형하는 방법은 아래와 같다.

1. Boolean()

Boolean(100); //true
Boolean(“1”); //true
Boolean(true); //true
Boolean(Object); //true
Boolean([]); //true
Boolean(0); //false
Boolean(NaN); //false
Boolean(null); //false
Boolean(undefined); //false
Boolean( ); //false

 

 

출처 : https://medium.com/gdana/자바스크립트의-형변환은-두가지다-b46875be4a88