[JS] 형 변환과 타입 강제 변환

형 변환(type conversion)과 타입 강제 변환 (type coercion)

형 변환(type conversion)은 한 유형에서 다른 유형으로 수동 변화이다.

 타입 강제 변환(type coercion)은 JS가 유형을 scenes 뒤에서 자동 변환한다.

 

형 변환(type conversion)

명시적으로 원할 때 한 유형에서 다른 유형으로 수동 변환한다. 

 

만일 웹 페이지에 출생 연도를 입력할 수 있는 입력 필드(input field)가 있다고 가정하면 일반적으로 문자열로 제공된다.

const inputYear = "1991";

내가 얻은 inputYear가 사용자 인터페이스에서 값이 1991인 문자열인거다.

 

const inputYear = "1991";
console.log(inputYear + 18);

그래서 18이라는 숫자를 더해도 2009가 나오는게 아니라 199118로 출력된다.

 

그렇다면 문자열을 어떻게 숫자로 바꿀 수 있을까?

문자열을 숫자로 변환하는 방법은 내장된 Number 함수를 사용하는 것이다. 

const inputYear = "1991";
console.log(Number(inputYear));

Number 함수를 이용하면 문자열 → 숫자로 변환된다. 

const inputYear = "1991";
console.log(Number(inputYear), inputYear);

첫번째는 숫자

두번째는 문자열

※주의할 점은 원래 값이 실제로 변환되지 않는다. 

즉, inputYear변수 자체는 여전히 문자열이다. Number 함수를 이용하여 변환된 버전을 사용한것 뿐이다. 

console.log(inputYear + 18);의 값인 199118을 2009로 출력하려면 console(Number(inputYear)+18);을 입력해야한다. 

console.log(Number("Jonas"));

NaN: 숫자가 아님을 나타낸다. JS에서 숫자가 아닌 값을 제공한다. 숫자와 관련된 작업이 실패할때마다 새로운 번호를 생성한다. 따라서 기본적으로 숫자가 아닌것은 유효하지 않은 숫자를 의미한다.

console.log(typeof NaN);

typeof NaN을 입력하면 Number이 뜬다? 이 결과는 숫자가 아닌 실제로 숫자이다. 즉, 숫자가 아닌 것은 실제로 유효하지 않은 숫자를 의미한다. 여진히 숫자이긴하지만 무효이다. 결국엔 숫자와 관련된 작업을 할때 마다 숫자를 얻지 못해서 새로운 번호를 제공하는 것이다. 그래서 문자열을 숫자로 변환하는 것이다. 물론 그 반대도 있다.

반대로 하려면 String 함수를 사용해야한다. 

console.log(String(23));

 

23은 문자열이다.

String, Number 맨 앞 글자는 대문자로 입력해야 값이 제대로 출력된다.

 

JS는 3가지 유형으로 숫자(Number), 문자열(String), 부울 값으로 변환시킬 수 있다. 

정의되지 않거나 null인것 무언가로 변환시킬 수 없다. 

 

JS에서는 자동으로 타입 강제 변환하기 때문에 거의 수동으로 할 필요는 없다.

---

타입 강제변환 (type coercion)

종류가 다른 연산자 두 값을 처리할 때마다 타입 강제 변환(type coercion)이 생긴다. JS에서는 값 중 하나를 다른 값과 일치하는 변환을 하도록 수행한다. 

console.log("I am " + 23 + "years old");

위의 코드를 보면 숫자와 문자열이 있다. 즉 다른 유형 2개가 타입 강제 변환이 자동으로 일어났다. JS에서 더하기 연산자는 문자열에 대해서 강제로 발생한다. 

 발생(trigger) 

타입 강제 변환으로 인해 문자열 사이에 연산자가 있을 때마다 숫자는 문자열로 강제 변환된다.

템플릿 리터럴도 마찬가지다.  그것은 모든 숫자 값을 취하고 그것을 문자열로 변환한다. 

템플릿 리터럴(template literals)
문자열을 작성할 수 있다. 그 뒤 문자열에 직접 변수를 선언한다. 그러면 간단하게 작성하며 교체할 수 있다. 템플릿 리터럴은 여러 조각을 하나의 최종 문자열로 조립할 수 있다. 

JS에서 타입 강제 변환이 없으면 수동으로 작업해야한다. 

console.log("23" - "10" - 3);

연산자를 마이너스로 입력하니 10이 출력되었다. 문자열→숫자로 변환되었다. 

즉, 빼기 연산자는 반대로 발생된다. 문자열이 숫자로 변환된다.

만일 플러스 연산자를 입력하면?

 

console.log("23" + "10" + 3);

"23", "10", 3 ← 3개가 문자열로 변환된다. 

console.log("23" * "2");

console.log("23" / "2");

곱하기와 나누기를 통해 숫자로 값이 변환되었다. 숫자로 변환되는 유일한 방법이다.

 

단점) 타입 강제 변환은 프로그램에서 예상치 못한 많은 버그가 생긴다.