자주 사용하는 연산자는 아니지만 (?는 자주 사용하는 것 같다.)
쓰고나면 나도 유용하게 쓸 수 있을 것 같아서 써본다.
참고로 나머지는 여기서 볼 수 있다.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators
물음표 한 개 (?, Conditional Ternary Operator)
삼항 연산자라고도 불린다.
(조건) ? (참일 때의 값) : (거짓일 때의 값) 이다.
function getFee(isMember) {
return isMember ? '$2.00' : '$10.00';
}
console.log(getFee(true));
// 예상 출력: "$2.00"
console.log(getFee(false));
// 예상 출력: "$10.00"
console.log(getFee(null));
// 예상 출력: "$10.00"
물음표 두 개 (??, Nullish Coalescing Operator)
왼쪽 연산의 결과가 null 또는 undefined라면 오른쪽 연산의 결과를 반환하는 연산자이다.
const nullValue = null;
const emptyText = ""; // falsy
const someNumber = 42;
const valA = nullValue ?? "default for A";
const valB = emptyText ?? "default for B";
const valC = someNumber ?? 0;
console.log(valA); // "default for A"
console.log(valB); // "" (빈 문자열은 null이나 undefined가 아니기 때문)
console.log(valC); // 42
|| 연산자를 사용하여 값을 반환하는 것과는 다르다.
|| 연산자는 왼쪽 연산의 결과가 falsy 할 때도 오른쪽 연산의 결과를 반환한다.
const count = 0;
const text = "";
const qty = count || 42;
const message = text || "hi!";
console.log(qty); // 0이 아닌 42를 출력
console.log(message); // 빈 문자열이 아닌 "hi!"를 출력
함수 실행 시에도 ?? 연산자를 활용할 수 있다.
function a() {
console.log("a was called");
return undefined;
}
function b() {
console.log("b was called");
return false;
}
function c() {
console.log("c was called");
return "foo";
}
console.log(a() ?? c());
// 1. "a was called" 출력
// 2. "c was called" 출력
// 3. "foo" 출력
// a()가 undefined를 반환하기 때문에 두 표현식 모두가 실행된다.
console.log(b() ?? c());
// 1. "b was called" 출력
// 2. "false" 출력
// b()가 false를 반환하기 때문에 (null이나 undefined가 아님),
// 오른쪽 표현식은 실행되지 않는다.
옵셔널 체이닝 연산자(?.)와도 같이 사용할 수 있다.
const foo = { someFooProp: "hi" };
console.log(foo.someFooProp?.toUpperCase() ?? "not available"); // "HI"
console.log(foo.someBarProp?.toUpperCase() ?? "not available"); // "not available"
false를 true로, true를 false로 변경하는 연산자이다.
단순히 false가 아닌 JavaScript에서 falsy하다고 여겨지는 값들(null, undefined, NaN, 0, 빈 문자열)이 true가 된다.
!true; // false
!false; // true
!""; // true
!"Cat"; // false
false/true가 아니지만 falsy/truthy인 값을 false/true로 명시적으로 출력하고 싶을 때 사용할 수 있는 연산자
!!true; // true
!!{}; // 모든 객체는 truthy하기 때문에 true를 반환
!!new Boolean(false); // false 값을 가진 Boolean 객체도 true를 반환
!!false; // false
!!""; // false
!!Boolean(false); // Boolean(false)는 객체가 아닌 false값을 반환하기 때문에 false
Number 또는 BigInt 형에서, 비트가 1인 곳은 0으로, 0인 곳은 1로 변환시키는 연산자
Number는 32비트 정수를 표현할 수 있어, 더 많은 비트를 가지고 있다면 앞의 비트가 제거될 수도 있다.
Before: 11100110111110100000000000000110000000000001
After: 10100000000000000110000000000001
2의 보수에 대한 개념을 알면 이해가 더 쉬울 수 있다. 실수를 정수로 변환할 때는 ~가 아닌 Math.trunc() 함수를 사용하면 된다.
~0; // -1
~-1; // 0
~1; // -2
~0n; // -1n
~4294967295n; // -4294967296n