From ac1ed508f71b7435929da848a205453366bd6ff1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?L=C3=AA=20Duy=20Quang?= Date: Wed, 13 Jan 2021 21:43:26 +0700 Subject: [PATCH] Added "Cannot read property "abc" of null/undefined." --- .../javascript/cannot-read-property.md | 193 ++++++++++++++++++ 1 file changed, 193 insertions(+) create mode 100644 src/content/resources/language/javascript/cannot-read-property.md diff --git a/src/content/resources/language/javascript/cannot-read-property.md b/src/content/resources/language/javascript/cannot-read-property.md new file mode 100644 index 0000000..0b7ecd5 --- /dev/null +++ b/src/content/resources/language/javascript/cannot-read-property.md @@ -0,0 +1,193 @@ +--- +authors: + - "leduyquang753#3761" +created_at: "2021/01/13" +title: Cannot read property "abc" of null/undefined +--- + +When running JavaScript code, a very common error that occurs is: + +```none +console.log(someRandomThing.abc) + ^ + +TypeError: Cannot read property "abc" of undefined +``` + +This is a very basic error, yet people who are new to JavaScript (and maybe +programming) often either gloss over or misunderstand the problem being +presented in their code, and come to _The programmer's hangout_ to seek an +explanation. + +## Causes + +### Direct cause + +When the JavaScript engine complains about "Cannot read property `abc` of +`null`/`undefined`", it means that the thing whose property `abc` is being +retrieved is either `null` or `undefined`. + +```js +$ node +> let someRandomThing; +undefined +> console.log(someRandomThing.abc); +// ---- Owner ----|Property +Uncaught TypeError: Cannot read property 'abc' of undefined +``` + +The most important thing to note here is it's the "_owner_" that is being +`null`/`undefined`. A common mistake is to interpret the error message as that +the "property" is `null`/`undefined` instead. + +### Possible behind causes + +For a variable to come up containing `null` or `undefined` (most commonly +`undefined`) so that the "Cannot read property" error can arise later, the code +must have done something wrong beforehand. This section lists some common +bugs and mistakes. + +#### `undefined` from nonexistent object property + +By default, when accessing an object's property in JavaScript, if the object in +question doesn't have such property, it will return `undefined` as the default. +This applies to nonexistent array indices as well. + +```js +> let keyMapping = { + moveUp: "KeyW", + moveDown: "KeyS", + moveLeft: "KeyA", + moveRight: "KeyD" +}; +undefined +> keyMapping.mvoeDown +// ^^ Typo, oops. The object doesn't have key "mvoeDown". +undefined +``` + +```js +> let randomNumbers = [16, 57, 3]; +// Index: 0 1 2 +undefined +> randomNumbers[3] // ! The array does not have index 3. +undefined +``` + +#### `null` from failed queries + +Some functions, for example `getElementById` from the browser API, returns +`null` if the function failed to find any result matching what is requested. +If left unchecked and the returned value is used in other places, the "Cannot +read property" might arise. + +```html + + + +

Welcome to The programmer's hangout.

+

+ This is the place for programmers of any skill level to, well, hangout + with other fellow programmers. Whether you have just written 5 lines of + code or been a code nerd for 15 years, you are always welcome! +

+ + + +``` + +```none +Uncaught TypeError: Cannot set property "innerText" of null + at tph-welcome.html:16 +``` + +#### `undefined` from uninitialized variables + +When declaring a variable without an initializer, JavaScript defaults the value +of the variable to `undefined`. If nothing else is assigned to it later, the +error will show up. + +```js +> let payload; // Defaults to undefined. +undefined +> let testValue = 6; +undefined +> if (testValue > 10) payload = { id: 167503, message: "Welcome to TPH." }; +// As the condition does not satisfy, "payload" doesn't get assigned +// and remains undefined. +undefined +> console.log(payload.message) +Uncaught TypeError: Cannot read property 'message' of undefined +``` + +## Fixing + +The way to fix the "Cannot read property `abc` of `null`/`undefined`" is of +course, to make sure what is being retrieved properties from is not either +`null` or `undefined`. Based on the reason behind the error, the programmer +determines how the issue shall be fixed. + +#### Make sure a property exists + +Through either checking or reading the documentation for the correct property, +one can make sure what is in their hands isn't JavaScript's default +`undefined`. + +```js +async function onCommand(channel, arguments) { + // Assuming the command is not empty and + // there is always the first argument. + let commandName = arguments[0]; + switch (commandName) { + // ... + case "getUser": + if (arguments.length < 2) + throw "Usage: /getUser "; + // It is guaranteed now that "arguments" has at least 2 elements + // and thus there is an index 1. + let username = arguments[1]; + let user = await botClient.fetchUser(username); + channel.send(JSON.stringify(user); + break; + // ... + } +} +``` + +#### Handle a failed query + +If a query for something fails and returns `null`, the programmer needs to make +sure that situation is handled properly. + +```js +async function getUserID(username) { + // Assuming "username" is guaranteed to be a string. + let user = await botClient.fetchUser(username); + if (user == null) throw "There is no user with that name."; + // It is guaranteed now that "user" isn't null. + return user.id; +} +``` + +#### Make sure a variable contains an actual value + +By either initializing the variable or guaranteeing the variable will +ultimately receive a value, the error won't be able to occur. + +```js +let payload; +let rolledValue = Math.random(); +if (rolledValue > 0.5) + payload = { id: 169323, message: "Welcome to TPH." }; +else + payload = { id: 173205, message: "TPH has been waiting for you." }; +// In either case, "payload" is guaranteed to be assigned an actual value. +botClient.sendMessage(serverJoiner, payload.message); +```