아래와 같이 중첩된 값이 있다면, 각각의 단계별로 객체가 존재하나 여부를 확인하고 값을 꺼내는 코드를 작성해야 합니다. 옵셔널 체이닝 없이 꺼낸다면, 코드가 길어지고, 무엇보다 직관적이지 못합니다.
<script type="module">
const some = {
deeply:{
nested:{
value:99
}
},
dialog:{
say:"hello"
}
};
const x = some && some.deeply && some.deeply.nested && some.deeply.nested.value;
const y = some && some.dialog && some.dialog.say && some.dialog.say;
console.log(x, y);
</script>
하지만 옵셔널 체이닝을 사용하면, 아래와 같이 코드가 간결해 지며, 중간에 null 이나 undefine을 만나면 undefine을 반환하고 코드를 수행하지 않습니다.
<script type="module">
const some = {
deeply:{
nested:{
value:99
}
},
dialog:{
say:"hello"
}
};
const x = some?.deeply?.nested?.value;
const y = some?.dialog?.say;
console.log(x, y);
</script>
'JavaScript' 카테고리의 다른 글
| javascript, 디스트럭처링(destructuring) (0) | 2023.01.01 |
|---|---|
| javascript, for-in, for-of (0) | 2023.01.01 |
| javascript, var, let, const (0) | 2023.01.01 |
| html css 7가지 단위 (0) | 2020.08.21 |
| Ajax 크로스 도메인 (0) | 2017.10.29 |
