Recent Posts
Recent Comments
Archives
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
Tags
- 오블완
- vercel
- 프로그래머스
- vscode
- 자주 까먹는
- useRouter
- git
- 구글 로그인
- CORS
- domain
- 코드카타
- 초기셋팅
- 모던자바스크립트
- js
- 코딩테스트
- 프로젝트 셋팅
- 내일배움캠프
- 티스토리챌린지
- error
- 리터럴
- 셋팅
- Next
- nextjs
- React
- deep dive
- 스파르타코딩클럽
- 모던 자바스크립트
- 소셜 로그인
- 코테
- array정적메서드
- Today
- Total
파피루스
9-2장, 단축 평가 본문
표현식을 평가하는 도중에, 평가 결과가 확정된 경우 나머지 평가 과정을 생략하는 것을 말한다.
(1) 논리 연산자
논리곱(&&)과 논리합(||)를 이용한 평가 결과는 불리언 값이 아닐 수 있다.
단축평가 규칙
표현식 | 평가 결과 |
true || anything | true |
false || anything | anything |
true && anything | anything |
false && anything | false |
// 예시
'Cat' && 'Dog'; // "Dog"
'Cat' || 'Dog'; // "Cat"
응용 1. 변수가 null 또는 undefined가 아닌지 확인할 때
var elem = null;
var value = elem && elem.value;
응용 2. 함수 매개변수에 기본값을 설정할 때
// 예시 1.
function getStringLength(str) {
str = str || '';
return str.length;
}
// 예시 2.
function getStringLength(str = '') {
return str.length;
}
(2) 옵셔널 체이닝 연산자
논리연산자(&&) 이용 | var value = elem && elem.value; |
옵셔널 체이닝 연산자 | var value = elem?.value; |
(3) null 병합 연산자
논리연산자(||) 이용 | var value = elem || elem.value; |
null 병합 연산자 이용 | var value = elem?.value; |
주로 변수에 기본값을 설정할 때 유용하다. null 병합 연산자가 도입되기 전에는 논리연산자(||)를 이용했다.
하지만 논리합(||) 연산자와 null 병합 연산자가 조금 다른 부분이 있어, 아래 예시에 적는다.
// string 의 빈값도 유효한지에 따라 조금 다르게 써야한다.
// 논리연산자(||) 이용 시
var foo = '' || 'hello';
console.log(foo); // "hello" (우측값)
// null 병합 연산자 이용
var foo = '' ?? 'hello';
console.log(foo); // "" (좌측값)
- 논리합(||) 연산자의 Falsy 값 : undefined, null, false, 0, -0, NaN, 빈 문자열('')
- null 병합 연산자의 Falsy 값 : undefined, null
'Book > 모던 자바스크립트 Deep Dive' 카테고리의 다른 글
11장, 원시값과 객체의 비교 (0) | 2024.04.19 |
---|---|
10장, 객체 리터럴 (1) | 2024.04.19 |
9-1장, 타입 변환 (0) | 2024.04.19 |
6장, 데이터 타입 (2) | 2024.04.18 |
5장, 표현식과 문 (0) | 2024.04.18 |