Skip to Content
BlogJavaScript 정리기초 정리연산자 산술/비교/논리부터 옵셔널 체이닝, null 병합까지

연산자 산술/비교/논리부터 옵셔널 체이닝, null 병합까지

산술 / 비교 / 논리 연산자

산술 연산자

숫자를 계산할 때 쓰는 기본 연산자다.

console.log(10 + 3); // 13
console.log(10 - 3); // 7
console.log(10 * 3); // 30
console.log(10 / 3); // 3.333...
console.log(10 % 3); // 1  (나머지)
console.log(10 ** 3); // 1000 (거듭제곱, ES6)
let a = 5;
console.log(a++); // 5 (먼저 반환하고 증가)
console.log(a);   // 6
 
let b = 5;
console.log(++b); // 6 (먼저 증가하고 반환)

비교 연산자

두 값을 비교해서 boolean 값을 반환한다.

console.log(5 > 3);   // true
console.log(5 < 3);   // false
console.log(5 >= 5);  // true
console.log(5 <= 4);  // false
 
console.log(5 == "5");  // true  (타입 변환 후 비교)
console.log(5 === "5"); // false (타입까지 비교)
console.log(5 != "5");  // false
console.log(5 !== "5"); // true

논리 연산자

조건을 조합하거나 값의 흐름을 제어할 때 사용한다.

console.log(true && false); // false (AND: 둘 다 true여야 true)
console.log(true || false); // true  (OR: 하나만 true여도 true)
console.log(!true);         // false (NOT: 반전)

논리 연산자는 boolean 값만 반환하는 게 아니라, 평가된 피연산자 자체를 반환한다는 점이 중요하다.

console.log(0 && "hello");     // 0     (앞이 falsy면 앞의 값을 그대로 반환)
console.log("hi" && "hello");  // "hello" (앞이 truthy면 뒤의 값을 반환)
 
console.log(0 || "기본값");     // "기본값" (앞이 falsy면 뒤의 값을 반환)
console.log("hi" || "기본값");  // "hi"    (앞이 truthy면 앞의 값을 반환)

이 특성 때문에 ||는 실무에서 기본값 설정 용도로 자주 쓰인다.

다만 0이나 ""처럼 falsy하지만 의미 있는 값이 들어올 경우 의도치 않게 기본값으로 대체되는 문제가 있는데, 이건 바로 다음에 나올 null 병합 연산자(??)로 해결할 수 있다.



옵셔널 체이닝 (?.)

객체 안에 중첩된 속성에 접근할 때, 중간 값이 null이나 undefined일 수도 있는 상황에서 에러 없이 안전하게 접근하게 해주는 문법이다. ES2020에 도입됐다.

기존 방식의 문제

const user = { name: "철수" };
 
console.log(user.address.city);
// TypeError: Cannot read properties of undefined

user에 address가 없는데 address.city에 접근하려고 하면 에러가 발생하며 코드 전체가 멈춘다. 이걸 막으려면 예전에는 이렇게 방어 코드를 여러 겹 써야 했다.

const city = user && user.address && user.address.city;

옵셔널 체이닝 사용

console.log(user?.address?.city); // undefined (에러 없이 안전하게 처리)

중간에 있는 값이 null 또는 undefined이면, 에러를 던지지 않고 그 자리에서 바로 undefined를 반환한다.

함수 호출에도 사용 가능

const obj = {
  greet() {
    console.log("안녕하세요");
  }
};
 
obj.greet?.();   // 실행됨
obj.sayBye?.();  // sayBye가 없으므로 아무 일도 일어나지 않음 (에러 X)

배열/대괄호 접근에도 사용 가능

const arr = null;
console.log(arr?.[0]); // undefined

API 응답값처럼 데이터가 있을 수도, 없을 수도 있는 상황에서 특히 유용하다.



null 병합 연산자 (??)

왼쪽 값이 null 또는 undefined일 때만 오른쪽 값을 반환하는 연산자다. ES2020에 도입됐고, 옵셔널 체이닝과 세트로 자주 함께 쓰인다.

||와의 차이가 핵심

앞서 본 것처럼 ||는 왼쪽 값이 falsy(0, "", null, undefined, NaN, false)이기만 하면 오른쪽 값을 반환한다. 반면 ??는 왼쪽 값이 정확히 null 또는 undefined일 때만 오른쪽 값을 반환한다.

const count = 0;
 
console.log(count || 10); // 10 (0은 falsy라서 오른쪽 값 반환 — 의도와 다를 수 있음)
console.log(count ?? 10); // 0  (0은 null/undefined가 아니므로 왼쪽 값 그대로 반환)

이 차이 때문에 0, "", false처럼 의미 있는 falsy 값을 다룰 때는 ??를 쓰는 게 안전하다.

옵셔널 체이닝과 함께 쓰는 패턴

const user = { name: "철수", address: null };
 
const city = user?.address?.city ?? "주소 정보 없음";
console.log(city); // "주소 정보 없음"

값이 있으면 그 값을, 없으면 명확한 기본값을 안전하게 지정할 수 있어서 API 데이터 처리나 사용자 입력값 처리에서 특히 유용하다.



마지막 수정