feat(curriculum): add Object.hasOwn() to JS object property checking … (#66201)

This commit is contained in:
Balamurugan T
2026-03-03 23:22:21 +05:30
committed by GitHub
parent a391dc0664
commit c15bf70bed
3 changed files with 137 additions and 1 deletions

View File

@@ -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

View File

@@ -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

View File

@@ -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