Js可选链有什么用？为什么和直接调用没有发现区别？

        let a = {
              data:{
                list:123,
            }
        }
        let b = []
        console.log(a.data)
        console.log("普通调用对象不存在属性" + a.data.jerry)
        console.log("可选链调用对象不存在属性" + a.data?.jerry)
        console.log("普通调用数组不存在索引" + b[1])
        console.log("可选连调用数组不存在索引" + b?.[1])

看有些帖子说直接调用不存在属性或者索引会抛异常，我这个为啥不抛出异常，是JS升级了吗。
或者换句话说，他们是一样的话，可选链存在的意义是啥？

let a = {
              data:{
                list:123,
            }
        }
        console.log("可选链调用对象不存在属性" + a.ccc?.jerry)   // undefined
        console.log("普通调用对象不存在属性" + a.ccc.jerry)   // Cannot read properties of undefined (reading 'jerry')

data不存在会报错，用了可选链就不会

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Optional_chaining

参考 https://blog.csdn.net/qq_40657321/article/details/115702528

感谢各位，我懂了
原因是我调用层级不够深，调用不存在属性的属性才会抛出异常
比如 jerry本身不存在 那么调用jerry的属性"bb"就会抛出异常

        let a = {
            data:{
                list:123,
            }
        }
        let b = []
        console.log(a.data)
        console.log("可选链调用对象不存在属性" + a.data?.jerry?.bb) 
        // console.log("普通调用对象不存在属性" + a.data.jerry.bb)   // TypeError : Cannot read properties of undefined (reading 'bb')
        console.log("可选连调用数组不存在索引" + b?.[1]?.a)
        // console.log("普通调用数组不存在索引" + b[1].a)   // TypeError : Cannot read properties of undefined (reading 'a')