?? : 널 병합연산자 (Nullish Coalescing Operator)
- JavaScript에서 제공되는 독특한 연산자
- 왼쪽 피연산자가 null 또는 undefined일 때만 오른쪽 값을 반환하는 문법
- || 논리합 연산자(OR연산자) 와 비슷해 보이지만,
||는 0, 문자열 ("") , false 같은 "falsy" 값도 오른쪽 값으로 대체하는 반면
??는 null과 undefined만 처리
➡️ 기본값 설정이 필요한 경우 많이 사용.
값이 0, 빈 문자열(""), false 등의 falsy 값일 때도 그대로 사용하는 것이 중요한 상황에서 사용.
router.push(path ?? '/login');
/*
path ?? '/login'는
path가 null이거나 undefined인 경우에만 '/login'을 반환하고,
path에 값이 있으면 그 값을 그대로 사용한다는 의미.
*/
예)
1. 기본값 설정
const itemsPerPage = userSettings.itemsPerPage ?? 10;
2. 함수 매개변수 기본값
/* ?? 연산자 */
function greet(user) {
const name = user.name ?? "Guest";
console.log(`Hello, ${name}!`);
}
greet({ name: null }); // "Hello, Guest!"
greet({ name: "Alice" }); // "Hello, Alice!"
greet({ name: 0 }); // "Hello, 0!"
/*=============================================================*/
/* || 연산자 */
function bye(user) {
const name = user.name || "Guest";
console.log(`Goodbye, ${name}!`);
}
bye({ name: null }); // "Goodbye, Guest!"
bye({ name: "Tom" }); // "Goodbye, Tom!"
bye({ name: 0 }); // "Goodbye, Guest!"
3. 옵션 객체 초기화
const options = {
theme: userTheme ?? "light",
language: userLanguage ?? "en",
};
반응형
'D.evelop > JavaScript' 카테고리의 다른 글
[JS] 날짜 형식 커스텀 yyyy-mm-dd (0) | 2023.07.19 |
---|---|
[JS] value로 key값 찾기 (0) | 2023.07.19 |
[Ajax]비동기 처리(with jQuery) (0) | 2023.02.03 |
[JavaScript] encodeURIComponent()를 사용한 URI 공유 (0) | 2022.07.04 |
[JS lib.] Lodash - 기초 문법 (0) | 2022.06.28 |
댓글