https://velog.io/@imjkim49/자바스크립트-데이터-타입-정리
자바스크립트의 모든 값은 데이터 타입을 갖는데, 이러한 타입은
자바스크립트 엔진에 의해 암묵적으로 - 암묵적 타입 변환 or 타입 강제 변환
개발자에 의해 의도적으로 - 명시적 타입 변환 or 타입 캐스팅
변환 될 수 있다.
자바스크립트 엔진에 의해 암묵적으로 타입을 변환하는 것
// 표현식이 모두 문자열 타입이여야 하는 컨텍스트
'10' + 2 // '102'
`1 * 10 = ${ 1 * 10 }` // "1 * 10 = 10"
// 표현식이 모두 숫자 타입이여야 하는 컨텍스트
5 * '10' // 50
자바스크립트 엔진은 컨텍스트를 고려하여 암묵적 타입 변환을 통해 표현식을 평가한다.
이때, 원시 타입 중 하나로 타입을 자동 변환하게 된다.
문자열 연결 연산자의 역할 = 문자열 값을 만드는 것
👉 문자열 연결 연산자의 피연산자는 컨텍스트 상 문자열 타입이여야 한다.
👉 자바스크립트 엔진은 문자열 연결 연산자의 피연산자 중에서 문자열 타입이 아닌 피연산자를 문자열 타입으로 암묵적 타입 변환
// 숫자 타입
0 + '' // "0"
NaN + '' // "NaN"
// 불리언 타입
true + '' // "true"
false + '' // "false"
// null 타입
null + '' // "null"
// undefined 타입
undefined + '' // "undefined"
// 심볼 타입
(Symbol()) + '' // TypeError: Cannot convert a Symbol value to a string
// 객체 타입
(function(){}) + '' // "function(){}"
Array + '' // "function Array() { [native code] }"
1) 산술 연산자의 역할 = 숫자 값을 만드는 것
👉 산술 연산자의 피연산자는 컨텍스트 상 숫자 타입이여야 한다.
👉 자바스크립트 엔진은 산술 연산자의 피연산자 중에서 숫자 타입이 아닌 피연산자를 숫자 타입(불가능할 경우엔 NaN)으로 암묵적 타입 변환
2) 비교 연산자의 역할 = 불리언 값을 만드는 것
👉 비교 연산자는 피연산자의 크기를 비교하므로 피연산자는 컨텍스트 상 숫자 타입이여야 한다.
👉 자바스크립트 엔진은 비교 연산자의 피연산자 중에서 숫자 타입이 아닌 피연산자를 숫자 타입으로 암묵적 타입 변환
// 문자열 타입
+'' // 0
+'0' // 0
// 불리언 타입
+true // 1
// undefined 타입
+undefined // NaN
// 심볼 타입
+Symbol() // TypeError: Cannot convert a Symbol value to a number
// 객체 타입
+{} // NaN
+[] // 0
💡 빈 문자열(‘’), 빈 배열([]), null, false는 0으로, true는 1로 변환되고, 객체와 빈 배열이 아닌 배열, undefined는 변환되지 않아 NaN이 된다.
조건식(if 문, for 문 등) = 불리언 값, 즉 논리적 참, 거짓을 반환해야 하는 표현식
👉 자바스크립트 엔진은 제어문의 조건식, 평가 결과를 불리언 타입으로 암묵적 타입 변환
👉 불리언 타입이 아닌 값을 Falsy 값(거짓으로 인식할 값) 또는 Truthy 값(참으로 인식할 값)으로 구분
Falsy 값(거짓으로 인식할 값)
if (!false) console.log(false + ' is falsy value');
if (!undefined) console.log(undefined + ' is falsy value');
if (!null) console.log(null + ' is falsy value');
if (!0) console.log(0 + ' is falsy value');
if (!NaN) console.log(NaN + ' is falsy value');
if (!'') console.log('' + ' is falsy value');
Truthy 값(참으로 인식할 값)
개발자의 의도에 의해 명시적으로 타입을 변경하는 것
String 생성자 함수를 new 연산자 없이 호출하는 방법
Object.prototype.toString 메소드를 사용하는 방법
문자열 연결 연산자를 이용하는 방법
// 1. String 생성자 함수를 new 연산자 없이 호출하는 방법
// 숫자 타입 => 문자열 타입
console.log(String(1)); // "1"
console.log(String(NaN)); // "NaN"
// 불리언 타입 => 문자열 타입
console.log(String(true)); // "true"
// 2. Object.prototype.toString 메소드를 사용하는 방법
// 숫자 타입 => 문자열 타입
console.log((1).toString()); // "1"
console.log((NaN).toString()); // "NaN"
// 불리언 타입 => 문자열 타입
console.log((true).toString()); // "true"
// 3. 문자열 연결 연산자를 이용하는 방법
// 숫자 타입 => 문자열 타입
console.log(1 + ''); // "1"
console.log(NaN + ''); // "NaN"
// 불리언 타입 => 문자열 타입
console.log(true + ''); // "true"
Number 생성자 함수를 new 연산자 없이 호출하는 방법
parseInt, parseFloat 함수를 사용하는 방법(문자열만 변환 가능)
+ 단항 연결 연산자를 이용하는 방법
* 산술 연산자를 이용하는 방법
// 1. Number 생성자 함수를 new 연산자 없이 호출하는 방법
// 문자열 타입 => 숫자 타입
console.log(Number('0')); // 0
console.log(Number('-1')); // -1
// 불리언 타입 => 숫자 타입
console.log(Number(true)); // 1
// 2. parseInt, parseFloat 함수를 사용하는 방법(문자열만 변환 가능)
// 문자열 타입 => 숫자 타입
console.log(parseInt('0')); // 0
console.log(parseFloat('10.53')); // 10.53
// 3. + 단항 연결 연산자를 이용하는 방법
// 문자열 타입 => 숫자 타입
console.log(+'0'); // 0
console.log(+'-1'); // -1
// 불리언 타입 => 숫자 타입
console.log(+true); // 1
// 4. * 산술 연산자를 이용하는 방법
// 문자열 타입 => 숫자 타입
console.log('0' * 1); // 0
console.log('-1' * 1); // -1
// 불리언 타입 => 숫자 타입
console.log(true * 1); // 1
Boolean 생성자 함수를 new 연산자 없이 호출하는 방법
! 부정 논리 연산자를 두번 사용하는 방법
// 1. Boolean 생성자 함수를 new 연산자 없이 호출하는 방법
// 문자열 타입 => 불리언 타입
console.log(Boolean('x')); // true
console.log(Boolean('')); // false
console.log(Boolean('false')); // true
// 숫자 타입 => 불리언 타입
console.log(Boolean(0)); // false
console.log(Boolean(1)); // true
console.log(Boolean(NaN)); // false
console.log(Boolean(Infinity)); // true
// null 타입 => 불리언 타입
console.log(Boolean(null)); // false
// undefined 타입 => 불리언 타 입
console.log(Boolean(undefined)); // false
// 객체 타입 => 불리언 타입
console.log(Boolean({})); // true
console.log(Boolean([])); // true
// 2. ! 부정 논리 연산자를 두번 사용하는 방법
// 문자열 타입 => 불리언 타입
console.log(!!'x'); // true
console.log(!!''); // false
console.log(!!'false'); // true
// 숫자 타입 => 불리언 타입
console.log(!!0); // false
console.log(!!1); // true
console.log(!!NaN); // false
console.log(!!Infinity); // true
// null 타입 => 불리언 타입
console.log(!!null); // false
// undefined 타입 => 불리언 타입
console.log(!!undefined); // false
// 객체 타입 => 불리언 타입
console.log(!!{}); // true
console.log(!![]); // true
&&
(논리곱), ||
(논리합) 연산자는 왼쪽부터 오른쪽으로 평가를 진행하는데, 중간에 평가 결과가 나오면 오른쪽 끝까지 가지 않고 논리 평가를 결정한 피연산자의 평가 결과를 그대로 반환해 버리는 것
&&
(논리곱)은 두개의 피연산자가 모두 true
로 평가될 때 true
를 반환'Cat' && 'Dog' // “Dog”
true
로 평가된다. 하지만 이 시점까지는 위 표현식을 평가할 수 없다. 두번째 피연산자까지 평가해 보아야 위 표현식을 평가할 수 있다.true
로 평가된다. 이때 두개의 피연산자가 모두 true
로 평가되었다. 이때 논리곱 연산의 결과를 결정한 것은 두번째 피연산자 ‘Dog’다.&&
는 논리 연산의 결과를 결정한 두번째 피연산자의 평가 결과 즉, 문자열 ‘Dog’를 그대로 반환한다.||
(논리합)은 두개의 피연산자 중 하나만 true로 평가되어도 true를 반환'Cat' || 'Dog' // 'Cat'
true
로 평가된다. 이 시점에 두번째 피연산자까지 평가해 보지 않아도 위 표현식을 평가할 수 있다.||
는 논리 연산의 결과를 결정한 첫번째 피연산자의 평가 결과 즉, 문자열 ‘Cat’를 그대로 반환한다.