9. 타입 변환의 종류 (Type Conversion, Coercion, Casting)

안녕하세요. 박기린 입니다.

 

이전 글에서 JS의 데이터 타입 종류에 대해 알아보았습니다. (해당 글 주소: https://arnopark.tistory.com/470)

내용 중에 '자바스크립트는 동적 타입을 지원'한다고 했었습니다. 이처럼 자바스크립트 내부에서 변수의 타입을 정해주다보니, 어쩔 때는 원래 String이었던 데이터가 갑자기 Number가 되거나 그 반대가 되는 상황이 발생합니다. 지금부터 어떠한 경우에 타입 변환이 발생하는 지 알아보겠습니다.

---

 

 

JS 타입변환의 종류

JS는 다양한 타입변환 유형이 존재합니다. 크게 explicit과 implicit 두 가지로 나뉩니다.

explicit [explicit type coercion, type conversion, type casting, 명시적 타입 변환] 은 개발자가 의도를 가지고 데이터의 타입을 변환시키는 것입니다. 

implicit [implicit coercion, type coercion, 암묵적 타입 변환] 은 개발자의 의도와는 상관 없이 자바스크립트 엔진이 암묵적으로 타입을 자동 변환시키는 것입니다.

---

 

우선 implicit type coercion에 대해 먼저 알아보겠습니다.

 

implicit type coercion

JS는 상황에 따라 강제로 타입을 변환시킵니다.

 

console.log(`I am ` + 23 + ` years old`); // 'I am 23 years old' (String)
console.log('23' - '10' - 3); // 10 (Number)
console.log('23' + '10' + 3); // '23103' (String)
console.log('23' * '2'); // 46 (Number)
console.log('23' / '2'); // 11.5 (Number)

대표적인 type coercion의 예시입니다. 수학 연산자(-, *, /)가 식에 포함된 경우, 피연산자는 모두 Number 형이어야만 합니다. 그래서 숫자가 비록 String 타입으로 저장되어 있을지라도 Number로 강제 형변환이 일어납니다.

근데 예시의 첫 번째와 세 번째 statement는 String 타입으로 출력되었습니다. 왜 그럴까요? 이전 연산자 설명글(https://arnopark.tistory.com/472)에서 그 이유를 찾을 수 있습니다. 바로 '+'는 String의 결합에도 사용이 됩니다. 그래서 반대로 Number 타입이 String 타입으로 강제 형변환이 되었습니다.

 

수학 연산자를 사용하면 당연히 Number로 고정될 거라고 생각하고 무시했다가는 큰 코 다칠 수 있음을 알려주는 경우입니다. implicit type coercion은 일일이 타입 유형을 지정하고 변환해주는 과정을 간소화해줘서 편하다고 느낄 수 있습니다. 하지만 독이 들어있음을 잊지 말아야 합니다. 오히려 JS에 익숙치 않은 사람에게는 타입 강제 변환이 더 큰 혼란을 줄 수 있습니다. 그러므로 정확하게 이해하고 난 후에 적절히 응용하도록 합시다.

 

 

응용 문제

let n = '1' + 1;
n = n - 1;
console.log(n); // 10

let x = 2 + 3 + 4 + '5';
console.log(x); // '95'

let y = '10' - '4' - '3' - 2 + '5'
console.log(y) // '15'

연산자 우선순위와 type coercion을 적절히 응용해야 하는 문제입니다. 답은 console.log()옆에 주석으로 적어놨습니다.

왜 이러한 답이 나오는 지 모르시겠다면 댓글에 질문 남겨주세요.

---

 

 

explicit type conversion

이번에는 개발자가 의도를 가지고 타입 변환을 하는 경우를 설명해보겠습니다.

 

html의 input 태그를 통해서 user가 입력한 값을 받아냅니다. 그런데 그 값은 항상 String 타입으로 들어옵니다. 유저가 비록 숫자로 입력을 했음에도 말이죠. 

const inputYear = '1991';
console.log(inputYear + 18) // 199118로 출력 된다.

그 사실을 모른 채 '+'기호를 붙인다면 위와 같은 슬픈 상황이 연출될 수 있습니다.

이러한 경우를 대비하여, 값의 데이터 타입을 변환시킬 수 있습니다. 그리고 이 또한 여러가지 방법이 존재합니다.

 

 

String으로 타입 변환을 하는 경우

1. String 생성자 함수를 new 연산자 없이 사용

console.log(String(12) + 12); // 1212

 

2. toString() 메서드 사용

const numb = 1;
console.log(numb.toString()); // 1 - String type

 

3. +연산자에 따옴표 추가

let test = 12345;
test = test + '';

// or

test = '' + test;

---

 

Number로 타입 변환을 하는 경우

1. Number 생성자 함수를 new 연산자 없이 사용

console.log(Number(inputYear) + 18); // 2009

 

만약 숫자로만 이루어지지 않은 String 데이터가 들어오면, NaN을 return 합니다

console.log(Number('Giraffe')); // NaN => Not a Number 라는 뜻을 지닌다.
console.log(typeof NaN); // number

NaN은 Not a Number로, number 타입이긴 하지만 invalid한 값이 들어온 상태여서 옳지 못한 상태를 의미합니다.

 

 

2. 단항 수학 연산자

console.log(typeof +'1'); // number

String으로 된 숫자 앞에 '+' 수학 연산자를 넣어서 Number type으로 강제 형변환을 시켰습니다. String으로 된 숫자를 Number로 변환해야 하는 상황이 생긴다면, 위와 같은 방법을 사용해도 좋습니다. ('+'는 String의 결합에도 사용된다고 했지만, 위의 예시에는 String 데이터가 '+'의 앞 뒤에 동시에 있지 않은 경우라서 수학 연산자로 작동하였습니다.)

 

 

3. parseInt(), parseFloat() 함수 사용

parseInt() 함수는 문자열을 parsing 한 후에 지정한 진수에 따라 정수를 반환합니다.

parseInt(string)
parseInt(string, radix)

string : 정수로 변환할 값입니다. 만약 string의 첫 글자를 정수로 변환할 수 없으면 NaN을 리턴합니다.

radix : 진수를 나타내는 2부터 36까지의 정수입니다. 10진수의 경우 10을 넣어줍니다. 만약 radix 값이 비어있으면, 주어진 string 값에 따라 자동으로 진법을 구분해줍니다. 하지만 특정 값에서 오류가 발생하기 때문에 반드시 radix를 입력해줍시다.

console.log(parseInt('10', 10)); // 10
console.log(parseInt('10ㅁㄴㅇㄹ', 10)); // 10

첫 글자 이후에 숫자로 인식되지 않는 값이 오면 무시합니다.

 

 

parseFloat() 함수는 문자열을 parsing 한 후에 실수를 반환합니다.

parseFloat(string)

string : 실수로 변환할 값입니다. 만약 string을 실수로 변환할 수 없는 경우 NaN을 리턴합니다. 첫 글자가 숫자로 변환할 수 있는 값(숫자(0~9), 기호(+, -), 소수점(.), 지수)가 아닌 경우 NaN을 리턴합니다.

console.log(parseFloat('10.23asdf')); // 10.23

parseFloat 역시 첫 글자 이후에 숫자로 인식되지 않는 값이 오면 무시합니다.

 

---

 

 

Boolean으로 타입 변환을 하는 경우

1. Boolean 생성자 함수를 new 연산자 없이 사용

console.log(Boolean(0)); // false

 

2. 부정 논리 연산자(!)를 두 번 사용

console.log(!!0); // false

 

계산과정

0	//0. false(0)
!0	//1. true
!!0	//2. false

1. Number타입인 0이 !기호를 통해서 Boolean 타입이 됩니다.. - 0은 false를 나타냄으로 false가 되는데, 여기에 부정 논리(!)가 됨으로써 true가 됩니다.

2. 다시 부정 논리 연산자(!)를 붙여서 false로 돌아옵니다.