옵셔널 체이닝 '?.'이란?
-옵셔널 체이닝(optional chaining)이란 ?.을 사용하면 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있게 해주는것이다.
- ?. 앞의 평가대상이 만약 nullish ( undefined 또는 null ) 일 경우 평가를 멈추고 undefined를 반환한다.
우리는 코드를 짜면서 객체내의 값을 접근하는 경우가 종종 있습니다.
하지만 항상 그 key값이 존재하는 경우 보다는 없는 경우도 있습니다.
다음과 같은 예시를 통해 알아보자
- 예를 들어, 학생들의 점수 데이터를 가진 객체가 있습니다. mark라는 학생과 john이라는 학생의 영어점수를 접근하려고 합니다. 그런데 john은 시험을 안봐서 점수가 없습니다.
<예시 코드>
const students = {
mark: {
age: 20,
score: {
korean: 90,
english: 80,
math: 40
}
},
john: {
age: 20,
}
}
console.log(students.mark.score.english); // 80;
console.log(students.john.score.english); // TypeError: Cannot read properties of undefined (reading 'english')이런 경우에 옵셔널 체이닝 연산자의 존재를 몰랐다면 아래와 같이 코딩을 할 수 있다.
console.log(students.john.score && students.john.score.english);이렇게하면 score라는 key값에 접근이 가능할 때만 english값을 불러오려고 할 것이기 때문에 에러가 나지 않고 undefined만 반환하게 된다.
그럼 만약에 학생 정보에 john이라는 이름이 없어도 작동하게 하려면 어떻게 해야할까?
console.log(students.john && students.john.score && students.john.score.english);점점 검사할 항목이 많아진다면 코드의 길이는 길어지고 해석하기 힘들 것이다.
그 불편함 속에서 생겨난 것이 옵셔널 체이닝 연산자이다.
옵셔널 체이닝을 이용해서 이 긴 코드를 아래와 같이 바꿀 수 있다.
console.log(students.john?.score?.english);?. 연산자의 왼쪽에 있는 것을 평가한뒤 undefined 또는 null이 맞다면 undefined를 반환하고 평가가 끝나게 된다.
만약 아니라면 계속해서 평가가 이루어지게 된다.
이것만으로도 엄청 편리한 연산자라는 것을 알 수 있다.
옵셔널 체이닝 장점
1. if문을 줄여준다.
2. nullish연산자와 함께 쓰면 기본값 주기에 용이하다.
const user = {};
const userAddress = user.info?.address ?? '모르는 주소'; // '모르는 주소'3. 대괄호 표기법에도 옵셔널 체이닝이 가능하다.
- 객체내의 값에 접근하는 방법에는 두가지가 있습니다. 여태까지 접근하면 (.) 연산자 대신 대괄호 표기법을 통해서 접근할 수 있습니다.
const user = {
info: {
firstName: 'hello world'
}
};
const key = "firstName";
const userName = user.info?.[key];4. 존재하지 않을 수 있는 메서드를 호출할 때도 유용하다.
5.배열에도 사용 가능히다.
console.log(arr?.[42]); // undefined
console.log(arr[42]); // TypeError: Cannot read properties of undefined (reading '42')옵셔널 체이닝 사용시 주의할점
- 존재하지 않아도 괜찮은 대상에만 적용해야합니다. 에러를 피하기 위해서 남용하다가 디버깅이 어려워질 수 있다.
- 만약 사용자 객체는 꼭 있어야하는데 그 안에 info 의 age는 꼭 필수가 아니라면 아래와 같이 코딩을 해야한다.
console.log(user?.info?.age) // 이렇게하면 user 객체가 꼭 있어야할 필요가 없다는 뜻입니다.
console.log(user.info?.age); // 이렇게하면 user 객체가 없다면 에러를 뱉을 것입니다.- ?.(optional chaining)앞에 오는 변수는 선언이 되어 있어야한다.
- 선언되지 않은 변수에는 옵셔널 체이닝 연산자를 사용하더라도 에러가 뜬다.
요약
옵셔널 체이닝 문법 ?.은 세 가지 형태로 사용할 수 있다.
- obj?.prop – obj가 존재하면 obj.prop을 반환하고, 그렇지 않으면 undefined를 반환함
- obj?.[prop] – obj가 존재하면 obj[prop]을 반환하고, 그렇지 않으면 undefined를 반환함
- obj?.method() – obj가 존재하면 obj.method()를 호출하고, 그렇지 않으면 undefined를 반환함
여러 예시를 통해 살펴보았듯이 옵셔널 체이닝 문법은 꽤 직관적이고 사용하기도 쉽습니다. ?. 왼쪽 평가 대상이 null이나 undefined인지 확인하고 null이나 undefined가 아니라면 평가를 계속 진행합니다.
?.를 계속 연결해서 체인을 만들면 중첩 프로퍼티들에 안전하게 접근할 수 있다.
?.은 ?.왼쪽 평가대상이 없어도 괜찮은 경우에만 선택적으로 사용해야 한다.
꼭 있어야 하는 값인데 없는 경우에 ?.을 사용하면 프로그래밍 에러를 쉽게 찾을 수 없으므로 이런 상황을 만들지 않도록 해야한다.
