[Deep Dive] 09장 타입 변환과 단축 평가
1. 타입 변환
# 명시적 타입 변환 / 타입 캐스팅
- 개발자가 의도적으로 값의 타입을 변환하는 것
parseInt(),toString()…
# 암묵적 타입 변환 / 타입 강제 변환
- 개발자의 의도와 상관없이 자바스크립트 엔진에 의해 암묵적으로 타입이 변환
- 표현식을 평가하기 위해 새로운 값을 생성하고 한번 사용하고 버림
명시적 타입 변환, 암묵적 타입 변환이 원시값(변수의 값)을 직접 변경하지 못함(원시값은 변경불가)
→ 기존 원시값을 이용해서 다른 타입의 새로운 원시값을 생성
2. 암묵적 타입 변환
# 문자열 타입
1 + '2'
// '12'
”+ 연산자”는 피연산자 중 하나 이상이 문자열이기 때문에 1이 문자열로 암묵적으로 변환됨
# 숫자 타입
1 - '1' // 0
1 * '10' // 10
1 / 'one' // NaN
“산술 연산자”는 숫자 값을 만드는 연산자로 문자열이 숫자값으로 암묵적 타입 변환됨
숫자로 변환되지 않는 문자열로 연산했을때는 NaN 반환
'1' > 0 // true
“비교 연산자”의 경우 크기를 비교하므로 숫자로 암묵적 타입 변환
자바스크립트 엔진은 숫자로 암묵적 변환을 할때 다음과 같다.
// 문자열 타입
+'' // 0
+'0' // 0
+'1' // 1
+'aaa' // NaN
// 불리언 타입
+true // 1
+false // 0
// null 타입
+null // 0
// undefined 타입
+undefined // NaN
// 심벌 타입
+Symbol() // error
// 객체 타입
+{} // NaN
+[] // 0
+[1,2,3] // NaN
+(function ()) // NaN
# 불리언 타입
자바스크립트 엔진은 불리언 타입이 아닌 값을 Truthy값(참), Falsy값(거짓)으로 구분
- Truthy값(참) => true
- Falsy값(거짓) => false
Falsy값(거짓) : false, undefined, null, 0, -0, NaN, ''
3. 명시적 타입 변환
# 문자열 타입
String생성자 함수를new연산자 없이 호출Object.prototype.toString메서드 사용- 문자열 연결 연산자(
+)를 사용
// String 생성자 함수
String(1) // "1"
// Object.prototype.toString 메서드
(1).toString() // "1"
// 문자열 연결 연산자
1 + "" // "1"
# 숫자 타입
Number생성자 함수를new연산자 없이 호출parseInt,parseFloat함수를 사용(문자열 → 숫자)+단항 산술 연산자 이용*산술 연산자 이용
// Number 생성자 함수
Number(1) // 1
// parseInt 함수
parseInt("1") // 1
// 단항 산술 연산자
+"1" // 1
// 산술 연산자
"1" * 1 // 1
# 불리언 타입
Boolean생성자 함수를new연산자 없이 호출!부정 논리 연산자를 두번 사용
// Boolean 생성자 함수
Boolean(1) // true
Boolean(0) // false
Boolean("") // false
Boolean({}) // true
Boolean([]) // true
// 부정 논리 연산자
!!'1' // true
!!'' // false
!!1 // true
!!0 // false
4. 단축 평가
&&, || 단축 평가 규칙
| 단축 평가 표현식 | 평가 결과 |
|---|---|
true || anything |
true |
false || anythig |
anything |
true && anything |
anything |
false && anythig |
false |
-
&&의 경우 첫번째 피연산자가true, 두번째 피연산자가true이면 두번째 피연산자를 반환 -
||의 경우 첫번째 피연산자가true이면 첫번째 피연산자를 반환
# if문 대체
let jongbin;
let bool = true;
if (true) {
jongbin = "hi";
}
console.log(jongbin); // hi
// 단축 평가로 대체
// bool이 false이면
let bool = false;
jongbin = bool || "hi";
console.log(jongbin) // hi
변수 bool이 true이면 true를 반환했을 것이다.
# 객체를 가르키는 변수 확인
변수가 객체가 아닌 null, undefined가 할당되어 있을 수 있는 경우에
let variable = null;
let value = variable && variable.value // null
변수 variable이 null이 아니었다면 정상적인 값을 출력
단축 평가를 사용하지 않고 그냥 참조하면 에러발생
# 함수 매개변수에 기본값 설정
함수를 호출할때 매개변수를 전달하지 않으면 매개변수는 undefined 자동 할당
→ 이로인해 일어날 에러를 방지하기 위해서
function num(x) {
x = x || 0;
return x*x
}
x를 전달하지 않으면 x는 undefined로 false값이기 때문에 0이 할당됨
# 옵셔널 체이닝 연산자(?.)
- ES11에서 도입
- 좌항의 피연산자가
null,undefined이면,undefined반환 - 좌항의 피연산자가
null,undefined이 아니면, 참조
let variable = null;
let value = variable?.value; // undefined
만약 변수variable이 정상적인 값이라면 변수value는 variable.value
# null 병합 연산자(??)
- ES11에서 도입
- 좌항의 피연산자가
null,undefined이면, 우항의 피연산자 반환 - 좌항의 피연산자가
null,undefined이 아니면, 좌항의 피연산자 반환
// 좌항이 null
let variable = null ?? "jongbin"; // "jongbin"
// 좌항이 null이 아니면
let variable = "won" ?? "jongbin"; // "won"
이웅모 선생님의 모던 자바스크립트 Deep Dive를 공부하기 위해 정리한 글입니다.
혹시나 보시다가 고칠 부분이나 마음에 안드시는 부분이 있다면 말씀해주시면 감사하겠습니다!