mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-03-07 09:01:13 -05:00
feat(curriculum): add Object.hasOwn() to JS object property checking … (#66201)
This commit is contained in:
@@ -9,7 +9,7 @@ dashedName: how-to-check-if-an-object-has-a-property
|
||||
|
||||
In JavaScript, there are several ways to check if an object has a specific property. Understanding these methods is important for working effectively with objects, especially when you're dealing with data from external sources or when you need to ensure certain properties exist before using them.
|
||||
|
||||
We'll explore three common approaches: the `hasOwnProperty()` method, the `in` operator, and checking against `undefined`.
|
||||
We'll explore some common approaches: the `hasOwnProperty()` method, the `Object.hasOwn()` method, the `in` operator, and checking against `undefined`.
|
||||
|
||||
Let's start with the `hasOwnProperty()` method. This method returns a boolean indicating whether the object has the specified property as its own property. Here's an example:
|
||||
|
||||
@@ -29,6 +29,57 @@ console.log(person.hasOwnProperty("job")); // false
|
||||
|
||||
In this example, we have an object called `person` with two properties: `name` and `age`. To check if `name` is a property in the `person` object, we use the `hasOwnProperty()` method. Since `name` is a property, it will return `true`. But when we use the `hasOwnProperty()` to check if `job` is a property, it will return `false` because it does not exist in the object.
|
||||
|
||||
`Object.hasOwn()` is the modern, recommended way to check if an object has a property as its own (not inherited). Think of it as an upgraded, safer version of `hasOwnProperty()`. The syntax is `Object.hasOwn(object, propertyName)` — you pass the object as the first argument and the property name as the second.
|
||||
|
||||
Here is a basic example:
|
||||
|
||||
:::interactive_editor
|
||||
|
||||
```js
|
||||
const person = {
|
||||
name: "Alice",
|
||||
age: 30
|
||||
};
|
||||
|
||||
console.log(Object.hasOwn(person, "name")); // true
|
||||
console.log(Object.hasOwn(person, "job")); // false
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
In this example, `Object.hasOwn(person, "name")` returns `true` because `name` exists directly on the `person` object. `Object.hasOwn(person, "job")` returns `false` because `job` was never added to the object.
|
||||
|
||||
A very important thing to understand is that `Object.hasOwn()` only checks if the property **exists** — it does not care about the property's value. This means it still returns `true` even when the value is `0`, `false`, `null`, or `undefined`:
|
||||
|
||||
:::interactive_editor
|
||||
|
||||
```js
|
||||
const user = {
|
||||
username: "coder123",
|
||||
score: 0,
|
||||
isActive: false,
|
||||
nickname: null
|
||||
};
|
||||
|
||||
// Object.hasOwn() correctly reports these all exist
|
||||
console.log(Object.hasOwn(user, "score")); // true (value is 0, but property exists)
|
||||
console.log(Object.hasOwn(user, "isActive")); // true (value is false, but property exists)
|
||||
console.log(Object.hasOwn(user, "nickname")); // true (value is null, but property exists)
|
||||
console.log(Object.hasOwn(user, "email")); // false (property was never added)
|
||||
|
||||
// Danger! Using if() directly gives wrong results for falsy values
|
||||
if (user.score) {
|
||||
console.log("Has score"); // This will NOT print even though score exists!
|
||||
}
|
||||
|
||||
// Safe! Object.hasOwn() gives correct result
|
||||
if (Object.hasOwn(user, "score")) {
|
||||
console.log("Has score:", user.score); // Has score: 0
|
||||
}
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
Another way to check for the existence of a property in an object is to use the `in` operator. Like `hasOwnProperty()`, the `in` operator will return `true` if the property exists on the object. Here's how you can use it:
|
||||
|
||||
:::interactive_editor
|
||||
|
||||
@@ -81,6 +81,51 @@ console.log(person.hasOwnProperty("job")); // false
|
||||
|
||||
:::
|
||||
|
||||
- **`Object.hasOwn()` Method**: This is the modern, recommended way to check if an object has a property as its own (not inherited). The syntax is `Object.hasOwn(object, propertyName)`. It returns `true` if the property exists on the object and `false` if it does not — regardless of the property's value. This makes it safer than `hasOwnProperty()` and more reliable than `if (obj.prop)` when values can be `0`, `false`, `null`, or `undefined`.
|
||||
|
||||
:::interactive_editor
|
||||
|
||||
```js
|
||||
const person = {
|
||||
name: "Alice",
|
||||
age: 30
|
||||
};
|
||||
|
||||
console.log(Object.hasOwn(person, "name")); // true
|
||||
console.log(Object.hasOwn(person, "job")); // false
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
Here is a more detailed example showing why `Object.hasOwn()` is more reliable than checking the value directly:
|
||||
|
||||
:::interactive_editor
|
||||
|
||||
```js
|
||||
const settings = {
|
||||
darkMode: false,
|
||||
fontSize: 0,
|
||||
language: null
|
||||
};
|
||||
|
||||
// Object.hasOwn() correctly sees these properties exist
|
||||
console.log(Object.hasOwn(settings, "darkMode")); // true (value is false, but exists)
|
||||
console.log(Object.hasOwn(settings, "fontSize")); // true (value is 0, but exists)
|
||||
console.log(Object.hasOwn(settings, "theme")); // false (property was never added)
|
||||
|
||||
// Using if() directly is unsafe for falsy values!
|
||||
if (settings.darkMode) {
|
||||
console.log("Dark mode on"); // Does NOT print — misleading!
|
||||
}
|
||||
|
||||
// Object.hasOwn() is the safe way
|
||||
if (Object.hasOwn(settings, "darkMode")) {
|
||||
console.log("darkMode exists, value is:", settings.darkMode); // darkMode exists, value is: false
|
||||
}
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
- **`in` Operator**: This operator will return `true` if the property exists in the object.
|
||||
|
||||
:::interactive_editor
|
||||
|
||||
@@ -1206,6 +1206,46 @@ console.log(person.hasOwnProperty("job")); // false
|
||||
|
||||
:::
|
||||
|
||||
- **`Object.hasOwn()` Method**: This is the modern, recommended way to check if an object has a property as its own (not inherited). The syntax is `Object.hasOwn(object, propertyName)`. It returns `true` if the property exists on the object and `false` if it does not — regardless of what value the property holds. This makes it safer than checking `if (obj.prop)` when values can be `0`, `false`, `null`, or `undefined`.
|
||||
|
||||
:::interactive_editor
|
||||
|
||||
```js
|
||||
const person = {
|
||||
name: "Alice",
|
||||
age: 30
|
||||
};
|
||||
|
||||
console.log(Object.hasOwn(person, "name")); // true
|
||||
console.log(Object.hasOwn(person, "job")); // false
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
Using `Object.hasOwn()` inside an `if` statement before accessing a value prevents bugs:
|
||||
|
||||
:::interactive_editor
|
||||
|
||||
```js
|
||||
const cart = {
|
||||
item: "Headphones",
|
||||
quantity: 1,
|
||||
discount: 0
|
||||
};
|
||||
|
||||
// Safe: Object.hasOwn() checks existence, not value
|
||||
if (Object.hasOwn(cart, "discount")) {
|
||||
console.log("Discount value:", cart.discount); // Discount value: 0
|
||||
}
|
||||
|
||||
// Unsafe: if() misses the property because 0 is falsy
|
||||
if (cart.discount) {
|
||||
console.log("This will NOT print even though discount exists");
|
||||
}
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
- **`in` Operator**: This operator will return `true` if the property exists in the object.
|
||||
|
||||
:::interactive_editor
|
||||
|
||||
Reference in New Issue
Block a user