feat(curriculum): Add interactive examples to How to Check If an Object Has a Property (#63304)

Co-authored-by: Ilenia <26656284+ilenia-magoni@users.noreply.github.com>
This commit is contained in:
Clarence Bakosi
2025-10-30 11:49:35 +01:00
committed by GitHub
parent 4e3de7f781
commit de7ad9fa1c
@@ -5,7 +5,7 @@ challengeType: 19
dashedName: how-to-check-if-an-object-has-a-property
---
# --description--
# --interactive--
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.
@@ -13,6 +13,8 @@ We'll explore three common approaches: the `hasOwnProperty()` method, the `in` o
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:
:::interactive_editor
```js
const person = {
name: "Alice",
@@ -23,10 +25,14 @@ console.log(person.hasOwnProperty("name")); // true
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.
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
```js
const person = {
name: "Bob",
@@ -35,10 +41,14 @@ const person = {
console.log("name" in person); // true
```
:::
In this example, `"name" in person` returns `true` because `name` is a property of `person`.
The third method involves checking if a property is `undefined`. This approach can be useful, but it has some limitations. Here's an example:
:::interactive_editor
```js
const car = {
brand: "Toyota",
@@ -50,6 +60,8 @@ console.log(car.brand !== undefined); // true
console.log(car.color !== undefined); // false
```
:::
In this code, we check if `car.brand` and `car.color` are not `undefined`. This works because accessing a non-existent property on an object returns `undefined`. However, this method can give false negatives if a property explicitly has the value `undefined`.
In practice, the choice between these methods often depends on the specific requirements of your code. Understanding the differences between them will help you make the right choice in different scenarios.