0Pricing
JavaScript Academy · 강의

?. 연산자를 사용한 선택적 연결

깊이 중첩된 속성에 안전하게 접근합니다.

?. 연산자를 사용한 선택적 연결은(는) CoddyKit의 무료 JavaScript Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 JavaScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

문제

undefined 또는 null인 값의 속성을 읽으면 TypeError가 발생합니다. 옵셔널 체이닝을 사용하면 중첩된 값을 안전하게 읽을 수 있습니다.

const user = {};
console.log(user.profile && user.profile.name);

?. 연산자

옵셔널 체이닝 연산자인 ?.는 왼쪽의 값이 null 또는 undefined이면 중단하고 undefined를 반환하므로 오류를 발생시키지 않습니다.

const user = {};
console.log(user.profile?.name); // undefined, no error

깊은 속성 읽기

여러 ?. 단계를 연결하면 각 단계마다 직접 보호 조건을 작성하지 않고도 깊이 중첩된 구조를 탐색할 수 있습니다.

const data = { user: { address: { city: "Paris" } } };
console.log(data.user?.address?.city); // "Paris"

단축 평가

연결된 요소 중 하나라도 null 또는 undefined이면 전체 표현식이 undefined로 단축 평가되고 나머지는 평가되지 않습니다.

const data = { user: null };
console.log(data.user?.address?.city); // undefined

null 또는 undefined일 때만 작동

?.는 null 또는 undefined일 때만 단축 평가합니다. 0이나 ""과 같은 다른 거짓 값은 실제 값이므로 정상적으로 접근합니다.

const obj = { count: 0 };
console.log(obj.count?.toString()); // "0"

&&와 비교

?.가 없던 시절에는 && 보호 조건을 연결했습니다. 옵셔널 체이닝은 같은 의도를 더 짧고 명확하게 표현합니다.

const u = { profile: { name: "Ada" } };
const a = u && u.profile && u.profile.name;
const b = u?.profile?.name;
console.log(a, b);

호출 뒤에 연결하기

메서드 호출 뒤에도 연결을 계속하여 반환된 값의 속성에 안전하게 접근할 수 있습니다.

const config = { get: () => ({ port: 8080 }) };
console.log(config.get()?.port); // 8080

연결 중간의 단축 평가

중간 요소가 null 또는 undefined이면 평가가 즉시 중단됩니다. 뒤에 있는 요소가 함수를 호출할 수 있는 경우에도 마찬가지입니다.

const obj = { a: null };
console.log(obj.a?.b.c.d); // undefined, never touches b/c/d

할당에는 사용할 수 없음

옵셔널 체이닝은 읽기 위한 기능입니다. 옵셔널 체이닝의 대상에는 값을 할당할 수 없으며, =의 왼쪽에 사용하면 구문 오류가 발생합니다.

const o = { x: 1 };
// o?.x = 5; // SyntaxError
o.x = 5;
console.log(o.x);

배열과 함께 사용하기

대괄호를 사용한 접근에도 적용되며, 이 내용은 뒤에서 더 자세히 다룹니다. null 또는 undefined를 안전하게 처리하는 원리는 같습니다.

const state = { items: ["a", "b"] };
console.log(state.items?.[0]); // "a"

과도한 사용 피하기

값이 정상적으로 없을 수 있는 곳에서만 ?.를 사용하십시오. 지나치게 사용하면 실제로 확인해야 하는 오류까지 숨길 수 있습니다.

const order = { total: 42 };
console.log(order.total?.toFixed(2)); // "42.00"

빠른 확인

결과를 예측하십시오.

복습

?. 연산자는 속성을 안전하게 읽습니다. 왼쪽이 null 또는 undefined이면 오류를 발생시키는 대신 undefined를 반환하고 나머지 연결을 단축 평가합니다. null 또는 undefined인 값에만 작동하며 0이나 ""에는 작동하지 않습니다. 또한 할당 대상에는 사용할 수 없습니다.

자주 묻는 질문

“?. 연산자를 사용한 선택적 연결” 강의는 무료인가요?

네 — “?. 연산자를 사용한 선택적 연결” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 JavaScript Academy 강의 전체를 잠금 해제할 수 있습니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“?. 연산자를 사용한 선택적 연결”에서 뭘 배우나요?

깊이 중첩된 속성에 안전하게 접근합니다. 브라우저에서 직접 실행하는 실습 코드로 JavaScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

JavaScript Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 JavaScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.

“?. 연산자를 사용한 선택적 연결” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 JavaScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 JavaScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. ?. 연산자를 사용한 선택적 연결
  2. ??를 사용한 널 병합
  3. ?.와 ?? 결합하기
  4. 선택적 호출 및 인덱스 접근
← JavaScript Academy(으)로 돌아가기