형 변환

형 변환 (Type Conversion)

console.log('10' + '5'); //105 -> 문자열
console.log(10 + 5); // 15 -> 숫자형

// String, Number, Boolean로 변환
console.log(Number('10') + Number('5')); // 15
console.log(String(10) + String(5)); // 105

 

숫자 -> 문자

// 숫자 -> 문자
let x = 123;

console.log(x); // 123
console.log(String(x)); // 123
console.log(typeof x); // number
console.log(typeof String(x)); // String

 

불린 -> 문자

let y = true;

console.log(y); // true
console.log(String(y)); // true
console.log(typeof y); // boolean
console.log(typeof String(y)); // string

 

문자 -> 숫자

let x = '123';

console.log(x); // 123
console.log(Number(x)); // 123
console.log(typeof x); // String
console.log(typeof Number(x)); // Number

 

불린 -> 숫자

let y = true;

console.log(y); // true
console.log(Number(y)); // 1
console.log(typeof y); // boolean
console.log(typeof Number(y)); // number

let y = false;

console.log(y); // false
console.log(Number(y)); // 0
console.log(typeof y); // boolean
console.log(typeof Number(y)); // number

- true = 1

- false = 0

 

문자 -> 불린

let x = '';

console.log(x); //  (빈 문자열)
console.log(Boolean(x)); // false 
console.log(typeof x); // string
console.log(typeof Boolean(x)); //boolean

- 빈 문자열의 경우 Boolean에서 false로 반환

 

숫자 -> 불린

 

let y = 0;

console.log(y); // 0
console.log(Boolean(y)); // false
console.log(typeof y); // number
console.log(typeof Boolean(y)); // boolean

let y = NaN;

console.log(y); // NaN
console.log(Boolean (y)); // false
console.log(typeof y); // number
console.log(typeof Boolean(y)); // boolean

- Boolean에서는 ' ' (빈 문자) / 0 / NaN는 false로 반환 -> falsy 값

 

퀴즈

console.log(Number('1' + '2' + '3') - Number(true)); // 122 -> 123 - 1 = 122

Boolean("false"); // true -> "false"라는 값이 있기 때문에 true
Boolean(6 % 2); // false -> 0인 값은 false
Boolean(NaN) || Boolean('0'); // true -> false || true = true
Boolean(typeof false); // true -> 값이 있는 경우 true

---

- 서로 다른 문자형을 연산하면 오류로 처리

- 유연하게 계산하는 경우

console.log('4' - true); // 3 -> 4 - 1

 

산술 연산자 (+, -, *, /, %, **)

- 일반적으로 연산되어 지는 두 값을 숫자로 먼저 변환 후 연산

- 더하기(+) 연산자는 문자열을 연결하는 기능이 있기 때문에 주의

- 더하기(+) 연산자의 경우 문자열을 연결하는 기능이 강함

console.log(4 + '2'); // 42 -> 더하기(+)는 문자열을 연결하는 기능이 강함
console.log(4 + 2); // 6 -> 4 + 2
console.log(4 - true); // 3 -> 4 -1
console.log(4 * false); // 0 -> 4 * 0
console.log(4 / '2'); // 2 -> 4 / 2
console.log('4' ** true); // 4 -> 4 ** 1
console.log(4 % 'two'); // NaN -> 4 % NaN = NaN

 

관계 비교 연산 (<, <=, >, >=)

- 특별한 경우를 제외하면 숫자형으로 변환후 연산

console.log(2 < '3'); // true -> 2 < 3 = true
console.log(2 > true); // true -> 2 > 1 = true
console.log('2' <= false); // false -> 2 <= 0 = false
console.log('two' >= 1); // false -> NaN >= 1 -> 0 >= 1 = false

 

값을 비교 연산(===, !==. ==, !=)

- 일치(===) / 불일치(!==)

- 동등(==) / 부등(!=)

- 일치비교는 형변환이 일어나지 않음

- 동등비교는 숫자형으로 형변환이 일어남

- ==보다는 ===을 사용하는 것을 권장

console.log(1 === '1'); // false -> 숫자 1 === 문자형 1 = false
console.log(1 === true); // false -> 1 === boolean true = false
console.log(1 == '1'); // true -> 1 == 1 = true
console.log(1 == true); // true -> 1 == 1 = true

 

퀴즈

console.log(typeof ('4' + 3)); // string -> String 4 + Number 3 = 43 (더하기의 경우 문자열더하기가 더 우선순위)
console.log(typeof (3 - true)); // number -> 3 - 1 = 2
console.log(typeof (Boolean(5) * true)); // number -> true * true = 1
console.log(typeof (true < false)); // boolean -> 1<0 = false

 

console.log(0 !== Number(false)); // false -> 0 !== 0 = false
console.log(Number(true) == String(1)); // true -> 1 == 1 = true
console.log('5' / true != '5'); // false -> 5 / true = 5 -> true != 5 -> false
console.log(5 % 2 === Boolean(2) * true); // true -> 1 === true * true = true