자바스크립트 형 변환

오늘은 자바스크립트의 형 변환에 대해 알려드리겠습니다.

다른 자료형끼리 서로 연산을 한다고 가정했을 때,

숫자와 문자를 서로 더하는 연산의 경우 숫자를 문자로 변환하고 문자와 문자를 붙이는 연산을 수행해야 합니다.

왜나하면 서로 같은 자료형으로 만드는 작업이 선행되어야 연산이 수행될 수 있기 때문입니다.

이처럼 어떤 자료형을 다른 자료형으로 변환하는 것을 '형 변환'이라고 합니다.

 

형 변환에는 프로그래머가 의도적으로 자료형을 변환하는 '명시적 형 변환'과

자바스크립트 엔진이 알아서 변환하는 '묵시적 형 변환'이 있습니다.

 

---

명시적 형 변환

명시적 형 변환은 개발자가 *내장함수 등을 이용하여 의도적으로 어떤 자료형을 다른 자료형으로 변경하는 작업입니다.

*내장 함수가 뭔가요? 🤚🏻

보통의 프로그래밍 언어는 프로그래밍에서 자주 사용하는 기능을 모아서 함수 형태로 제공해줍니다.이런 함수들을 내장함수라고 말해요!

---

숫자형으로 변환

먼저 문자열을 숫자열로 변환하는 경우입니다.

let strA = "10";
let strB = "10개";

let numA = Number(strA);
let numB = Number(strB);

console.log(numA); // 10
console.log(numB); // NaN

함수 Number는 자바스크립트가 기본적으로 제공하는 내장 함수로,
제공된 문자열을 숫자로 변환해서 반환합니다. 그러나 변수 strB는 숫자가 아닌 문자를 포함한 문자열이므로 정상적으로 반환할 수가 없습니다. 따라서 NaN을 반환합니다.

만약 숫자 뿐만 아니라 문자도 함꼐 포함된 문자열을 숫자로 변환하고 싶다면, 함수 parseInt를 사용합니다.

let strA = "10";
let strB = "10개";

let numA = parseInt(strA, 10); ①
let numB = parseInt(strB, 10);

console.log(numA); // 10
console.log(numB); // 10

함수  parseInt는 Number처럼 괄호 안에 있는 문자열을 숫자로 변환하는 자바스크립트의 내장함수입니다.
Number와 달리 괄호 안에 두 개의 값을 콤마로 구분해서 전달하는데, 첫 번째 변환하는 값은 문자열이고, 두 번째 값은 진수입니다.

함수 Number가 숫자가 아닌 문자를 포함한 문자열을 변환할 수 없는 반면,  parseInt는 문자열에서 숫자만 추려서 반환하기 때문에 문자와 숫자가 섞여 있는 문자열도 숫자만 골라서 변환할 수 있습니다. *단,  parseInt가 동작할 때는 문자열의 첫 문자부터 숫자로 변환하므로, 문자열이 숫자가 아닌 문자로 시작한다면 NaN을 반환하게 되므로 주의해야 합니다.

let str = "파이팅 2022";
let num = parseInt(str, 10);

console.log(num); // NaN

---

문자형으로 변환

다음은 숫자형을 문자열로 변환하는 경우이다.

let num = 2022;
let str = String(num);

console.log(str); // 2022

String은 문자열로 변환하는 자바스크립트의 내장함수이다.

let varA;
let varB = null;
let varC = true;

let strA = String(varA);
let strB = String(varB);
let strC = String(varC);

console.log(strA); // undefined
console.log(strB); // null
console.log(strC); // true

문자열은 다음과 같은 것들도 변환합니다.

undefined -> undefined

null -> null

true -> true

---

불리언으로 변환

let varA = "하이";
let varB = 0;
let varC = "";

let boolA = Boolean(varA);
let boolB = Boolean(varB);
let boolC = Boolean(varC);

console.log(boolA); // true
console.log(boolB); // false
console.log(boolC); // false

Boolean은 true와 false로 변환합ㄴ디ㅏ.

문자열은 true로, 숫자 0과 빈 값(null)은 false로 변환합니다.

---

묵시적 형 변환

묵시적 형 변환은 자바스크립트 엔진이 스스로 알아서 변환하는 작업입니다.

다음은 묵시적 형 변환의 예시입니다.

let number = 10;
let string = "20";

const result = number + string; ①
console.log(result); ② 

// 1020

1) 숫자형 변수 number와 문자형 변수 string을 더한 값을 변수 result에 저장합니다.

2) 출력 명령에 변수 result를 전달했더니 문자열 1020을 출력합니다.

자바스크립트 엔진은 간단한 연산은 형 변환을 이용하여 계산하지만,

보통은 명시적으로 형 변환을 하는 것이 좋습니다.