DEV Community

talent
talent

Posted on

1 1

Javascript E๐—บ๐—ฝ๐˜๐˜† ๐—ผ๐—ฏ๐—ท๐—ฒ๐—ฐ๐˜ ๐—ฎ๐˜€ ๐—ฎ ๐—ณ๐—ฎ๐—น๐—น๐—ฏ๐—ฎ๐—ฐ๐—ธ ๐˜„๐—ต๐—ถ๐—น๐—ฒ ๐—ฑ๐—ฒ๐˜€๐˜๐—ฟ๐˜‚๐—ฐ๐˜๐˜‚๐—ฟ๐—ถ๐—ป๐—ด

As explained in one of my posts in the Javascript series, you can use the optional chaining operator to simplify and avoid breaking code

So the below code:

๐˜ค๐˜ฐ๐˜ฏ๐˜ด๐˜ต ๐˜ถ๐˜ด๐˜ฆ๐˜ณ = {
๐˜ฏ๐˜ข๐˜ฎ๐˜ฆ: '๐˜‹๐˜ข๐˜ท๐˜ช๐˜ฅ'
};

๐˜ค๐˜ฐ๐˜ฏ๐˜ด๐˜ต ๐˜ด๐˜ต๐˜ณ๐˜ฆ๐˜ฆ๐˜ต๐˜•๐˜ข๐˜ฎ๐˜ฆ = ๐˜ถ๐˜ด๐˜ฆ๐˜ณ.๐˜ญ๐˜ฐ๐˜ค๐˜ข๐˜ต๐˜ช๐˜ฐ๐˜ฏ && ๐˜ถ๐˜ด๐˜ฆ๐˜ณ.๐˜ญ๐˜ฐ๐˜ค๐˜ข๐˜ต๐˜ช๐˜ฐ๐˜ฏ.๐˜ด๐˜ต๐˜ณ๐˜ฆ๐˜ฆ๐˜ต && ๐˜ถ๐˜ด๐˜ฆ๐˜ณ.๐˜ญ๐˜ฐ๐˜ค๐˜ข๐˜ต๐˜ช๐˜ฐ๐˜ฏ.๐˜ด๐˜ต๐˜ณ๐˜ฆ๐˜ฆ๐˜ต.๐˜ฏ๐˜ข๐˜ฎ๐˜ฆ;

is same as:

๐˜ค๐˜ฐ๐˜ฏ๐˜ด๐˜ต ๐˜ถ๐˜ด๐˜ฆ๐˜ณ = {
๐˜ฏ๐˜ข๐˜ฎ๐˜ฆ: '๐˜‹๐˜ข๐˜ท๐˜ช๐˜ฅ'
};

๐˜ค๐˜ฐ๐˜ฏ๐˜ด๐˜ต ๐˜ด๐˜ต๐˜ณ๐˜ฆ๐˜ฆ๐˜ต๐˜•๐˜ข๐˜ฎ๐˜ฆ = ๐˜ถ๐˜ด๐˜ฆ๐˜ณ.๐˜ญ๐˜ฐ๐˜ค๐˜ข๐˜ต๐˜ช๐˜ฐ๐˜ฏ?.๐˜ด๐˜ต๐˜ณ๐˜ฆ๐˜ฆ๐˜ต?.๐˜ฏ๐˜ข๐˜ฎ๐˜ฆ;

Enter fullscreen mode Exit fullscreen mode

In the above code, ๐˜€๐˜๐—ฟ๐—ฒ๐—ฒ๐˜๐—ก๐—ฎ๐—บ๐—ฒ will be ๐˜‚๐—ป๐—ฑ๐—ฒ๐—ณ๐—ถ๐—ป๐—ฒ๐—ฑ as ๐˜€๐˜๐—ฟ๐—ฒ๐—ฒ๐˜ property does not exist on the user object.

This is because the optional chaining operator returns ๐˜‚๐—ป๐—ฑ๐—ฒ๐—ณ๐—ถ๐—ป๐—ฒ๐—ฑ if the property does not exist.

And destructuring on ๐˜‚๐—ป๐—ฑ๐—ฒ๐—ณ๐—ถ๐—ป๐—ฒ๐—ฑ will throw an error.

So If you're using destructuring along with the optional chaining operator, you will get an uncaught error If you try to use destructuring like this:


๐˜ช๐˜ง (๐˜ถ๐˜ด๐˜ฆ๐˜ณ.๐˜ฏ๐˜ข๐˜ฎ๐˜ฆ) {
๐˜ค๐˜ฐ๐˜ฏ๐˜ด๐˜ต { ๐˜ฏ๐˜ข๐˜ฎ๐˜ฆ, ๐˜ข๐˜ฅ๐˜ฅ๐˜ณ๐˜ฆ๐˜ด๐˜ด } = ๐˜ถ๐˜ด๐˜ฆ๐˜ณ.๐˜ญ๐˜ฐ๐˜ค๐˜ข๐˜ต๐˜ช๐˜ฐ๐˜ฏ?.๐˜ด๐˜ต๐˜ณ๐˜ฆ๐˜ฆ๐˜ต; // ๐™๐™ฃ๐™˜๐™–๐™ช๐™œ๐™๐™ฉ ๐™๐™ฎ๐™ฅ๐™š๐™€๐™ง๐™ง๐™ค๐™ง: ๐˜พ๐™–๐™ฃ๐™ฃ๐™ค๐™ฉ ๐™™๐™š๐™จ๐™ฉ๐™ง๐™ช๐™˜๐™ฉ๐™ช๐™ง๐™š ๐™ฅ๐™ง๐™ค๐™ฅ๐™š๐™ง๐™ฉ๐™ฎ '๐™ฃ๐™–๐™ข๐™š' ๐™ค๐™› ๐™ช๐™ฃ๐™™๐™š๐™›๐™ž๐™ฃ๐™š๐™™
}

To fix this, you need to assign an empty object all the time while destructuring like this:

๐˜ช๐˜ง (๐˜ถ๐˜ด๐˜ฆ๐˜ณ.๐˜ฏ๐˜ข๐˜ฎ๐˜ฆ) {
๐˜ค๐˜ฐ๐˜ฏ๐˜ด๐˜ต { ๐˜ฏ๐˜ข๐˜ฎ๐˜ฆ, ๐˜ข๐˜ฅ๐˜ฅ๐˜ณ๐˜ฆ๐˜ด๐˜ด } = ๐˜ถ๐˜ด๐˜ฆ๐˜ณ.๐˜ญ๐˜ฐ๐˜ค๐˜ข๐˜ต๐˜ช๐˜ฐ๐˜ฏ?.๐˜ด๐˜ต๐˜ณ๐˜ฆ๐˜ฆ๐˜ต || {}; // ๐™ฌ๐™ค๐™ง๐™ ๐™จ ๐™›๐™ž๐™ฃ๐™š, ๐™ฃ๐™ค ๐™š๐™ง๐™ง๐™ค๐™ง
๐˜ค๐˜ฐ๐˜ฏ๐˜ด๐˜ฐ๐˜ญ๐˜ฆ.๐˜ญ๐˜ฐ๐˜จ(๐˜ฏ๐˜ข๐˜ฎ๐˜ฆ, ๐˜ข๐˜ฅ๐˜ฅ๐˜ณ๐˜ฆ๐˜ด๐˜ด); // ๐˜ถ๐˜ฏ๐˜ฅ๐˜ฆ๐˜ง๐˜ช๐˜ฏ๐˜ฆ๐˜ฅ ๐˜ถ๐˜ฏ๐˜ฅ๐˜ฆ๐˜ง๐˜ช๐˜ฏ๐˜ฆ๐˜ฅ
}
Enter fullscreen mode Exit fullscreen mode

Image of Datadog

Measure and Advance Your DevSecOps Maturity

In this white paper, we lay out a DevSecOps maturity model based on our experience helping thousands of organizations advance their DevSecOps practices. Learn the key competencies and practices across four distinct levels of maturity.

Get The White Paper

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more