chore: import upstream snapshot with attribution
i18n - Build Validation / Validate i18n Builds (24) (push) Has been cancelled
CI - Node.js / Lint (24) (push) Has been cancelled
CI - Node.js / Build (24) (push) Has been cancelled
CI - Node.js / Test (24) (push) Has been cancelled
CI - Node.js / Test - Upcoming Changes (24) (push) Has been cancelled
CI - Node.js / Test - i18n (italian, 24) (push) Has been cancelled
CI - Node.js / Test - i18n (portuguese, 24) (push) Has been cancelled
CD - Docker - GHCR Images / Build and Push Images (push) Has been cancelled
i18n - Build Validation / Validate i18n Builds (24) (push) Has been cancelled
CI - Node.js / Lint (24) (push) Has been cancelled
CI - Node.js / Build (24) (push) Has been cancelled
CI - Node.js / Test (24) (push) Has been cancelled
CI - Node.js / Test - Upcoming Changes (24) (push) Has been cancelled
CI - Node.js / Test - i18n (italian, 24) (push) Has been cancelled
CI - Node.js / Test - i18n (portuguese, 24) (push) Has been cancelled
CD - Docker - GHCR Images / Build and Push Images (push) Has been cancelled
This commit is contained in:
+288
@@ -0,0 +1,288 @@
|
||||
---
|
||||
id: 6723c77d1a44b8a7599277dd
|
||||
title: JavaScript Objects Review
|
||||
challengeType: 31
|
||||
dashedName: review-javascript-objects
|
||||
---
|
||||
|
||||
# --interactive--
|
||||
|
||||
## Object Basics
|
||||
|
||||
- **Definition**: An object is a data structure that is made up of properties. A property consists of a key and a value. To access data from an object you can use either dot notation or bracket notation.
|
||||
|
||||
:::interactive_editor
|
||||
|
||||
```js
|
||||
const person = {
|
||||
name: "Alice",
|
||||
age: 30,
|
||||
city: "New York"
|
||||
};
|
||||
|
||||
console.log(person.name); // Alice
|
||||
console.log(person["name"]); // Alice
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
To set a property of an existing object you can use either dot notation or bracket notation together with the assignment operator.
|
||||
|
||||
:::interactive_editor
|
||||
|
||||
```js
|
||||
const person = {
|
||||
name: "Alice",
|
||||
age: 30
|
||||
};
|
||||
|
||||
person.job = "Engineer"
|
||||
person["hobby"] = "Knitting"
|
||||
console.log(person); // {name: 'Alice', age: 30, job: 'Engineer', hobby: 'Knitting'}
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## Removing Properties From an Object
|
||||
|
||||
- **`delete` Operator**: This operator is used to remove a property from an object.
|
||||
|
||||
:::interactive_editor
|
||||
|
||||
```js
|
||||
const person = {
|
||||
name: "Alice",
|
||||
age: 30,
|
||||
job: "Engineer"
|
||||
};
|
||||
|
||||
delete person.job;
|
||||
|
||||
console.log(person.job); // undefined
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## Checking if an Object has a Property
|
||||
|
||||
- **`hasOwnProperty()` Method**: This method returns a boolean indicating whether the object has the specified property as its own property.
|
||||
|
||||
:::interactive_editor
|
||||
|
||||
```js
|
||||
const person = {
|
||||
name: "Alice",
|
||||
age: 30
|
||||
};
|
||||
|
||||
console.log(person.hasOwnProperty("name")); // true
|
||||
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
|
||||
|
||||
```js
|
||||
const person = {
|
||||
name: "Bob",
|
||||
age: 25
|
||||
};
|
||||
|
||||
console.log("name" in person); // true
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## Accessing Properties From Nested Objects
|
||||
|
||||
- **Accessing Data**: Accessing properties from nested objects involves using the dot notation or bracket notation, much like accessing properties from simple objects. However, you'll need to chain these accessors to drill down into the nested structure.
|
||||
|
||||
:::interactive_editor
|
||||
|
||||
```js
|
||||
const person = {
|
||||
name: "Alice",
|
||||
age: 30,
|
||||
contact: {
|
||||
email: "alice@example.com",
|
||||
phone: {
|
||||
home: "123-456-7890",
|
||||
work: "098-765-4321"
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
console.log(person.contact.phone.work); // "098-765-4321"
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## Primitive and Non Primitive Data Types
|
||||
|
||||
- **Primitive Data Types**: These data types include numbers, strings, booleans, `null`, `undefined`, and symbols. These types are called "primitive" because they represent single values and are not objects. Primitive values are immutable, which means once they are created, their value cannot be changed.
|
||||
- **Non Primitive Data Types**: In JavaScript, these are objects, which include regular objects, arrays, and functions. Unlike primitives, non-primitive types can hold multiple values as properties or elements.
|
||||
|
||||
## Object Methods
|
||||
|
||||
- **Definition**: Object methods are functions that are associated with an object. They are defined as properties of an object and can access and manipulate the object's data. The `this` keyword inside the method refers to the object itself, enabling access to its properties.
|
||||
|
||||
:::interactive_editor
|
||||
|
||||
```js
|
||||
const person = {
|
||||
name: "Bob",
|
||||
age: 30,
|
||||
sayHello: function() {
|
||||
return "Hello, my name is " + this.name;
|
||||
}
|
||||
};
|
||||
|
||||
console.log(person.sayHello()); // "Hello, my name is Bob"
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## Object Constructor
|
||||
|
||||
- **Definition**: In JavaScript, a constructor is a special type of function used to create and initialize objects. It is invoked with the `new` keyword and can initialize properties and methods on the newly created object. The `Object()` constructor creates a new empty object.
|
||||
|
||||
```js
|
||||
new Object()
|
||||
```
|
||||
|
||||
## Working with the Optional Chaining Operator (`?.`)
|
||||
|
||||
- **Definition**: This operator lets you safely access object properties or call methods without worrying whether they exist.
|
||||
|
||||
:::interactive_editor
|
||||
|
||||
```ts
|
||||
const user = {
|
||||
name: "John",
|
||||
profile: {
|
||||
email: "john@example.com",
|
||||
address: {
|
||||
street: "123 Main St",
|
||||
city: "Somewhere"
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
console.log(user.profile?.address?.street); // "123 Main St"
|
||||
console.log(user.profile?.phone?.number); // undefined
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## Object Destructuring
|
||||
|
||||
- **Definition**: Object destructuring allows you to extract values from objects and assign them to variables in a more concise and readable way.
|
||||
|
||||
:::interactive_editor
|
||||
|
||||
```js
|
||||
const person = { name: "Alice", age: 30, city: "New York" };
|
||||
|
||||
const { name, age } = person;
|
||||
|
||||
console.log(name); // Alice
|
||||
console.log(age); // 30
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## Working with JSON
|
||||
|
||||
- **Definition**: JSON stands for JavaScript Object Notation. It is a lightweight, text-based data format that is commonly used to exchange data between a server and a web application.
|
||||
|
||||
```js
|
||||
{
|
||||
"name": "Alice",
|
||||
"age": 30,
|
||||
"isStudent": false,
|
||||
"list of courses": ["Mathematics", "Physics", "Computer Science"]
|
||||
}
|
||||
```
|
||||
|
||||
- **`JSON.stringify()`**: This method is used to convert a JavaScript object into a JSON string. This is useful when you want to store or transmit data in a format that can be easily shared or transferred between systems.
|
||||
|
||||
:::interactive_editor
|
||||
|
||||
```js
|
||||
const user = {
|
||||
name: "John",
|
||||
age: 30,
|
||||
isAdmin: true
|
||||
};
|
||||
|
||||
const jsonString = JSON.stringify(user);
|
||||
console.log(jsonString); // '{"name":"John","age":30,"isAdmin":true}'
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
- **`JSON.parse()`**: This method converts a JSON string back into a JavaScript object. This is useful when you retrieve JSON data from a web server or localStorage and you need to manipulate the data in your application.
|
||||
|
||||
:::interactive_editor
|
||||
|
||||
```js
|
||||
const jsonString = '{"name":"John","age":30,"isAdmin":true}';
|
||||
const userObject = JSON.parse(jsonString);
|
||||
|
||||
// result: { name: 'John', age: 30, isAdmin: true }
|
||||
console.log(userObject);
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
# --assignment--
|
||||
|
||||
Review the JavaScript Objects topics and concepts.
|
||||
Reference in New Issue
Block a user