자바스크립트 물음표(?) 문법 총정리: 3가지 사용법 완전 정복

자바스크립트의 물음표(?) 사용법을 총정리합니다. 삼항 연산자, 옵셔널 체이닝, 널리쉬 콜레싱의 개념과 실무 예제를 통해 코드를 간결하고 안전하게 만드세요.

자바스크립트로 코드를 짜다 보면 여기저기서 등장하는 물음표(?) 때문에 고개를 갸웃한 경험, 다들 한 번쯤 있으실 거예요. if문과 비슷해 보이기도 하고, 객체 속성에 붙어 있기도 하고, 연산자 사이에 뜬금없이 나타나기도 하죠.

이 물음표들은 사실 자바스크립트 코드를 훨씬 더 간결하고 우아하게 만들어주는 아주 유용한 문법적 장치입니다. 특히 실무에서는 반복적인 코드를 줄여주고 예외 상황을 효과적으로 처리하기 위해 정말 많이 사용돼요.

이번 포스트에서는 자바스크립트 개발자라면 반드시 알아야 할 물음표(?)의 세 가지 용법인 삼항 연산자, 옵셔널 체이닝, 그리고 널리쉬 콜레싱에 대해 자세히 알아보겠습니다. 각 문법이 왜 필요한지, 그리고 실제 코드에서 어떻게 활용할 수 있는지 명확한 예시와 함께 설명해 드릴게요. 이 글을 끝까지 읽으시면 더 이상 물음표를 두려워하지 않고 자유자재로 활용하는 자신을 발견하게 될 겁니다!

1. 삼항 연산자 (Ternary Operator): 조건 ? 값1 : 값2

삼항 연산자는 if...else 문을 한 줄로 축약해주는 가장 기본적인 물음표 문법입니다. 이름처럼 세 개의 피연산자(조건, 참일 때 값, 거짓일 때 값)를 필요로 하죠.

• 문법: 조건 ? 참일_때_표현식 : 거짓일_때_표현식

if...else 문과 비교해 보면 그 역할이 명확하게 보입니다.

// if...else 문 사용
let isAdult;
const age = 20;

if (age > 18) {
  isAdult = true;
} else {
  isAdult = false;
}
console.log(isAdult); // true

// 삼항 연산자 사용
const isAdultTernary = age > 18 ? true : false;
console.log(isAdultTernary); // true

코드가 훨씬 간결해졌죠? 삼항 연산자는 이렇게 조건에 따라 다른 값을 변수에 할당할 때 아주 유용합니다.

삼항 연산자의 장점

• 간결함: if...else 블록을 여러 줄 작성할 필요 없이 한 줄로 표현할 수 있어 코드 가독성을 높일 수 있습니다.
• 표현식: 삼항 연산자는 값을 반환하는 '표현식’이기 때문에, 변수 할당 외에도 함수의 인자나 다른 표현식 내부에 바로 사용할 수 있습니다.

중첩 사용도 가능해요!

삼항 연산자를 여러 개 연결하여 else if와 비슷한 구문을 만들 수도 있습니다.

const age = 15;

const message = age < 8 ? '어린이 입니다' :
                age < 18 ? '청소년 입니다' :
                '성인 입니다';

console.log(message); // '청소년 입니다'

다만, 중첩이 너무 깊어지면 오히려 가독성을 해칠 수 있으니 2~3개 정도의 조건에서만 사용하는 것을 추천합니다. 그 이상 복잡해지면 if...else if 문이나 switch 문이 더 나은 선택일 수 있어요.

2. 옵셔널 체이닝 (Optional Chaining): 객체?.속성

옵셔널 체이닝(?.)은 ES2020(ES11)에서 도입된 비교적 최신 문법으로, 실무에서 정말 사랑받는 기능 중 하나입니다. 이 기능은 객체의 속성에 접근할 때, 해당 객체나 그 상위 속성이 null 또는 undefined일 경우 에러를 발생시키는 대신 undefined를 반환해 줍니다.

예를 들어, 서버에서 사용자 정보를 받아와 프로필 사진을 보여줘야 하는 상황을 생각해 봅시다.

const user = {
  name: "조이",
  // profile 객체가 없을 수도 있음
};

// 옵셔널 체이닝이 없다면?
// const profileImage = user.profile.image; // TypeError: Cannot read properties of undefined (reading 'image')

위 코드에서 user 객체에는 profile 속성이 없기 때문에 user.profile은 undefined가 되고, undefined에서 image 속성을 찾으려 하니 TypeError가 발생합니다. 이런 에러는 애플리케이션을 멈추게 할 수 있죠.

과거에는 이런 에러를 막기 위해 if 문이나 && 연산자를 사용했습니다.

// 1. if 문으로 체크
let profileImage;
if (user && user.profile) {
  profileImage = user.profile.image;
}

// 2. && 연산자로 체크
const profileImageAnd = user && user.profile && user.profile.image;

하지만 옵셔널 체이닝을 사용하면 이 코드가 마법처럼 간단해집니다.

const user = {
  name: "조이",
};

const profileImage = user.profile?.image;
console.log(profileImage); // undefined (에러 발생 X)

user.profile이 undefined이므로 ?. 연산자는 즉시 평가를 멈추고 undefined를 반환합니다. 덕분에 런타임 에러 없이 안전하게 값을 처리할 수 있게 된 것이죠! 객체 속성뿐만 아니라 배열 요소(arr?.[index])나 함수 호출(func?.())에도 사용할 수 있어 활용도가 매우 높습니다.

3. 널리쉬 콜레싱 (Nullish Coalescing): 값1 ?? 값2

널리쉬 콜레싱(??), 한국어로는 'null 병합 연산자’라고 불리는 이 문법도 옵셔널 체이닝과 함께 ES2020에 도입되었습니다. 이 연산자는 왼쪽 피연산자가 **null 또는 undefined**일 경우에만 오른쪽 피연산자를 반환하고, 그 외의 경우에는 왼쪽 피연산자를 그대로 반환합니다.

기본값을 설정할 때 아주 유용하게 쓰이는데, 흔히 사용되던 논리적 OR 연산자(||)의 단점을 보완해 줍니다.

|| 연산자와의 차이점

|| 연산자는 왼쪽 피연산자가 ‘falsy’ 값일 때 오른쪽 값을 반환합니다. 자바스크립트에서 falsy 값에는 null, undefined뿐만 아니라 0, ""(빈 문자열), false, NaN도 포함됩니다.

이 때문에 의도치 않은 버그가 발생할 수 있습니다. 예를 들어, 사용자가 설정한 값이 0이나 빈 문자열인데 이를 유효한 값으로 처리하고 싶을 때 ||를 사용하면 문제가 됩니다.

let height = 0;

console.log(height || 100); // 100
// height가 0(falsy)이므로 100이 출력됨. 의도한 동작이 아닐 수 있음.

이런 상황에서 널리쉬 콜레싱(??)이 빛을 발합니다. ??는 오직 null과 undefined만 체크하기 때문이죠.

let height = 0;
let text = "";

console.log(height ?? 100); // 0 (height는 null이나 undefined가 아니므로 그대로 0을 반환)
console.log(text ?? "기본값"); // "" (text는 null이나 undefined가 아니므로 그대로 빈 문자열을 반환)

let missingValue = null;
console.log(missingValue ?? "기본값"); // "기본값"

이처럼 ??를 사용하면 0이나 "" 같은 유효한 값을 유지하면서 null 또는 undefined일 때만 안전하게 기본값을 설정할 수 있습니다.

연산자 조합 시 주의사항

?? 연산자는 다른 논리 연산자(&&, ||)와 함께 사용할 때 괄호 없이는 사용할 수 없도록 명세에 정의되어 있습니다. 이는 개발자의 실수를 방지하기 위함입니다. 따라서 다른 연산자와 함께 사용하려면 반드시 괄호로 우선순위를 명확하게 지정해 주어야 합니다.

// let x = 1 && 2 ?? 3; // SyntaxError 발생!

let x = (1 && 2) ?? 3; // 올바른 사용법
console.log(x); // 2

정리하며: 물음표와 친해지기

지금까지 자바스크립트에서 물음표(?)가 사용되는 세 가지 핵심 문법을 살펴보았습니다.

• 삼항 연산자 (? :): if...else를 한 줄로 줄여 조건에 따라 다른 값을 반환하고 싶을 때 사용합니다.
• 옵셔널 체이닝 (?.): 객체의 중첩된 속성에 접근할 때 null이나 undefined로 인한 에러를 방지하고 싶을 때 사용합니다.
• 널리쉬 콜레싱 (??): 변수에 기본값을 할당할 때, 0이나 ""과 같은 falsy 값을 유효한 것으로 인정하고 싶을 때 사용합니다.

이 세 가지 문법은 현대 자바스크립트 개발에서 코드의 안정성과 가독성을 크게 향상시키는 필수적인 도구입니다. 처음에는 조금 낯설 수 있지만, 몇 번만 직접 사용해 보면 금방 익숙해지고 그 편리함에 매료될 거예요. 이제 여러분의 코드에서 복잡한 if 문과 && 체인을 세련된 물음표 문법으로 바꿔보세요!