이번 포스팅에서는 JavaScript(자바스크립트)의 형 변환에 대해 정리한 글이며, 코드를 작성하면서 특정 데이터의 형태를 변환해 줘야 하는 상황이 생기는데 이를 형 변환(Type conversion)이라고 하며, 이에 대한 종류는 크게 명시적 형 변환, 암시적 형 변환이 존재합니다. 이에 대해 알아보도록 하겠습니다.
1. 명시적 형 변환(Explicit Type conversion)
2. 암시적 형 변환(Implicit Type conversion)
1. 명시적 형 변환(Explicit Type conversion)
1-1. 명시적 형 변환(Explicit Type conversion)이란?
- 명시적 형 변환(Explicit Type conversion)이란, 개발자가 의도적인 목적을 가지고 직접 데이터의 형태를 변환하는 것을 의미합니다.
1-2. 기본적인 명시적 형 변환 함수들 : Object(), Number(), String(), Boolean() ...
(1) Number 타입으로 변환하기 : Number()
- 해당 함수를 사용하여 Number 형태가 아닌 데이터를 Number형으로 변환할 수 있습니다.
- 정수형, 실수형 데이터를 Number로 변환하고 수 데이터가 아닐 경우 NaN을 반환합니다.
- Boolean형 데이터는 각 값에 따라 1 또는 0으로 반환됩니다.
- 데이터의 형태를 확인하는 함수 : typeof()
console.log(Number('100000'), typeof Number('100000')) // 100000 "number"
console.log(Number('5' * 5), typeof Number('5' * 5)) // 25 "number"
console.log(Number('3.14'), typeof Number('3.14')) // 3.14 "number"
console.log(Number('a'), typeof Number('a')) // Nan "number"
console.log(Number(true), typeof Number(true)) // 1 "number"
console.log(Number(false), typeof Number(false)) // 0 "number"
console.log(Number(() => {}), typeof Number(Number(() => {}))) // NaN "number"
<Console 실행 결과>
(2) 정수형 숫자로 변환하기 : parseInt()
- 숫자 데이터가 아닌 형 변환은 NaN을 반환합니다.
- Boolean 데이터에 대해서도 NaN을 반환합니다.
- 공백이나 수가 아닌 데이터의 경우 변환하지 않습니다.
console.log(parseInt('100000'), typeof parseInt('100000')) // 100000 "number"
console.log(parseInt('3.14'), typeof parseInt('3.14')) // 3 "number"
console.log(parseInt('a'), typeof parseInt('a')) // NaN "number"
console.log(parseInt(0033), typeof parseInt(0033)) // 27 "number"
console.log(parseInt('0033'), typeof parseInt('0033')) // 33 "number"
console.log(parseInt(true), typeof parseInt(true)) // NaN "number"
console.log(parseInt(false), typeof parseInt(false)) // NaN "number"
console.log(parseInt(() => {}), typeof parseInt(() => {})) // NaN "number"
console.log(parseInt(' 2'), typeof parseInt(' 2')) // 2 "number"
<Console 실행 결과>
(3) 실수형 숫자로 변환하기 : parseFloat()
- parseInt() 함수와 동일한 성질을 가진 실수형 숫자로 변환할 수 있는 함수입니다.
console.log(parseFloat('100000'), typeof parseFloat('100000')) // 100000 "number"
console.log(parseFloat('3.14'), typeof parseFloat('3.14')) // 3.14 "number"
console.log(parseFloat('a'), typeof parseFloat('a')) // NaN "number"
console.log(parseFloat(0033), typeof parseFloat(0033)) // 27 "number"
console.log(parseFloat('0033'), typeof parseFloat('0033')) // 33 "number"
console.log(parseFloat(true), typeof parseFloat(true)) // NaN "number"
console.log(parseFloat(false), typeof parseFloat(false)) // NaN "number"
console.log(parseFloat(() => {}), typeof parseFloat(() => {})) // NaN "number"
console.log(parseFloat(' 2'), typeof parseFloat(' 2')) // 2 "number"
<Console 실행 결과>
(4) 문자열 형태로 변환하기 : String()
- Number, Boolean 데이터와 Arrow function같은 함수도 문자열로 변경되는 것을 알 수 있습니다.
- {} 꼴의 객체도 String으로 변환되지만 [ ] 형태로 표시됩니다.
console.log(String(10000), typeof String(10000)) // "10000" "string"
console.log(String(3.14), typeof String(3.14)) // "3.14" "string"
console.log(String(true), typeof String(true)) // "true" "string"
console.log(String(false), typeof String(false)) // "false" "string"
console.log(String(() => {}), typeof String(() => {})) // "() => {}" "string"
console.log(String({ student: 'wonjun' }), typeof String({ student: 'wonnjun' })) // "[object Object]" "string"
<Console 실행 결과>
(5) 문자열 형태로 변환하기 : toString()
- String() 함수와 비슷하지만 숫자형 데이터를 변환할 때 진법 지정이 가능합니다.
- 이에 따라 별도의 전달인자가 없다면 Default 값인 10진수로 수 데이터를 String 데이터로 변환합니다.
console.log((10000).toString(), typeof (10000).toString()) // "10000" "string"
console.log((10000).toString(2), typeof (10000).toString(2)) // "10011100010000" "string"
console.log((10000).toString(8), typeof (10000).toString(8)) // "23420" "string"
console.log((3.14).toString(), typeof (3.14).toString()) // "3.14" "string"
console.log(true.toString(), typeof true.toString()) // "true" "string"
console.log(false.toString(), typeof false.toString()) // "false" "string"
console.log((() => {}).toString(), typeof (() => {}).toString()) // "() => {}" "string"
console.log({ student: 'wonjun' }.toString(), typeof { student : 'wonjun' }.toString()) // "[object Object]" "string"
<Console 실행 결과>
(6) 문자열 형태로 변환하기 : toFixed()
- toFixed() 함수의 경우 수 데이터에만 사용할 수 있는 함수입니다.
- 전달인자로 넘겨줄 때 의미는 소수점 자리수까지 포함한다는 의미를 가집니다.
console.log((10000).toFixed(), typeof (10000).toFixed()) // "10000" "string"
console.log((10000).toFixed(2), typeof (10000).toFixed(2)) // "10000.00" "string"
console.log((10000).toFixed(3), typeof (10000).toFixed(8)) // "10000.000" "string"
console.log((3.14).toFixed(), typeof (3.14).toFixed()) // "3" "string"
console.log((3.14).toFixed(1), typeof (3.14).toFixed()) // "3.1" "string"
console.log((3.16).toFixed(1), typeof (3.16).toFixed()) // "3.2" "string"
<Console 실행 결과>
(7) Boolean 타입으로 변환하기 : Boolean()
- 0, NaN, null, undefined가 아닌 데이터들은 모두 true로 변환됩니다.
- 0, NaN, null, undefined 값에 대해선 모두 false를 반환합니다.
console.log(Boolean(100)); //true
console.log(Boolean("1")); //true
console.log(Boolean(true)); //true
console.log(Boolean(Object)); //true
console.log(Boolean([])); //true
console.log(Boolean(0)); //false
console.log(Boolean(NaN)); //false
console.log(Boolean(null)); //false
console.log(Boolean(undefined)) //false
<Console 실행 결과>
2. 암시적 형 변환(Implicit Type conversion)
2-1. 암시적 형 변환(Implicit Type conversion)이란?
- 암시적 형 변환은 자바스크립트 엔진이 자동으로 데이터 타입을 변환시키는 것을 의미합니다.
- 다른 프로그래밍 언어에 대해 자바스크립트가 보다 유연성을 가질 수 있는 이유이기도 합니다.
- 이러한 특징 때문에 다른 언어보다 엄격함을 가지지 않는다는 비판의 의견도 분명 존재합니다. 이에 따라 Microsoft에서는 자바스크립트보다 엄격한 문법성을 내세워 자바스크립트의 상위 버전 언어인 TypeScript(타입스크립트)를 발표하였으며 클라이언트 사이드 개발 분야에서 지속적인 인기를 누림과 동시에 활발한 커뮤니티를 형성하고 있습니다.
- 아래 코드를 보면 숫자 데이터를 갖는 변수 number와 string의 연산이 가능한 것을 볼 수 있습니다.
let number = 202020;
let string = "303030";
console.log(number + string, typeof(number + string)); // 202020303030 string
2-2. 산술 연산자에서의 암시적 형 변환 : + 연산자
(1) Number + String : 문자 데이터가 숫자 데이터보다 우선순위가 높습니다.
console.log(10 + '10', typeof (10 + '10')) // "1010" "string"
console.log(10 + 'abc', typeof (10 + 'abc')) // "10abc" "string"
console.log('10' + 10, typeof ('10' + 10)) // "1010" "string"
console.log('abc' + 10, typeof ('abc' + 10)) // "abc10" "string"
console.log(10 + 'abc' + 10, typeof (10 + 'abc' + 10)) // "10abc10" "string"
<Console 실행 결과>
(2) String + Boolean : 문자 데이터가 Boolean 타입 데이터보다 우선순위가 높습니다.
console.log('abc' + true, typeof ('abc' + true)) // "abctrue" "string"
console.log('abc' + false, typeof ('abc' + true)) // "abcfalse" "string"
console.log(true + 'abc', typeof (true + 'abc')) // "trueabc" "string"
console.log(false + 'abc', typeof (false + 'abc')) // "falseabc" "string"
console.log(true + 'abc' + false, typeof (true + 'abc' + false)) // "trueabcfalse" "string"
< Console 실행 결과 >
(3) String + Object : 문자 데이터가 객체, 함수 데이터보다 우선순위가 높습니다.
console.log('abc' + { student : 'wonjun' }, typeof ('abc' + { student : 'wonjun' })) // "abc[object Object]" "string"
console.log('abc' + (() => {}), typeof ('abc' + (() => {}))) // "abc() => {}" "string"
< Console 실행 결과 >
2-3. 산술 연산자에서의 암시적 형 변환 : 그 외 모든 산술 연산자(-, *, /, %)
- (+) 연산자를 제외한 나머지 연산자에서는 숫자의 우선순위가 문자보다 높습니다.
(1) Number - String
console.log(10 - '10', typeof (10 - '10')) // 0 "number"
console.log(10 - 'abc', typeof (10 - 'abc')) // Nan "number"
console.log('10' - 10, typeof ('10' - 10)) // 0 "number"
console.log('abc' - 10, typeof ('abc' - 10)) // Nan "number"
console.log(10 - 'abc' - 10, typeof (10 - 'abc' - 10)) // Nan "number"
< Console 실행 결과>
(2) Number * String
console.log(10 * '10', typeof (10 * '10')) // 100 "number"
console.log(10 * 'abc', typeof (10 * 'abc')) // Nan "number"
console.log('10' * 10, typeof ('10' * 10)) // 100 "number"
console.log('abc' * 10, typeof ('abc' * 10)) // Nan "number"
console.log(10 * 'abc' * 10, typeof (10 * 'abc' * 10)) // Nan "number"
< Console 실행 결과 >
(3) Number / String
console.log(10 / '10', typeof (10 / '10')) // 1 "number"
console.log(10 / 'abc', typeof (10 / 'abc')) // Nan "number"
console.log('10' / 10, typeof ('10' / 10)) // 1 "number"
console.log('abc' / 10, typeof ('abc' / 10)) // Nan "number"
console.log(10 / 'abc' / 10, typeof (10 / 'abc' / 10)) // Nan "number"
< Console 실행 결과 >
(4) Number & String
console.log(10 % '10', typeof (10 % '10')) // 0 "number"
console.log(10 % 'abc', typeof (10 % 'abc')) // Nan "number"
console.log('10' % 10, typeof ('10' % 10)) // 0 "number"
console.log('abc' % 10, typeof ('abc' % 10)) // Nan "number"
console.log((10 % 'abc') % 10, typeof ((10 % 'abc') % 10)) // Nan "number"
< Console 실행 결과>
(5) Number * 또는 - 또는 / 또는 % Boolean
- Boolean 타입으로 수 데이터와 연산할 경우 true는 1, false는 0으로 계산합니다.
console.log(10 * true, 10 * false) // 10 0
console.log(10 - true, 10 - false) // 9 10
console.log(10 / true, 10 / false) // 10 Infinity
console.log(10 % true, 10 % false) // 0 Nan
< Console 실행 결과 >
2-4. 동등 연산자에서의 암시적 형 변환 : ==
- Number 타입인 0, String 타입인 "0"은 동등 연산자를 사용해 연산할 경우 true가 반환됩니다.
- 위의 0, "0" 데이터는 Boolean 타입인 false와 동일하다는 것을 true가 반환됨을 통해 확인 가능합니다.
- 빈 문자열(Empty string) ""은 false와 동일합니다.
- 이에 따라 1, "1"도 true와 동일합니다.
- 자바스크립트의 이러한 타입에 엄격하지 않은 문법의 특성에 대비해 "==" 동등 연산자 대신, "===" 일치 연산자를 사용하여 비교 연산을 진행합니다.
console.log(10 * true, 10 * false) // 10 0
console.log(10 - true, 10 - false) // 9 10
console.log(10 / true, 10 / false) // 10 Infinity
console.log(10 % true, 10 % false) // 0 Nan
< Console 실행 결과 >
======================================================================
해당 포스팅에 대해 내용 추가가 필요하다고 생각되면 기존 포스팅 내용에 다른 내용이 추가될 수 있습니다.
개인적으로 공부하며 정리한 내용이기에 오타나 틀린 부분이 있을 수 있습니다.
이에 대해 지적해 주시면 감사하겠습니다.
'프론트엔드(Front-End) > JavaScript' 카테고리의 다른 글
| [JavaScript] - 조건문, 반복문, prompt(), alert() 함수, Template literal (0) | 2022.12.20 |
|---|---|
| [JavaScript] - 변수, 자료형, 연산자 (0) | 2022.12.19 |
| [JavaScript] - About JavaScript, ES5, ES6의 차이 (0) | 2022.12.19 |
댓글