05-타입 변환(Type Casting/Coercion)

1. Type Conversion/Coercion

자바스크립트는 타입이 매우 유연한 언어다. 그래서 JS 엔진이 필요에 따라 암시적변환을 혹은 개발자의 의도에 따라 명시적변환을 실행한다.

Type Conversion - MDN : 타입 변환, 형 변환
Type Coercion - MDN : 타입 강제, 강제 형 변환

2. Explicit Type Casting(암시적 형 변환)

Explicit Type Casting = JS 엔진이 필요에 따라 자동으로 데이터 타입을 변환시키는 것

2.1 산술 연산자

더하기(+) 연산자는 숫자보다 문자열이 우선시 되기 때문에, 숫자형이 문자형을 만나면 문자형으로 변환하여 연산된다.

1number + number // number
2number + string // string
3string + string // string
4string + boolean // string
5number + boolean // number
650 + 50; //100
7100 + “점”; //”100점”
8“100” + “점”; //”100점”
9“10” + false; //”100"
1099 + true; //100

다른 연산자(- * / %)는 숫자형이 문자형보다 우선시되기 때문에 더하기와 같은 문자형으로의 변환이 일어나지 않는다.

1//다른 연산자(-,*,/,%)
2string * number // number
3string * string // number
4number * number // number
5string * boolean //number
6number * boolean //number
7“2” * false; //0
82 * true; //2

2.2 동치비교

엄격하지 않은 동치(==)비교이며, 아래의 결과값은 좌우항 변환할 경우 모두 ‘0==0이기 때문에’ ‘true’이다.

1null == undefined // true 0 == 0
2“0” == 0 // true 0 == 0
30 == false // true 0 == 0
4“0” == false // true 0 == 0

cf. 위의 비교는 엄격하지 않은 동치 비교일 경우, 두 값을 비교할때 데이터타입을 변환하지 않는 **엄격한 동치(===)**비교와 혼동X

3. Implicit Type Casting(명시적 형 변환)

Implicit Type Casting = 개발자가 의도를 가지고 데이터 타입을 변환시키는 것이다.
타입을 변경하는 기본적인 방법은 Object(), Number(), toString(), Boolean() 와 같은 함수를 이용
new 연산자가 없다면 사용한 함수는 타입을 변환하는 함수로써 사용

1var trans = 100 // Number
2
3Object(trans) // 100
4console.log(typeof trans) // Number
5
6toString(trans) // ”100"
7console.log(typeof trans) // String
8
9Boolean(trans) // true
10console.log(typeof trans) // Bolean

3.1 A Type → Number Type

다른 자료형을 숫자타입으로 변형하는 방법은 아래와 같다.

3.1.1 Number()

Number()는 정수형과 실수형의 숫자로 변환한다.
보통 문자형을 숫자형으로 변경할때 사용한다.
숫자로 변환되지 않는 경우에는 NaN(Not a Number)을 반환한다.

1Number(“12345”); //12345
2Number(“2”*2); //4

거짓같은 값(falsy values : null, false,“빈문자열”)에 대해서는 0으로 표현합니다. 참같은 값(truthy values)에 대해서는 1로 표현합니다. array의 경우는 Number()함수에서 사용하는 0을 반환합니다.

1const falsy1 = null
2Number(falsy1) // 0;
3
4const falsy2 = ''
5Number(falsy2) // 0;
6
7const falsy3 = false
8Number(falsy3) // 0;
9
10const truthy1 = []
11Number(truthy1) // 0;
12
13const truthy2 = true
14Number(truthy2) // 1;
15
16const truthy3 = {}
17Number({}) // NaN;

3.1.2 parseInt()

parseInt()는 정수형의 숫자로 변환한다. 만약 문자열이 ‘숫자0’으로 시작하면 8진수로 인식하고, ‘0x, OX’로 시작한다면 해당 문자열을 16진수 숫자로 인식한다. 또한 앞부분 빈 공백을 두고 나오는 문자는 모두 무시되어 NaN을 반환한다.

1parseInt(“27”) //27
2parseInt(0033); //27
3parseInt(0x1b); //27
4parseInt(“ 2”); //2
5parseInt(“ 2ㅎ”); //2
6parseInt(“ ㅎ2”); //NaN

💡 parseInt() VS Number()

parseInt()는 문자열로 된 부분에서 숫자(정수)만 뽑아서 변환해줌

Number()은 문자열 전체가 숫자일때 소수점까지 숫자타입으로 가져옴

3.1.3 parseFloat()

parseFloat()는 부동 소수점의 숫자로 변환한다. parseInt()와는 달리 parseFloat()는 항상 10진수를 사용하며 parseFloat() 또한 앞부분 빈 공백을 두고 나오는 문자는 모두 무시되어 NaN을 반환한다.

1parseFloat(“!123”); //NaN
2parseFloat(“123.123456”); //123.123456
3parseInt(“123.123456”); //123
4parseFloat(“ 123.123456”); //123.123456
5parseFloat(“ a123.123456”); //NaN

3.1.4 단항연산자(unary-operators)로 숫자형 타입 변경

1;+'1000' // 1000
2;+'-1000' // -1000
3;+'Infinity' // Infinity
4;-'1000' // -1000
5;+true // 1
6;+[] /// 0
7;+false // 0
8;+null // 0
9;+'' // 0

위 예제를 보면 단일 연산자를 이용한 숫자형 변환은 Number와 동일한 동작을 하는 것을 볼 수 있다. 단항 연산자는 자바스크립트 함수를 사용하지 않고 타입변환을 할 수 있는 쉽고 효율적인 방법이다.

3.2 A Type → String Type

다른 자료형을 문자타입으로 변형하는 방법은 아래와 같다.

3.2.1 String()

1String(123) //”123"
2String(123.456) //”123.456"

3.2.2 toString()

주어진 값을 문자열로 변환 후 반환합니다. toString()는 인자로 기수를 선택할 수 있다. 인자를 전달하지 않으면 10진수로 변환한다.

1var trans = 100
2trans.toString() //”100"
3trans.toString(2) //”1100100"
4trans.toString(8) //”144"
5var boolT = true
6var boolF = false
7boolT.toString() //”true”
8boolF.toString() //”false”

3.2.3 toFixed()

toFixed()의 인자를 넣으면 인자값만큼 반올림하여 소수점을 표현하며, 소수점을 넘치는 값이 인자로 들어오며 ‘0’으로 길이를 맞춘 문자열을 반환한다.

1var trans = 123.456789
2var roundOff = 99.987654
3trans.toFixed() //”123"
4trans.toFixed(0) //”123"
5trans.toFixed(2) //”123.46"
6trans.toFixed(8) //”123.45678900"
7roundOff.toFixed(2) //”99.99"
8roundOff.toFixed(0) //”100"

3.3 A Type → Boolean Type

자바스크립트에서는 Boolean타입으로 변경은 Boolean 또는 부정연산자(!)를 사용하여 Boolean값을 만들어낸다. 부정연산자는 의미그대로 !을 사용하면 Boolean() 반대의 값을 리턴한다.

다른 자료형을 불린타입으로 변형하는 방법은 아래와 같다.

1Boolean(100); //true
2Boolean(“1”); //true
3Boolean(true); //true
4Boolean(Object); //true
5Boolean([]); //true
6Boolean(0); //false
7Boolean(NaN); //false
8Boolean(null); //false
9Boolean(undefined); //false
10Boolean( ); //false
11
12const numb1 = 0;
13Boolean(numb1); // false
14!!numb1; // false
15!numb1; // true

Ref

자바스크립트의 형변환은 2가지다

04-데이터 타입-Object 06-기본 자료구조-Array, Map, Set