- 체인의 각 참조가 유효한지 명시적으로 검증하지 않고, 연결된 객체 내에 깊숙이 위치한 속성값을 읽을 수 있음
- 참조나 기능이 undefined 또는 null 일 수 있을 때 연결된 객체의 값에 접근하는 단순화할 수 있는 방법을 제공
&& 연산자
let nestedProp = obj.first && obj.first.second;
- obj.first의 값은 obj.first.second의 값에 접근하기 전에 null이 아니라는 것을 검증
- obj.first.second에 직접 접근할 때 일어날 수 있는 에러를 방지
- 검증해야하는 것들이 많아지면 코드의 길이는 길어지고, 해석하기가 어려워짐
?. 연산자
let nestedProp = obj.first?.second;
- 접근 하기 전에 obj.first가 null 혹은 undefined가 아니라는 것을 암묵적으로 확인
- 만약 obj.first가 null 혹은 undefined이라면, 자동으로 undefined가 반환됨
옵셔널 체이닝의 장점
1. if문을 줄여줌
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| user: {
name: ‘coding’,
age: 20
friends: {
‘bob’: {
name: ‘bob’,
age: 20
},
‘mark’: {
name: ‘mark’,
age: 20
}
}
}
|
mark의 나이에 접근을 하려면 user가 있는지, user.friends가 있는지 등 해당 값이 존재하는지 검증을 한 후에 값을 받아오는 함수를
if문으로 작성하면 함수의 목적이 바로 보이지 않고, 읽어야하는 코드량이 많지만
옵셔널 체이닝으로 작성하면 어떤 값을 가져오는지, 함수가 무슨 역할을 하는지 바로 파악할 수 있음.
1
2
3
4
5
6
7
8
9
10
11
12
| function getFriendAge(user) {
// user객체를 받아서 age 리턴
if (user === undefined) return undefined;
if (user.friends === undefined) return undefined;
if (user.friends.mark === undefined) return undefined;
return user.friends.mark.age;
}
const age = getFriendAge(user);
|
1
2
3
| function getFriendAge(user) {
return user?.friends?.mark?.age;
}
|
2. nullish연산자와 함께 쓰면 기본값 주기에 용이
1
2
3
| const user = {};
const userAddress = user.info?.address ?? "모르는 주소";
// '모르는 주소'
|
3. 대괄호 표기법에도 옵셔널 체이닝이 가능
1
2
3
4
5
6
7
| const user = {
info: {
firstName: "hello world"
}
};
const key = "firstName";
const userName = user.info?.[key];
|
4. 존재하지 않을 수 있는 메서드를 호출할 때도 유용
1
2
3
4
5
6
7
| const some = {
customMethod: function () {
console.log("hello optional");
}
};
let result = some.customMethod?.();
|
1
2
3
4
5
6
| const some = {
customMethod: "hello?"
};
let result = some.customMethod?.();
// TypeError: some.customMethod is not a function
|
customMethod가 참조할 수 없다면 undefined를 반환하지만,
customMethod가 함수가 아닌 일반 값을 가지고 있다면 타입 에러를 반환
참고사이트