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

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

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

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

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

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

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

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

const person = {
  name: "Alice",
  age: 30,
  contact: {
    email: "[email protected]",
    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

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.

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

const user = {
  name: "John",
  profile: {
    email: "[email protected]",
    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

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.

{
  "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

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

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.