DEV Community

talent
talent

Posted on

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

Top comments (0)