ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಐಚ್ಛಿಕ ಚೈನಿಂಗ್ ಅಸೈನ್‌ಮೆಂಟ್: ಸುರಕ್ಷಿತ ಪ್ರಾಪರ್ಟಿ ಮಾರ್ಪಾಡಿನ ಕುರಿತು ಒಂದು ಆಳವಾದ ನೋಟ

ನೀವು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನೊಂದಿಗೆ ಸ್ವಲ್ಪ ಸಮಯದಿಂದ ಕೆಲಸ ಮಾಡುತ್ತಿದ್ದರೆ, ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ತಕ್ಷಣವೇ ನಿಲ್ಲಿಸುವ ಭಯಾನಕ ದೋಷವನ್ನು ನೀವು ಖಂಡಿತವಾಗಿಯೂ ಎದುರಿಸಿದ್ದೀರಿ: "TypeError: Cannot read properties of undefined". ಈ ದೋಷವು ಒಂದು ಸಾಮಾನ್ಯ ಅನುಭವವಾಗಿದೆ, ಸಾಮಾನ್ಯವಾಗಿ ನಾವು ಆಬ್ಜೆಕ್ಟ್ ಎಂದು ಭಾವಿಸಿದ ಆದರೆ `undefined` ಆಗಿ ಹೊರಹೊಮ್ಮಿದ ಮೌಲ್ಯದ ಮೇಲೆ ಪ್ರಾಪರ್ಟಿಯನ್ನು ಪ್ರವೇಶಿಸಲು ಪ್ರಯತ್ನಿಸಿದಾಗ ಸಂಭವಿಸುತ್ತದೆ.

ಆಧುನಿಕ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್, ನಿರ್ದಿಷ್ಟವಾಗಿ ES2020 ನಿರ್ದಿಷ್ಟತೆಯೊಂದಿಗೆ, ಪ್ರಾಪರ್ಟಿ ಓದುವುದಕ್ಕಾಗಿ ಈ ಸಮಸ್ಯೆಯನ್ನು ಎದುರಿಸಲು ನಮಗೆ ಶಕ್ತಿಯುತ ಮತ್ತು ಸೊಗಸಾದ ಸಾಧನವನ್ನು ನೀಡಿದೆ: ಐಚ್ಛಿಕ ಚೈನಿಂಗ್ ಆಪರೇಟರ್ (`?.`). ಇದು ಆಳವಾಗಿ ನೆಸ್ಟೆಡ್, ರಕ್ಷಣಾತ್ಮಕ ಕೋಡ್ ಅನ್ನು ಸ್ವಚ್ಛ, ಏಕ-ಸಾಲಿನ ಅಭಿವ್ಯಕ್ತಿಗಳಾಗಿ ಪರಿವರ್ತಿಸಿತು. ಇದು ಸ್ವಾಭಾವಿಕವಾಗಿ ಜಗತ್ತಿನಾದ್ಯಂತ ಡೆವಲಪರ್‌ಗಳು ಕೇಳಿದ ಒಂದು ಮುಂದಿನ ಪ್ರಶ್ನೆಗೆ ಕಾರಣವಾಗುತ್ತದೆ: ನಾವು ಸುರಕ್ಷಿತವಾಗಿ ಪ್ರಾಪರ್ಟಿಯನ್ನು ಓದಬಹುದಾದರೆ, ನಾವು ಅದನ್ನು ಸುರಕ್ಷಿತವಾಗಿ ಬರೆಯಬಹುದೇ? ನಾವು "ಐಚ್ಛಿಕ ಚೈನಿಂಗ್ ಅಸೈನ್‌ಮೆಂಟ್" ನಂತಹ ಏನನ್ನಾದರೂ ಮಾಡಬಹುದೇ?

ಈ ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿ ಅದೇ ಪ್ರಶ್ನೆಯನ್ನು ಅನ್ವೇಷಿಸುತ್ತದೆ. ಈ ಸರಳ ಕಾರ್ಯಾಚರಣೆಯು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನ ವೈಶಿಷ್ಟ್ಯವಾಗಿ ಏಕೆ ಇಲ್ಲ ಎಂಬುದರ ಬಗ್ಗೆ ನಾವು ಆಳವಾಗಿ ಪರಿಶೀಲಿಸುತ್ತೇವೆ ಮತ್ತು ಹೆಚ್ಚು ಮುಖ್ಯವಾಗಿ, ಅದೇ ಗುರಿಯನ್ನು ಸಾಧಿಸಲು ನಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುವ ದೃಢವಾದ ಮಾದರಿಗಳು ಮತ್ತು ಆಧುನಿಕ ಆಪರೇಟರ್‌ಗಳನ್ನು ನಾವು ಬಹಿರಂಗಪಡಿಸುತ್ತೇವೆ: ಸಂಭಾವ್ಯವಾಗಿ ಅಸ್ತಿತ್ವದಲ್ಲಿಲ್ಲದ ನೆಸ್ಟೆಡ್ ಪ್ರಾಪರ್ಟಿಗಳ ಸುರಕ್ಷಿತ, ಸ್ಥಿತಿಸ್ಥಾಪಕ ಮತ್ತು ದೋಷ-ಮುಕ್ತ ಮಾರ್ಪಾಡು. ನೀವು ಫ್ರಂಟ್-ಎಂಡ್ ಅಪ್ಲಿಕೇಶನ್‌ನಲ್ಲಿ ಸಂಕೀರ್ಣ ಸ್ಥಿತಿಯನ್ನು ನಿರ್ವಹಿಸುತ್ತಿರಲಿ, API ಡೇಟಾವನ್ನು ಪ್ರಕ್ರಿಯೆಗೊಳಿಸುತ್ತಿರಲಿ, ಅಥವಾ ದೃಢವಾದ ಬ್ಯಾಕ್-ಎಂಡ್ ಸೇವೆಯನ್ನು ನಿರ್ಮಿಸುತ್ತಿರಲಿ, ಈ ತಂತ್ರಗಳನ್ನು ಕರಗತ ಮಾಡಿಕೊಳ್ಳುವುದು ಆಧುನಿಕ ಅಭಿವೃದ್ಧಿಗೆ ಅತ್ಯಗತ್ಯ.

ತ್ವರಿತ ಪುನರಾವಲೋಕನ: ಐಚ್ಛಿಕ ಚೈನಿಂಗ್ (`?.`) ನ ಶಕ್ತಿ

ನಾವು ಅಸೈನ್‌ಮೆಂಟ್ ಅನ್ನು ನಿಭಾಯಿಸುವ ಮೊದಲು, ಐಚ್ಛಿಕ ಚೈನಿಂಗ್ ಆಪರೇಟರ್ (`?.`) ಅನ್ನು ಯಾವುದು ಅಷ್ಟು ಅನಿವಾರ್ಯವಾಗಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ಸಂಕ್ಷಿಪ್ತವಾಗಿ ಪುನರಾವಲೋಕಿಸೋಣ. ಅದರ ಪ್ರಾಥಮಿಕ ಕಾರ್ಯವು ಸಂಪರ್ಕಿತ ಆಬ್ಜೆಕ್ಟ್‌ಗಳ ಸರಪಳಿಯೊಳಗಿನ ಆಳವಾದ ಪ್ರಾಪರ್ಟಿಗಳಿಗೆ ಪ್ರವೇಶವನ್ನು ಸರಳಗೊಳಿಸುವುದಾಗಿದೆ, ಸರಪಳಿಯಲ್ಲಿನ ಪ್ರತಿಯೊಂದು ಲಿಂಕ್ ಅನ್ನು ಸ್ಪಷ್ಟವಾಗಿ ಮೌಲ್ಯೀಕರಿಸುವ ಅಗತ್ಯವಿಲ್ಲದೆ.

ಒಂದು ಸಾಮಾನ್ಯ ಸನ್ನಿವೇಶವನ್ನು ಪರಿಗಣಿಸಿ: ಸಂಕೀರ್ಣ ಬಳಕೆದಾರ ಆಬ್ಜೆಕ್ಟ್‌ನಿಂದ ಬಳಕೆದಾರರ ಬೀದಿ ವಿಳಾಸವನ್ನು ಪಡೆದುಕೊಳ್ಳುವುದು.

ಹಳೆಯ ವಿಧಾನ: ವಿವರವಾದ ಮತ್ತು ಪುನರಾವರ್ತಿತ ಪರಿಶೀಲನೆಗಳು

ಐಚ್ಛಿಕ ಚೈನಿಂಗ್ ಇಲ್ಲದೆ, ಯಾವುದೇ ಮಧ್ಯಂತರ ಪ್ರಾಪರ್ಟಿ (`profile` ಅಥವಾ `address`) ಕಾಣೆಯಾಗಿದ್ದರೆ `TypeError` ಅನ್ನು ತಡೆಯಲು ನೀವು ಆಬ್ಜೆಕ್ಟ್‌ನ ಪ್ರತಿಯೊಂದು ಹಂತವನ್ನು ಪರಿಶೀಲಿಸಬೇಕಾಗುತ್ತದೆ.

ಕೋಡ್ ಉದಾಹರಣೆ:

const user = { id: 101, name: 'Alina', profile: { // address ಕಾಣೆಯಾಗಿದೆ age: 30 } }; let street; if (user && user.profile && user.profile.address) { street = user.profile.address.street; } console.log(street); // ಔಟ್‌ಪುಟ್‌ಗಳು: undefined (ಮತ್ತು ಯಾವುದೇ ದೋಷವಿಲ್ಲ!)

ಈ ಮಾದರಿಯು ಸುರಕ್ಷಿತವಾಗಿದ್ದರೂ, ಓದಲು ಕಷ್ಟಕರ ಮತ್ತು ತೊಡಕಿನದ್ದಾಗಿದೆ, ವಿಶೇಷವಾಗಿ ಆಬ್ಜೆಕ್ಟ್ ನೆಸ್ಟಿಂಗ್ ಆಳವಾದಂತೆ.

ಆಧುನಿಕ ವಿಧಾನ: `?.` ನೊಂದಿಗೆ ಸ್ವಚ್ಛ ಮತ್ತು ಸಂಕ್ಷಿಪ್ತ

ಐಚ್ಛಿಕ ಚೈನಿಂಗ್ ಆಪರೇಟರ್ ಮೇಲಿನ ಪರಿಶೀಲನೆಯನ್ನು ಒಂದೇ, ಸುಲಭವಾಗಿ ಓದಬಹುದಾದ ಸಾಲಿನಲ್ಲಿ ಪುನಃ ಬರೆಯಲು ನಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. `?.` ಗಿಂತ ಹಿಂದಿನ ಮೌಲ್ಯವು `null` ಅಥವಾ `undefined` ಆಗಿದ್ದರೆ, ಅದು ತಕ್ಷಣವೇ ಮೌಲ್ಯಮಾಪನವನ್ನು ನಿಲ್ಲಿಸಿ `undefined` ಅನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ.

ಕೋಡ್ ಉದಾಹರಣೆ:

const user = { id: 101, name: 'Alina', profile: { age: 30 } }; const street = user?.profile?.address?.street; console.log(street); // ಔಟ್‌ಪುಟ್‌ಗಳು: undefined

ಈ ಆಪರೇಟರ್ ಅನ್ನು ಫಂಕ್ಷನ್ ಕರೆಗಳು (`user.calculateScore?.()`) ಮತ್ತು ಅರೇ ಪ್ರವೇಶ (`user.posts?.[0]`) ದೊಂದಿಗೂ ಬಳಸಬಹುದು, ಇದು ಸುರಕ್ಷಿತ ಡೇಟಾ ಹಿಂಪಡೆಯುವಿಕೆಗೆ ಬಹುಮುಖ ಸಾಧನವಾಗಿದೆ. ಆದಾಗ್ಯೂ, ಅದರ ಸ್ವರೂಪವನ್ನು ನೆನಪಿಟ್ಟುಕೊಳ್ಳುವುದು ಬಹಳ ಮುಖ್ಯ: ಇದು ಕೇವಲ ಓದಲು-ಮಾತ್ರ ಇರುವ ಯಾಂತ್ರಿಕ ವ್ಯವಸ್ಥೆ.

ಮಿಲಿಯನ್-ಡಾಲರ್ ಪ್ರಶ್ನೆ: ನಾವು ಐಚ್ಛಿಕ ಚೈನಿಂಗ್‌ನೊಂದಿಗೆ ಅಸೈನ್ ಮಾಡಬಹುದೇ?

ಇದು ನಮ್ಮ ವಿಷಯದ ತಿರುಳಿಗೆ ನಮ್ಮನ್ನು ತರುತ್ತದೆ. ನಾವು ಈ ಅದ್ಭುತವಾದ ಅನುಕೂಲಕರ ಸಿಂಟ್ಯಾಕ್ಸ್ ಅನ್ನು ಅಸೈನ್‌ಮೆಂಟ್‌ನ ಎಡಭಾಗದಲ್ಲಿ ಬಳಸಲು ಪ್ರಯತ್ನಿಸಿದಾಗ ಏನಾಗುತ್ತದೆ?

ಒಂದು ವೇಳೆ ಪಾತ್ ಅಸ್ತಿತ್ವದಲ್ಲಿಲ್ಲದಿರಬಹುದು ಎಂದು ಭಾವಿಸಿ, ಬಳಕೆದಾರರ ವಿಳಾಸವನ್ನು ಅಪ್‌ಡೇಟ್ ಮಾಡಲು ಪ್ರಯತ್ನಿಸೋಣ:

ಕೋಡ್ ಉದಾಹರಣೆ (ಇದು ವಿಫಲಗೊಳ್ಳುತ್ತದೆ):

const user = {}; // ಪ್ರಾಪರ್ಟಿಯನ್ನು ಸುರಕ್ಷಿತವಾಗಿ ಅಸೈನ್ ಮಾಡಲು ಪ್ರಯತ್ನಿಸಲಾಗುತ್ತಿದೆ user?.profile?.address = { street: '123 Global Way' };

ನೀವು ಈ ಕೋಡ್ ಅನ್ನು ಯಾವುದೇ ಆಧುನಿಕ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪರಿಸರದಲ್ಲಿ ಚಲಾಯಿಸಿದರೆ, ನಿಮಗೆ `TypeError` ಬರುವುದಿಲ್ಲ—ಬದಲಿಗೆ, ನಿಮಗೆ ಬೇರೆ ರೀತಿಯ ದೋಷ ಬರುತ್ತದೆ:

Uncaught SyntaxError: Invalid left-hand side in assignment

ಇದು ಸಿಂಟ್ಯಾಕ್ಸ್ ದೋಷ ಏಕೆ?

ಇದು ರನ್‌ಟೈಮ್ ಬಗ್ ಅಲ್ಲ; ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಎಂಜಿನ್ ಇದನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು ಪ್ರಯತ್ನಿಸುವ ಮೊದಲೇ ಅಮಾನ್ಯ ಕೋಡ್ ಎಂದು ಗುರುತಿಸುತ್ತದೆ. ಕಾರಣವು ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಭಾಷೆಗಳ ಒಂದು ಮೂಲಭೂತ ಪರಿಕಲ್ಪನೆಯಲ್ಲಿದೆ: lvalue (ಎಡ ಮೌಲ್ಯ) ಮತ್ತು rvalue (ಬಲ ಮೌಲ್ಯ) ನಡುವಿನ ವ್ಯತ್ಯಾಸ.

• lvalue ಒಂದು ಮೆಮೊರಿ ಸ್ಥಳವನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ—ಮೌಲ್ಯವನ್ನು ಸಂಗ್ರಹಿಸಬಹುದಾದ ಒಂದು ಗಮ್ಯಸ್ಥಾನ. ಇದನ್ನು ಒಂದು ಕಂಟೇನರ್ ಎಂದು ಯೋಚಿಸಿ, ಉದಾಹರಣೆಗೆ ಒಂದು ವೇರಿಯಬಲ್ (`x`) ಅಥವಾ ಆಬ್ಜೆಕ್ಟ್ ಪ್ರಾಪರ್ಟಿ (`user.name`).
• rvalue ಒಂದು ಶುದ್ಧ ಮೌಲ್ಯವನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ, ಅದನ್ನು lvalue ಗೆ ಅಸೈನ್ ಮಾಡಬಹುದು. ಇದು ವಿಷಯ, ಉದಾಹರಣೆಗೆ ಸಂಖ್ಯೆ `5` ಅಥವಾ ಸ್ಟ್ರಿಂಗ್ `"hello"`.

`user?.profile?.address` ಅಭಿವ್ಯಕ್ತಿಯು ಮೆಮೊರಿ ಸ್ಥಳಕ್ಕೆ ಪರಿಹಾರವಾಗುತ್ತದೆ ಎಂದು ಖಾತರಿಪಡಿಸಲಾಗುವುದಿಲ್ಲ. ಒಂದು ವೇಳೆ `user.profile` `undefined` ಆಗಿದ್ದರೆ, ಅಭಿವ್ಯಕ್ತಿಯು ಶಾರ್ಟ್-ಸರ್ಕ್ಯೂಟ್ ಆಗಿ ಮೌಲ್ಯ `undefined` ಗೆ ಮೌಲ್ಯಮಾಪನಗೊಳ್ಳುತ್ತದೆ. ನೀವು `undefined` ಮೌಲ್ಯಕ್ಕೆ ಏನನ್ನಾದರೂ ಅಸೈನ್ ಮಾಡಲು ಸಾಧ್ಯವಿಲ್ಲ. ಇದು ಅಂಚೆಯವನಿಗೆ "ಅಸ್ತಿತ್ವದಲ್ಲಿಲ್ಲದ" ಪರಿಕಲ್ಪನೆಗೆ ಪ್ಯಾಕೇಜ್ ಅನ್ನು ತಲುಪಿಸಲು ಹೇಳಿದಂತೆ.

ಅಸೈನ್‌ಮೆಂಟ್‌ನ ಎಡಭಾಗವು ಮಾನ್ಯ, ನಿರ್ದಿಷ್ಟ ಉಲ್ಲೇಖ (ಒಂದು lvalue) ಆಗಿರಬೇಕು, ಮತ್ತು ಐಚ್ಛಿಕ ಚೈನಿಂಗ್ ಒಂದು ಮೌಲ್ಯವನ್ನು (`undefined`) ಉತ್ಪಾದಿಸಬಹುದು, ಆದ್ದರಿಂದ ಅಸ್ಪಷ್ಟತೆ ಮತ್ತು ರನ್‌ಟೈಮ್ ದೋಷಗಳನ್ನು ತಡೆಯಲು ಸಿಂಟ್ಯಾಕ್ಸ್ ಅನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ನಿಷೇಧಿಸಲಾಗಿದೆ.

ಡೆವಲಪರ್‌ನ ಸಂದಿಗ್ಧತೆ: ಸುರಕ್ಷಿತ ಪ್ರಾಪರ್ಟಿ ಅಸೈನ್‌ಮೆಂಟ್‌ನ ಅವಶ್ಯಕತೆ

ಸಿಂಟ್ಯಾಕ್ಸ್ ಬೆಂಬಲಿಸದ ಕಾರಣ ಅಗತ್ಯವು ಕಣ್ಮರೆಯಾಗುವುದಿಲ್ಲ. ಅಸಂಖ್ಯಾತ ನೈಜ-ಪ್ರಪಂಚದ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿ, ಸಂಪೂರ್ಣ ಪಾತ್ ಅಸ್ತಿತ್ವದಲ್ಲಿದೆಯೇ ಎಂದು ಖಚಿತವಾಗಿ ತಿಳಿಯದೆ ನಾವು ಆಳವಾಗಿ ನೆಸ್ಟೆಡ್ ಆಬ್ಜೆಕ್ಟ್‌ಗಳನ್ನು ಮಾರ್ಪಡಿಸಬೇಕಾಗುತ್ತದೆ. ಸಾಮಾನ್ಯ ಸನ್ನಿವೇಶಗಳು ಸೇರಿವೆ:

• UI ಫ್ರೇಮ್‌ವರ್ಕ್‌ಗಳಲ್ಲಿ ಸ್ಥಿತಿ ನಿರ್ವಹಣೆ: ರಿಯಾಕ್ಟ್ ಅಥವಾ ವ್ಯೂ ನಂತಹ ಲೈಬ್ರರಿಗಳಲ್ಲಿ ಕಾಂಪೊನೆಂಟ್‌ನ ಸ್ಥಿತಿಯನ್ನು ನವೀಕರಿಸುವಾಗ, ಮೂಲ ಸ್ಥಿತಿಯನ್ನು ಬದಲಾಯಿಸದೆ ನೀವು ಆಳವಾಗಿ ನೆಸ್ಟೆಡ್ ಪ್ರಾಪರ್ಟಿಯನ್ನು ಬದಲಾಯಿಸಬೇಕಾಗುತ್ತದೆ.
• API ಪ್ರತಿಕ್ರಿಯೆಗಳನ್ನು ಪ್ರಕ್ರಿಯೆಗೊಳಿಸುವುದು: ಒಂದು API ಐಚ್ಛಿಕ ಕ್ಷೇತ್ರಗಳೊಂದಿಗೆ ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ಹಿಂತಿರುಗಿಸಬಹುದು. ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಈ ಡೇಟಾವನ್ನು ಸಾಮಾನ್ಯಗೊಳಿಸಬೇಕಾಗಬಹುದು ಅಥವಾ ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯಗಳನ್ನು ಸೇರಿಸಬೇಕಾಗಬಹುದು, ಇದರಲ್ಲಿ ಆರಂಭಿಕ ಪ್ರತಿಕ್ರಿಯೆಯಲ್ಲಿ ಇಲ್ಲದಿರುವ ಪಾತ್‌ಗಳಿಗೆ ಅಸೈನ್ ಮಾಡುವುದೂ ಸೇರಿದೆ.
• ಡೈನಾಮಿಕ್ ಕಾನ್ಫಿಗರೇಶನ್: ವಿವಿಧ ಮಾಡ್ಯೂಲ್‌ಗಳು ತಮ್ಮದೇ ಆದ ಸೆಟ್ಟಿಂಗ್‌ಗಳನ್ನು ಸೇರಿಸಬಹುದಾದ ಕಾನ್ಫಿಗರೇಶನ್ ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ನಿರ್ಮಿಸಲು, ನೆಸ್ಟೆಡ್ ರಚನೆಗಳನ್ನು ಸುರಕ್ಷಿತವಾಗಿ ರಚಿಸಬೇಕಾಗುತ್ತದೆ.

ಉದಾಹರಣೆಗೆ, ನಿಮ್ಮ ಬಳಿ ಒಂದು ಸೆಟ್ಟಿಂಗ್ಸ್ ಆಬ್ಜೆಕ್ಟ್ ಇದೆ ಮತ್ತು ನೀವು ಥೀಮ್ ಬಣ್ಣವನ್ನು ಹೊಂದಿಸಲು ಬಯಸುತ್ತೀರಿ, ಆದರೆ `theme` ಆಬ್ಜೆಕ್ಟ್ ಅಸ್ತಿತ್ವದಲ್ಲಿದೆಯೇ ಎಂದು ನಿಮಗೆ ಖಚಿತವಿಲ್ಲ.

ಗುರಿ:

const settings = {}; // ನಾವು ದೋಷವಿಲ್ಲದೆ ಇದನ್ನು ಸಾಧಿಸಲು ಬಯಸುತ್ತೇವೆ: settings.ui.theme.color = 'blue'; // ಮೇಲಿನ ಸಾಲು ದೋಷವನ್ನು ಎಸೆಯುತ್ತದೆ: "TypeError: Cannot set properties of undefined (setting 'theme')"

ಹಾಗಾದರೆ, ನಾವು ಇದನ್ನು ಹೇಗೆ ಪರಿಹರಿಸುವುದು? ಆಧುನಿಕ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನಲ್ಲಿ ಲಭ್ಯವಿರುವ ಹಲವಾರು ಶಕ್ತಿಯುತ ಮತ್ತು ಪ್ರಾಯೋಗಿಕ ಮಾದರಿಗಳನ್ನು ಅನ್ವೇಷಿಸೋಣ.

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನಲ್ಲಿ ಸುರಕ್ಷಿತ ಪ್ರಾಪರ್ಟಿ ಮಾರ್ಪಾಡಿಗಾಗಿ ತಂತ್ರಗಳು

ನೇರವಾದ "ಐಚ್ಛಿಕ ಚೈನಿಂಗ್ ಅಸೈನ್‌ಮೆಂಟ್" ಆಪರೇಟರ್ ಅಸ್ತಿತ್ವದಲ್ಲಿಲ್ಲದಿದ್ದರೂ, ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ವೈಶಿಷ್ಟ್ಯಗಳ ಸಂಯೋಜನೆಯನ್ನು ಬಳಸಿಕೊಂಡು ನಾವು ಅದೇ ಫಲಿತಾಂಶವನ್ನು ಸಾಧಿಸಬಹುದು. ನಾವು ಅತ್ಯಂತ ಮೂಲಭೂತದಿಂದ ಹೆಚ್ಚು ಮುಂದುವರಿದ ಮತ್ತು ಘೋಷಣಾತ್ಮಕ ಪರಿಹಾರಗಳತ್ತ ಸಾಗುತ್ತೇವೆ.

ಮಾದರಿ 1: ಕ್ಲಾಸಿಕ್ 'ಗಾರ್ಡ್ ಕ್ಲಾಸ್' ವಿಧಾನ

ಅಸೈನ್‌ಮೆಂಟ್ ಮಾಡುವ ಮೊದಲು ಸರಪಳಿಯಲ್ಲಿನ ಪ್ರತಿಯೊಂದು ಪ್ರಾಪರ್ಟಿಯ ಅಸ್ತಿತ್ವವನ್ನು ಹಸ್ತಚಾಲಿತವಾಗಿ ಪರಿಶೀಲಿಸುವುದು ಅತ್ಯಂತ ಸರಳವಾದ ವಿಧಾನವಾಗಿದೆ. ಇದು ಪೂರ್ವ-ES2020 ರ ವಿಧಾನವಾಗಿದೆ.

ಕೋಡ್ ಉದಾಹರಣೆ:

const user = { profile: {} }; // ಪಾತ್ ಅಸ್ತಿತ್ವದಲ್ಲಿದ್ದರೆ ಮಾತ್ರ ನಾವು ಅಸೈನ್ ಮಾಡಲು ಬಯಸುತ್ತೇವೆ if (user && user.profile && user.profile.address) { user.profile.address.street = '456 Tech Park'; }

• ಅನುಕೂಲಗಳು: ಅತ್ಯಂತ ಸ್ಪಷ್ಟ ಮತ್ತು ಯಾವುದೇ ಡೆವಲಪರ್‌ಗೆ ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಸುಲಭ. ಇದು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನ ಎಲ್ಲಾ ಆವೃತ್ತಿಗಳೊಂದಿಗೆ ಹೊಂದಿಕೊಳ್ಳುತ್ತದೆ.
• ಅನಾನುಕೂಲಗಳು: ತುಂಬಾ ವಿವರವಾದ ಮತ್ತು ಪುನರಾವರ್ತಿತ. ಆಳವಾಗಿ ನೆಸ್ಟೆಡ್ ಆಬ್ಜೆಕ್ಟ್‌ಗಳಿಗೆ ಇದು ನಿರ್ವಹಿಸಲಾಗದು ಮತ್ತು ಇದನ್ನು ಸಾಮಾನ್ಯವಾಗಿ ಆಬ್ಜೆಕ್ಟ್‌ಗಳಿಗೆ "ಕಾಲ್‌ಬ್ಯಾಕ್ ಹೆಲ್" ಎಂದು ಕರೆಯಲಾಗುತ್ತದೆ.

ಮಾದರಿ 2: ಪರಿಶೀಲನೆಗಾಗಿ ಐಚ್ಛಿಕ ಚೈನಿಂಗ್ ಅನ್ನು ಬಳಸುವುದು

`if` ಹೇಳಿಕೆಯ ಷರತ್ತು ಭಾಗಕ್ಕಾಗಿ ನಮ್ಮ ಸ್ನೇಹಿತ, ಐಚ್ಛಿಕ ಚೈನಿಂಗ್ ಆಪರೇಟರ್ ಅನ್ನು ಬಳಸಿಕೊಂಡು ನಾವು ಕ್ಲಾಸಿಕ್ ವಿಧಾನವನ್ನು ಗಮನಾರ್ಹವಾಗಿ ಸ್ವಚ್ಛಗೊಳಿಸಬಹುದು. ಇದು ಸುರಕ್ಷಿತ ಓದುವಿಕೆಯನ್ನು ನೇರ ಬರವಣಿಗೆಯಿಂದ ಪ್ರತ್ಯೇಕಿಸುತ್ತದೆ.

ಕೋಡ್ ಉದಾಹರಣೆ:

const user = { profile: {} }; // 'address' ಆಬ್ಜೆಕ್ಟ್ ಅಸ್ತಿತ್ವದಲ್ಲಿದ್ದರೆ, ಬೀದಿಯನ್ನು ನವೀಕರಿಸಿ if (user?.profile?.address) { user.profile.address.street = '456 Tech Park'; }

ಇದು ಓದುವಿಕೆಯಲ್ಲಿ ಒಂದು ದೊಡ್ಡ ಸುಧಾರಣೆಯಾಗಿದೆ. ನಾವು ಸಂಪೂರ್ಣ ಪಾತ್ ಅನ್ನು ಒಂದೇ ಬಾರಿಗೆ ಸುರಕ್ಷಿತವಾಗಿ ಪರಿಶೀಲಿಸುತ್ತೇವೆ. ಪಾತ್ ಅಸ್ತಿತ್ವದಲ್ಲಿದ್ದರೆ (ಅಂದರೆ, ಅಭಿವ್ಯಕ್ತಿಯು `undefined` ಅನ್ನು ಹಿಂತಿರುಗಿಸದಿದ್ದರೆ), ನಾವು ಅಸೈನ್‌ಮೆಂಟ್‌ನೊಂದಿಗೆ ಮುಂದುವರಿಯುತ್ತೇವೆ, ಅದು ಈಗ ಸುರಕ್ಷಿತವೆಂದು ನಮಗೆ ತಿಳಿದಿದೆ.

• ಅನುಕೂಲಗಳು: ಕ್ಲಾಸಿಕ್ ಗಾರ್ಡ್‌ಗಿಂತ ಹೆಚ್ಚು ಸಂಕ್ಷಿಪ್ತ ಮತ್ತು ಓದಬಲ್ಲದು. ಇದು ಉದ್ದೇಶವನ್ನು ಸ್ಪಷ್ಟವಾಗಿ ವ್ಯಕ್ತಪಡಿಸುತ್ತದೆ: "ಈ ಪಾತ್ ಮಾನ್ಯವಾಗಿದ್ದರೆ, ನವೀಕರಣವನ್ನು ನಿರ್ವಹಿಸಿ."
• ಅನಾನುಕೂಲಗಳು: ಇದಕ್ಕೆ ಇನ್ನೂ ಎರಡು ಪ್ರತ್ಯೇಕ ಹಂತಗಳು ಬೇಕಾಗುತ್ತವೆ (ಪರಿಶೀಲನೆ ಮತ್ತು ಅಸೈನ್‌ಮೆಂಟ್). ಮುಖ್ಯವಾಗಿ, ಈ ಮಾದರಿಯು ಪಾತ್ ಅಸ್ತಿತ್ವದಲ್ಲಿಲ್ಲದಿದ್ದರೆ ಅದನ್ನು ರಚಿಸುವುದಿಲ್ಲ. ಇದು ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ರಚನೆಗಳನ್ನು ಮಾತ್ರ ನವೀಕರಿಸುತ್ತದೆ.

ಮಾದರಿ 3: 'ಹೋದಂತೆ-ನಿರ್ಮಿಸು' ಪಾತ್ ರಚನೆ (ಲಾಜಿಕಲ್ ಅಸೈನ್‌ಮೆಂಟ್ ಆಪರೇಟರ್‌ಗಳು)

ನಮ್ಮ ಗುರಿ ಕೇವಲ ನವೀಕರಿಸುವುದಲ್ಲ, ಆದರೆ ಪಾತ್ ಅಸ್ತಿತ್ವದಲ್ಲಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳುವುದು, ಅಗತ್ಯವಿದ್ದರೆ ಅದನ್ನು ರಚಿಸುವುದಾದರೆ ಏನು? ಇಲ್ಲಿಯೇ ಲಾಜಿಕಲ್ ಅಸೈನ್‌ಮೆಂಟ್ ಆಪರೇಟರ್‌ಗಳು (ES2021 ರಲ್ಲಿ ಪರಿಚಯಿಸಲಾಗಿದೆ) ಪ್ರಕಾಶಿಸುತ್ತವೆ. ಈ ಕಾರ್ಯಕ್ಕಾಗಿ ಅತ್ಯಂತ ಸಾಮಾನ್ಯವಾದದ್ದು ಲಾಜಿಕಲ್ OR ಅಸೈನ್‌ಮೆಂಟ್ (`||=`).

`a ||= b` ಅಭಿವ್ಯಕ್ತಿಯು `a = a || b` ಗೆ ಸಿಂಟ್ಯಾಕ್ಟಿಕ್ ಶುಗರ್ ಆಗಿದೆ. ಇದರರ್ಥ: `a` ಒಂದು ಫಾಲ್ಸಿ ಮೌಲ್ಯವಾಗಿದ್ದರೆ (`undefined`, `null`, `0`, `''`, ಇತ್ಯಾದಿ), `b` ಅನ್ನು `a` ಗೆ ಅಸೈನ್ ಮಾಡಿ.

ನಾವು ಈ ನಡವಳಿಕೆಯನ್ನು ಹಂತ-ಹಂತವಾಗಿ ಆಬ್ಜೆಕ್ಟ್ ಪಾತ್ ಅನ್ನು ನಿರ್ಮಿಸಲು ಚೈನ್ ಮಾಡಬಹುದು.

ಕೋಡ್ ಉದಾಹರಣೆ:

const settings = {}; // ಬಣ್ಣವನ್ನು ಅಸೈನ್ ಮಾಡುವ ಮೊದಲು 'ui' ಮತ್ತು 'theme' ಆಬ್ಜೆಕ್ಟ್‌ಗಳು ಅಸ್ತಿತ್ವದಲ್ಲಿವೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ (settings.ui ||= {}).theme ||= {}; settings.ui.theme.color = 'darkblue'; console.log(settings); // ಔಟ್‌ಪುಟ್‌ಗಳು: { ui: { theme: { color: 'darkblue' } } }

ಇದು ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ:

1. `settings.ui ||= {}`: `settings.ui` `undefined` (ಫಾಲ್ಸಿ) ಆಗಿದೆ, ಆದ್ದರಿಂದ ಅದಕ್ಕೆ ಹೊಸ ಖಾಲಿ ಆಬ್ಜೆಕ್ಟ್ `{}` ಅನ್ನು ಅಸೈನ್ ಮಾಡಲಾಗುತ್ತದೆ. ಸಂಪೂರ್ಣ ಅಭಿವ್ಯಕ್ತಿ `(settings.ui ||= {})` ಈ ಹೊಸ ಆಬ್ಜೆಕ್ಟ್‌ಗೆ ಮೌಲ್ಯಮಾಪನಗೊಳ್ಳುತ್ತದೆ.
2. `{}.theme ||= {}`: ನಂತರ ನಾವು ಹೊಸದಾಗಿ ರಚಿಸಲಾದ `ui` ಆಬ್ಜೆಕ್ಟ್‌ನ `theme` ಪ್ರಾಪರ್ಟಿಯನ್ನು ಪ್ರವೇಶಿಸುತ್ತೇವೆ. ಅದು ಕೂಡ `undefined` ಆಗಿದೆ, ಆದ್ದರಿಂದ ಅದಕ್ಕೆ ಹೊಸ ಖಾಲಿ ಆಬ್ಜೆಕ್ಟ್ `{}` ಅನ್ನು ಅಸೈನ್ ಮಾಡಲಾಗುತ್ತದೆ.
3. `settings.ui.theme.color = 'darkblue'`: ಈಗ ನಾವು `settings.ui.theme` ಪಾತ್ ಅಸ್ತಿತ್ವದಲ್ಲಿದೆ ಎಂದು ಖಾತರಿಪಡಿಸಿದ್ದೇವೆ, ನಾವು ಸುರಕ್ಷಿತವಾಗಿ `color` ಪ್ರಾಪರ್ಟಿಯನ್ನು ಅಸೈನ್ ಮಾಡಬಹುದು.

• ಅನುಕೂಲಗಳು: ಬೇಡಿಕೆಯ ಮೇರೆಗೆ ನೆಸ್ಟೆಡ್ ರಚನೆಗಳನ್ನು ರಚಿಸಲು ಅತ್ಯಂತ ಸಂಕ್ಷಿಪ್ತ ಮತ್ತು ಶಕ್ತಿಯುತ. ಇದು ಆಧುನಿಕ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನಲ್ಲಿ ಬಹಳ ಸಾಮಾನ್ಯ ಮತ್ತು ಭಾಷಾಸಹಜ ಮಾದರಿಯಾಗಿದೆ.
• ಅನಾನುಕೂಲಗಳು: ಇದು ಮೂಲ ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ನೇರವಾಗಿ ಬದಲಾಯಿಸುತ್ತದೆ, ಇದು ಫಂಕ್ಷನಲ್ ಅಥವಾ ಇಮ್ಮ್ಯೂಟಬಲ್ ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಮಾದರಿಗಳಲ್ಲಿ ಅಪೇಕ್ಷಣೀಯವಾಗಿರದೆ ಇರಬಹುದು. ಲಾಜಿಕಲ್ ಅಸೈನ್‌ಮೆಂಟ್ ಆಪರೇಟರ್‌ಗಳ ಪರಿಚಯವಿಲ್ಲದ ಡೆವಲಪರ್‌ಗಳಿಗೆ ಸಿಂಟ್ಯಾಕ್ಸ್ ಸ್ವಲ್ಪ ಗೂಢಾರ್ಥವಾಗಿರಬಹುದು.

ಮಾದರಿ 4: ಯುಟಿಲಿಟಿ ಲೈಬ್ರರಿಗಳೊಂದಿಗೆ ಫಂಕ್ಷನಲ್ ಮತ್ತು ಇಮ್ಮ್ಯೂಟಬಲ್ ವಿಧಾನಗಳು

ಅನೇಕ ದೊಡ್ಡ-ಪ್ರಮಾಣದ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿ, ವಿಶೇಷವಾಗಿ ರೆಡಕ್ಸ್‌ನಂತಹ ಸ್ಥಿತಿ ನಿರ್ವಹಣಾ ಲೈಬ್ರರಿಗಳನ್ನು ಬಳಸುವ ಅಥವಾ ರಿಯಾಕ್ಟ್ ಸ್ಥಿತಿಯನ್ನು ನಿರ್ವಹಿಸುವ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿ, ಇಮ್ಮ್ಯೂಟಬಿಲಿಟಿ ಒಂದು ಪ್ರಮುಖ ತತ್ವವಾಗಿದೆ. ಆಬ್ಜೆಕ್ಟ್‌ಗಳನ್ನು ನೇರವಾಗಿ ಬದಲಾಯಿಸುವುದು ಅನಿರೀಕ್ಷಿತ ನಡವಳಿಕೆಗೆ ಮತ್ತು ಪತ್ತೆಹಚ್ಚಲು ಕಷ್ಟಕರವಾದ ಬಗ್‌ಗಳಿಗೆ ಕಾರಣವಾಗಬಹುದು. ಈ ಸಂದರ್ಭಗಳಲ್ಲಿ, ಡೆವಲಪರ್‌ಗಳು ಸಾಮಾನ್ಯವಾಗಿ ಲೋಡ್ಯಾಶ್ ಅಥವಾ ರಾಮ್ಡಾ ದಂತಹ ಯುಟಿಲಿಟಿ ಲೈಬ್ರರಿಗಳನ್ನು ಬಳಸುತ್ತಾರೆ.

ಲೋಡ್ಯಾಶ್ ಒಂದು `_.set()` ಫಂಕ್ಷನ್ ಅನ್ನು ಒದಗಿಸುತ್ತದೆ, ಅದು ಈ ನಿಖರವಾದ ಸಮಸ್ಯೆಗೆಂದೇ ನಿರ್ಮಿಸಲಾಗಿದೆ. ಇದು ಒಂದು ಆಬ್ಜೆಕ್ಟ್, ಒಂದು ಸ್ಟ್ರಿಂಗ್ ಪಾತ್, ಮತ್ತು ಒಂದು ಮೌಲ್ಯವನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ, ಮತ್ತು ಅದು ಆ ಪಾತ್‌ನಲ್ಲಿ ಸುರಕ್ಷಿತವಾಗಿ ಮೌಲ್ಯವನ್ನು ಹೊಂದಿಸುತ್ತದೆ, ದಾರಿಯಲ್ಲಿ ಯಾವುದೇ ಅಗತ್ಯ ನೆಸ್ಟೆಡ್ ಆಬ್ಜೆಕ್ಟ್‌ಗಳನ್ನು ರಚಿಸುತ್ತದೆ.

ಲೋಡ್ಯಾಶ್‌ನೊಂದಿಗೆ ಕೋಡ್ ಉದಾಹರಣೆ:

import { set } from 'lodash-es'; const originalUser = { id: 101 }; // _.set ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ಬದಲಾಯಿಸುತ್ತದೆ, ಆದರೆ ಇಮ್ಮ್ಯೂಟಬಿಲಿಟಿಗಾಗಿ ಇದನ್ನು ಸಾಮಾನ್ಯವಾಗಿ ಕ್ಲೋನ್‌ನೊಂದಿಗೆ ಬಳಸಲಾಗುತ್ತದೆ. const updatedUser = set(JSON.parse(JSON.stringify(originalUser)), 'profile.address.street', '789 API Boulevard'); console.log(originalUser); // ಔಟ್‌ಪುಟ್‌ಗಳು: { id: 101 } (ಬದಲಾಗದೆ ಉಳಿದಿದೆ) console.log(updatedUser); // ಔಟ್‌ಪುಟ್‌ಗಳು: { id: 101, profile: { address: { street: '789 API Boulevard' } } }

• ಅನುಕೂಲಗಳು: ಹೆಚ್ಚು ಘೋಷಣಾತ್ಮಕ ಮತ್ತು ಓದಬಲ್ಲದು. ಉದ್ದೇಶ (`set(object, path, value)`) кристаಲ್ ಕ್ಲಿಯರ್ ಆಗಿದೆ. ಇದು ಸಂಕೀರ್ಣ ಪಾತ್‌ಗಳನ್ನು (ಅರೇ ಇಂಡೆಕ್ಸ್‌ಗಳನ್ನು ಒಳಗೊಂಡಂತೆ `'posts[0].title'`) ದೋಷರಹಿತವಾಗಿ ನಿಭಾಯಿಸುತ್ತದೆ. ಇದು ಇಮ್ಮ್ಯೂಟಬಲ್ ನವೀಕರಣ ಮಾದರಿಗಳಿಗೆ ಸಂಪೂರ್ಣವಾಗಿ ಹೊಂದಿಕೊಳ್ಳುತ್ತದೆ.
• ಅನಾನುಕೂಲಗಳು: ಇದು ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್‌ಗೆ ಬಾಹ್ಯ ಅವಲಂಬನೆಯನ್ನು ಪರಿಚಯಿಸುತ್ತದೆ. ನಿಮಗೆ ಬೇಕಾಗಿರುವುದು ಈ ಒಂದೇ ವೈಶಿಷ್ಟ್ಯವಾಗಿದ್ದರೆ, ಅದು ಅತಿಯಾಗಬಹುದು. ನೇಟಿವ್ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪರಿಹಾರಗಳಿಗೆ ಹೋಲಿಸಿದರೆ ಸ್ವಲ್ಪ ಕಾರ್ಯಕ್ಷಮತೆಯ ಓವರ್‌ಹೆಡ್ ಇರುತ್ತದೆ.

ಭವಿಷ್ಯದತ್ತ ಒಂದು ನೋಟ: ನಿಜವಾದ ಐಚ್ಛಿಕ ಚೈನಿಂಗ್ ಅಸೈನ್‌ಮೆಂಟ್?

ಈ ಕಾರ್ಯಚಟುವಟಿಕೆಯ ಸ್ಪಷ್ಟ ಅಗತ್ಯವನ್ನು ಗಮನದಲ್ಲಿಟ್ಟುಕೊಂಡು, TC39 ಸಮಿತಿಯು (ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಪ್ರಮಾಣೀಕರಿಸುವ ಗುಂಪು) ಐಚ್ಛಿಕ ಚೈನಿಂಗ್ ಅಸೈನ್‌ಮೆಂಟ್‌ಗಾಗಿ ಮೀಸಲಾದ ಆಪರೇಟರ್ ಅನ್ನು ಸೇರಿಸುವುದನ್ನು ಪರಿಗಣಿಸಿದೆಯೇ? ಉತ್ತರ ಹೌದು, ಇದನ್ನು ಚರ್ಚಿಸಲಾಗಿದೆ.

ಆದಾಗ್ಯೂ, ಪ್ರಸ್ತಾವನೆಯು ಪ್ರಸ್ತುತ ಸಕ್ರಿಯವಾಗಿಲ್ಲ ಅಥವಾ ಹಂತಗಳ ಮೂಲಕ ಮುಂದುವರಿಯುತ್ತಿಲ್ಲ. ಪ್ರಾಥಮಿಕ ಸವಾಲು ಅದರ ನಿಖರವಾದ ನಡವಳಿಕೆಯನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವುದು. `a?.b = c;` ಅಭಿವ್ಯಕ್ತಿಯನ್ನು ಪರಿಗಣಿಸಿ.

• `a` `undefined` ಆಗಿದ್ದರೆ ಏನಾಗಬೇಕು?
• ಅಸೈನ್‌ಮೆಂಟ್ ಅನ್ನು ಮೌನವಾಗಿ ನಿರ್ಲಕ್ಷಿಸಬೇಕೇ (ಒಂದು "ನೋ-ಆಪ್")?
• ಅದು ಬೇರೆ ರೀತಿಯ ದೋಷವನ್ನು ಎಸೆಯಬೇಕೇ?
• ಸಂಪೂರ್ಣ ಅಭಿವ್ಯಕ್ತಿಯು ಕೆಲವು ಮೌಲ್ಯಕ್ಕೆ ಮೌಲ್ಯಮಾಪನಗೊಳ್ಳಬೇಕೇ?

ಈ ಅಸ್ಪಷ್ಟತೆ ಮತ್ತು ಅತ್ಯಂತ ಸಹಜವಾದ ನಡವಳಿಕೆಯ ಬಗ್ಗೆ ಸ್ಪಷ್ಟ ಒಮ್ಮತದ ಕೊರತೆಯು ಈ ವೈಶಿಷ್ಟ್ಯವು ಕಾರ್ಯರೂಪಕ್ಕೆ ಬರದ ಪ್ರಮುಖ ಕಾರಣವಾಗಿದೆ. ಸದ್ಯಕ್ಕೆ, ನಾವು ಚರ್ಚಿಸಿದ ಮಾದರಿಗಳು ಸುರಕ್ಷಿತ ಪ್ರಾಪರ್ಟಿ ಮಾರ್ಪಾಡನ್ನು ನಿಭಾಯಿಸಲು ಪ್ರಮಾಣಿತ, ಅಂಗೀಕೃತ ವಿಧಾನಗಳಾಗಿವೆ.

ಪ್ರಾಯೋಗಿಕ ಸನ್ನಿವೇಶಗಳು ಮತ್ತು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು

ನಮ್ಮ ಬಳಿ ಹಲವಾರು ಮಾದರಿಗಳಿರುವಾಗ, ಕೆಲಸಕ್ಕೆ ಸರಿಯಾದದನ್ನು ನಾವು ಹೇಗೆ ಆರಿಸುವುದು? ಇಲ್ಲಿದೆ ಒಂದು ಸರಳ ನಿರ್ಧಾರ ಮಾರ್ಗದರ್ಶಿ.

ಯಾವ ಮಾದರಿಯನ್ನು ಯಾವಾಗ ಬಳಸಬೇಕು? ಒಂದು ನಿರ್ಧಾರ ಮಾರ್ಗದರ್ಶಿ

• `if (obj?.path) { ... }` ಅನ್ನು ಬಳಸಿ ಯಾವಾಗ:
  • ಪೇರೆಂಟ್ ಆಬ್ಜೆಕ್ಟ್ ಈಗಾಗಲೇ ಅಸ್ತಿತ್ವದಲ್ಲಿದ್ದರೆ ಮಾತ್ರ ನೀವು ಪ್ರಾಪರ್ಟಿಯನ್ನು ಮಾರ್ಪಡಿಸಲು ಬಯಸುತ್ತೀರಿ.
  • ನೀವು ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಡೇಟಾವನ್ನು ಪ್ಯಾಚ್ ಮಾಡುತ್ತಿದ್ದೀರಿ ಮತ್ತು ಹೊಸ ನೆಸ್ಟೆಡ್ ರಚನೆಗಳನ್ನು ರಚಿಸಲು ಬಯಸುವುದಿಲ್ಲ.
  • ಉದಾಹರಣೆ: ಬಳಕೆದಾರರ 'lastLogin' ಟೈಮ್‌ಸ್ಟ್ಯಾಂಪ್ ಅನ್ನು ನವೀಕರಿಸುವುದು, ಆದರೆ 'metadata' ಆಬ್ಜೆಕ್ಟ್ ಈಗಾಗಲೇ ಇದ್ದರೆ ಮಾತ್ರ.
• `(obj.prop ||= {})...` ಅನ್ನು ಬಳಸಿ ಯಾವಾಗ:
  • ಒಂದು ಪಾತ್ ಅಸ್ತಿತ್ವದಲ್ಲಿದೆ ಎಂದು ನೀವು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಬಯಸುತ್ತೀರಿ, ಅದು ಕಾಣೆಯಾಗಿದ್ದರೆ ಅದನ್ನು ರಚಿಸುವುದು.
  • ನೇರ ಆಬ್ಜೆಕ್ಟ್ ಬದಲಾವಣೆಯೊಂದಿಗೆ ನಿಮಗೆ ಆರಾಮವಿದೆ.
  • ಉದಾಹರಣೆ: ಕಾನ್ಫಿಗರೇಶನ್ ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ಪ್ರಾರಂಭಿಸುವುದು, ಅಥವಾ ಬಳಕೆದಾರರ ಪ್ರೊಫೈಲ್‌ಗೆ ಹೊಸ ಐಟಂ ಅನ್ನು ಸೇರಿಸುವುದು, ಆ ವಿಭಾಗವು ಇನ್ನೂ ಇಲ್ಲದಿರಬಹುದು.
• ಲೋಡ್ಯಾಶ್ `_.set` ನಂತಹ ಲೈಬ್ರರಿಯನ್ನು ಬಳಸಿ ಯಾವಾಗ:
  • ನೀವು ಈಗಾಗಲೇ ಆ ಲೈಬ್ರರಿಯನ್ನು ಬಳಸುವ ಕೋಡ್‌ಬೇಸ್‌ನಲ್ಲಿ ಕೆಲಸ ಮಾಡುತ್ತಿದ್ದೀರಿ.
  • ನೀವು ಕಟ್ಟುನಿಟ್ಟಾದ ಇಮ್ಮ್ಯೂಟಬಿಲಿಟಿ ಮಾದರಿಗಳಿಗೆ ಬದ್ಧರಾಗಿರಬೇಕು.
  • ಅರೇ ಇಂಡೆಕ್ಸ್‌ಗಳನ್ನು ಒಳಗೊಂಡಿರುವಂತಹ ಹೆಚ್ಚು ಸಂಕೀರ್ಣ ಪಾತ್‌ಗಳನ್ನು ನೀವು ನಿಭಾಯಿಸಬೇಕಾಗಿದೆ.
  • ಉದಾಹರಣೆ: ರೆಡಕ್ಸ್ ರಿಡ್ಯೂಸರ್‌ನಲ್ಲಿ ಸ್ಥಿತಿಯನ್ನು ನವೀಕರಿಸುವುದು.

`??=` (ನಲಿಶ್ ಕೋಲೆಸಿಂಗ್ ಅಸೈನ್‌ಮೆಂಟ್) ಕುರಿತು ಒಂದು ಟಿಪ್ಪಣಿ

`||=` ಆಪರೇಟರ್‌ನ ನಿಕಟ ಸಂಬಂಧಿ: ನಲಿಶ್ ಕೋಲೆಸಿಂಗ್ ಅಸೈನ್‌ಮೆಂಟ್ (`??=`) ಅನ್ನು ಉಲ್ಲೇಖಿಸುವುದು ಮುಖ್ಯ. `||=` ಯಾವುದೇ ಫಾಲ್ಸಿ ಮೌಲ್ಯದ ಮೇಲೆ ಪ್ರಚೋದಿಸುತ್ತದೆ (`undefined`, `null`, `false`, `0`, `''`), `??=` ಹೆಚ್ಚು ನಿಖರವಾಗಿದೆ ಮತ್ತು ಕೇವಲ `undefined` ಅಥವಾ `null` ಗಾಗಿ ಮಾತ್ರ ಪ್ರಚೋದಿಸುತ್ತದೆ.

ಮಾನ್ಯ ಪ್ರಾಪರ್ಟಿ ಮೌಲ್ಯವು `0` ಅಥವಾ ಖಾಲಿ ಸ್ಟ್ರಿಂಗ್ ಆಗಿರಬಹುದಾದಾಗ ಈ ವ್ಯತ್ಯಾಸವು ನಿರ್ಣಾಯಕವಾಗಿದೆ.

ಕೋಡ್ ಉದಾಹರಣೆ: `||=` ನ ಅಪಾಯ

const product = { name: 'Widget', discount: 0 }; // ಯಾವುದೂ ಹೊಂದಿಸದಿದ್ದರೆ ನಾವು ಡೀಫಾಲ್ಟ್ 10 ರ ರಿಯಾಯಿತಿಯನ್ನು ಅನ್ವಯಿಸಲು ಬಯಸುತ್ತೇವೆ. product.discount ||= 10; console.log(product.discount); // ಔಟ್‌ಪುಟ್‌ಗಳು: 10 (ತಪ್ಪು! ರಿಯಾಯಿತಿಯು ಉದ್ದೇಶಪೂರ್ವಕವಾಗಿ 0 ಆಗಿತ್ತು)

ಇಲ್ಲಿ, `0` ಒಂದು ಫಾಲ್ಸಿ ಮೌಲ್ಯವಾಗಿರುವುದರಿಂದ, `||=` ಅದನ್ನು ತಪ್ಪಾಗಿ ತಿದ್ದಿಬರೆಯಿತು. `??=` ಬಳಸುವುದರಿಂದ ಈ ಸಮಸ್ಯೆಯನ್ನು ಪರಿಹರಿಸುತ್ತದೆ.

ಕೋಡ್ ಉದಾಹರಣೆ: `??=` ನ ನಿಖರತೆ

const product = { name: 'Widget', discount: 0 }; // ಅದು null ಅಥವಾ undefined ಆಗಿದ್ದರೆ ಮಾತ್ರ ಡೀಫಾಲ್ಟ್ ರಿಯಾಯಿತಿಯನ್ನು ಅನ್ವಯಿಸಿ. product.discount ??= 10; console.log(product.discount); // ಔಟ್‌ಪುಟ್‌ಗಳು: 0 (ಸರಿ!) const anotherProduct = { name: 'Gadget' }; // discount undefined ಆಗಿದೆ anotherProduct.discount ??= 10; console.log(anotherProduct.discount); // ಔಟ್‌ಪುಟ್‌ಗಳು: 10 (ಸರಿ!)

ಉತ್ತಮ ಅಭ್ಯಾಸ: ಆಬ್ಜೆಕ್ಟ್ ಪಾತ್‌ಗಳನ್ನು ರಚಿಸುವಾಗ (ಅವು ಯಾವಾಗಲೂ ಆರಂಭದಲ್ಲಿ `undefined` ಆಗಿರುತ್ತವೆ), `||=` ಮತ್ತು `??=` ಪರಸ್ಪರ ಬದಲಾಯಿಸಲ್ಪಡಬಹುದು. ಆದಾಗ್ಯೂ, ಈಗಾಗಲೇ ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಪ್ರಾಪರ್ಟಿಗಳಿಗೆ ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯಗಳನ್ನು ಹೊಂದಿಸುವಾಗ, `0`, `false`, ಅಥವಾ `''` ನಂತಹ ಮಾನ್ಯ ಫಾಲ್ಸಿ ಮೌಲ್ಯಗಳನ್ನು ಅಜಾಗರೂಕತೆಯಿಂದ ತಿದ್ದಿಬರೆಯುವುದನ್ನು ತಪ್ಪಿಸಲು `??=` ಅನ್ನು ಬಳಸಿ.

ತೀರ್ಮಾನ: ಸುರಕ್ಷಿತ ಮತ್ತು ಸ್ಥಿತಿಸ್ಥಾಪಕ ಆಬ್ಜೆಕ್ಟ್ ಮಾರ್ಪಾಡಿನಲ್ಲಿ ಪರಿಣತಿ

ನೇಟಿವ್ "ಐಚ್ಛಿಕ ಚೈನಿಂಗ್ ಅಸೈನ್‌ಮೆಂಟ್" ಆಪರೇಟರ್ ಅನೇಕ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಡೆವಲಪರ್‌ಗಳಿಗೆ ಒಂದು ಹಾರೈಕೆಯ ವಸ್ತುವಾಗಿ ಉಳಿದಿದ್ದರೂ, ಭಾಷೆಯು ಸುರಕ್ಷಿತ ಪ್ರಾಪರ್ಟಿ ಮಾರ್ಪಾಡಿನ ಮೂಲಭೂತ ಸಮಸ್ಯೆಯನ್ನು ಪರಿಹರಿಸಲು ಶಕ್ತಿಯುತ ಮತ್ತು ಹೊಂದಿಕೊಳ್ಳುವ ಟೂಲ್‌ಕಿಟ್ ಅನ್ನು ಒದಗಿಸುತ್ತದೆ. ಕಾಣೆಯಾದ ಆಪರೇಟರ್‌ನ ಆರಂಭಿಕ ಪ್ರಶ್ನೆಯನ್ನು ಮೀರಿ ಸಾಗುವ ಮೂಲಕ, ನಾವು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂಬುದರ ಬಗ್ಗೆ ಆಳವಾದ ತಿಳುವಳಿಕೆಯನ್ನು ಕಂಡುಕೊಳ್ಳುತ್ತೇವೆ.

ಪ್ರಮುಖ ಅಂಶಗಳನ್ನು ಪುನರಾವಲೋಕಿಸೋಣ:

• ಐಚ್ಛಿಕ ಚೈನಿಂಗ್ ಆಪರೇಟರ್ (`?.`) ನೆಸ್ಟೆಡ್ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಓದಲು ಒಂದು ಗೇಮ್-ಚೇಂಜರ್ ಆಗಿದೆ, ಆದರೆ ಮೂಲಭೂತ ಭಾಷಾ ಸಿಂಟ್ಯಾಕ್ಸ್ ನಿಯಮಗಳ (`lvalue` vs. `rvalue`) ಕಾರಣದಿಂದಾಗಿ ಇದನ್ನು ಅಸೈನ್‌ಮೆಂಟ್‌ಗೆ ಬಳಸಲಾಗುವುದಿಲ್ಲ.
• ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಪಾತ್‌ಗಳನ್ನು ಮಾತ್ರ ನವೀಕರಿಸಲು, ಆಧುನಿಕ `if` ಹೇಳಿಕೆಯನ್ನು ಐಚ್ಛಿಕ ಚೈನಿಂಗ್ (`if (user?.profile?.address)`) ನೊಂದಿಗೆ ಸಂಯೋಜಿಸುವುದು ಅತ್ಯಂತ ಸ್ವಚ್ಛ ಮತ್ತು ಓದಬಲ್ಲ ವಿಧಾನವಾಗಿದೆ.
• ಪಾತ್ ಅನ್ನು ಹಾರಾಡುತ್ತ ರಚಿಸುವ ಮೂಲಕ ಅದರ ಅಸ್ತಿತ್ವವನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು, ಲಾಜಿಕಲ್ ಅಸೈನ್‌ಮೆಂಟ್ ಆಪರೇಟರ್‌ಗಳು (`||=` ಅಥವಾ ಹೆಚ್ಚು ನಿಖರವಾದ `??=`) ಸಂಕ್ಷಿಪ್ತ ಮತ್ತು ಶಕ್ತಿಯುತ ನೇಟಿವ್ ಪರಿಹಾರವನ್ನು ಒದಗಿಸುತ್ತವೆ.
• ಇಮ್ಮ್ಯೂಟಬಿಲಿಟಿಯನ್ನು ಬೇಡುವ ಅಥವಾ ಹೆಚ್ಚು ಸಂಕೀರ್ಣ ಪಾತ್ ಅಸೈನ್‌ಮೆಂಟ್‌ಗಳನ್ನು ನಿಭಾಯಿಸುವ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗಾಗಿ, ಲೋಡ್ಯಾಶ್‌ನಂತಹ ಯುಟಿಲಿಟಿ ಲೈಬ್ರರಿಗಳು ಘೋಷಣಾತ್ಮಕ ಮತ್ತು ದೃಢವಾದ ಪರ್ಯಾಯವನ್ನು ನೀಡುತ್ತವೆ.

ಈ ಮಾದರಿಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವ ಮೂಲಕ ಮತ್ತು ಅವುಗಳನ್ನು ಯಾವಾಗ ಅನ್ವಯಿಸಬೇಕು ಎಂದು ತಿಳಿದುಕೊಳ್ಳುವ ಮೂಲಕ, ನೀವು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಬರೆಯಬಹುದು, ಅದು ಕೇವಲ ಸ್ವಚ್ಛ ಮತ್ತು ಹೆಚ್ಚು ಆಧುನಿಕವಲ್ಲ, ಆದರೆ ಹೆಚ್ಚು ಸ್ಥಿತಿಸ್ಥಾಪಕ ಮತ್ತು ರನ್‌ಟೈಮ್ ದೋಷಗಳಿಗೆ ಕಡಿಮೆ ಒಳಗಾಗುತ್ತದೆ. ನೀವು ಯಾವುದೇ ಡೇಟಾ ರಚನೆಯನ್ನು, ಅದು ಎಷ್ಟೇ ನೆಸ್ಟೆಡ್ ಅಥವಾ ಅನಿರೀಕ್ಷಿತವಾಗಿದ್ದರೂ, ಆತ್ಮವಿಶ್ವಾಸದಿಂದ ನಿಭಾಯಿಸಬಹುದು ಮತ್ತು ವಿನ್ಯಾಸದಿಂದಲೇ ದೃಢವಾದ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಬಹುದು.