한 입 크기로 잘라먹는 리액트다른 자료형끼리 서로 연산한다고 가정해 보겠습니다. 예컨대 숫자와 문자를 서로 더하는 연산이라면, 프로그래밍에서는 먼저 숫자를 문자로 변환하고 나서 문자와 문자를 이어 붙이는 연산을 수행합니다. 숫자를 문자로 변환하는 것처럼(그 반대의 경우도 해당) 서로 같은 자료형으로 만드는 작업이 선행되어야 연산이 정상적으로 이루어지기 때문입니다. 이렇듯 어떤 값의 자료형을 다른 자료형으로 변환하는 것을 ‘형 변환’이라고 합니다.
형 변환에는 프로그래머가 의도적으로 자료형을 변환하는 ‘명시적 형 변환’과 자바스크립트 엔진이 알아서 변환하는 ‘묵시적 형 변환’이 있습니다.
묵시적 형 변환
묵시적 형 변환은 자바스크립트 엔진이 스스로 알아서 변환하는 작업입니다. 다음은 묵시적으로 형 변환이 일어나는 예입니다.
코드를 불러오는 중 입니다 ...① 숫자형 변수 number와 문자형 변수 string을 더한 값을 변수 result에 저장합니다. ② 출력 명령에 변수 result를 전달했더니 문자열 1020을 출력합니다.
이런 결과가 나온 까닭은 숫자와 문자의 덧셈에서 자바스크립트가 암묵적으로 숫자를 문자로 형 변환해 계산했기 때문입니다. 문자형 간의 덧셈 연산은 두 문자를 이어 붙인 결과가 된다고 하였습니다. 따라서 결과는 1020이 됩니다.
이렇듯 프로그래머가 의도하지 않았음에도 자바스크립트가 직접 자료형을 적절히 변환하는 것을 묵시적 형 변환이라고 합니다.
명시적 형 변환
명시적 형 변환은 묵시적 형 변환과 반대로 내장 함수 등을 이용해 프로그래머가 의도적으로 어떤 자료형을 다른 자료형으로 변경하는 작업입니다.
내장 함수란?
대다수 프로그래밍 언어는 프로그래밍에서 자주 사용하는 기능을 모아 함수 형태로 제공 합니다. 이 함수를 내장 함수라 고합니다.
숫자형으로 변환
다음은 문자열을 숫자로 명시적으로 형 변환하는 예입니다.
코드를 불러오는 중 입니다 ...함수 Number는 자바스크립트가 기본적으로 제공하는 내장 함수로, 제공된 문자열을 숫자로 변환해 반환합니다. 그러나 변수 strB처럼 숫자가 아닌 문자를 포함한 문자열은 정상적으로 변환되지 않기 때문에 NaN을 반환합니다.
만약 숫자 뿐만 아니라 문자도 함께 포함된 문자열을 숫자로 변환하고 싶다면, 함수
코드를 불러오는 중 입니다 ...parseInt를 사용합니다.① 변수 strA와 10을 괄호 안에 전달합니다. 문자열 strA를 10진수 숫자로 형 변환합니다.
함수
parseInt는 Number처럼 괄호 안에 있는 문자열을 숫자로 변환하는 자바스크립트의 내장 함수입니다. Number와 달리 괄호 안에 두 개의 값을 콤마로 구분해 전달하는데, 첫 번째 값은 변환하려는 문자열이고, 두 번째 값은 진수입니다.함수
Number가 숫자가 아닌 문자를 포함한 문자열은 변환할 수 없는 반면, 함수 parseInt는 문자열에서 숫자만 추려 반환하기 때문에 문자와 숫자가 섞여 있는 문자열도 숫자로 변환할 수 있습니다. 단 함수
코드를 불러오는 중 입니다 ...parseInt가 동작할 때는 문자열의 첫 문자부터 숫자로 변환하므로, 문자열이 숫자가 아닌 문자로 시작한다면 NaN을 반환하게 되니 주의해야 합니다.문자열을 숫자로 변환하는 작업은 실무에서 많이 활용하는 기능입니다. 따라서 앞서 제시한 두 방법과 그 차이점을 잘 알고 있다면 많은 도움이 됩니다.
문자열로 변환
다음은 숫자형을 문자열로 명시적으로 형 변환하는 예입니다.
코드를 불러오는 중 입니다 ...변수 num에 저장된 숫자 2022를 함수 String을 이용해 문자열로 변환합니다. String 역시 자바스크립트 내장 함수로 인수로 제공한 값을 문자열로 변환해 반환합니다.
코드를 불러오는 중 입니다 ...문자열로 형 변환하는 것은 대체로 예측할 수 있는 방식으로 일어납니다. undefined 값은 문자열 undefined, null 값은 문자열 null, true 값은 문자열 true로 변환됩니다.
불리언으로 변환
불리언 값으로 변환하는 내장 함수로는 Boolean이 있습니다.
코드를 불러오는 중 입니다 ..."하이"라는 문자열은 true, 숫자 0은 false, 빈 문자열은 false로 각각 변환됩니다.
자바스크립트에서 불리언 변환은 truthy & falsy 규칙을 따릅니다. 이 내용은 2장에서 자세히 살펴볼 예정이니 여기서는 특정 값을 불리언으로 변환하게 되면 true 또는 false를 반환한다는 점만 기억하기 바랍니다.