아래와 같이 중첩된 값이 있다면, 각각의 단계별로 객체가 존재하나 여부를 확인하고 값을 꺼내는 코드를 작성해야 합니다. 옵셔널 체이닝 없이 꺼낸다면, 코드가 길어지고, 무엇보다 직관적이지 못합니다.

<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
Posted by 창업닉군
,