Objects in JavaScript

Objects in JavaScript are data structures that allow you to store collections of “key-value” pairs. Keys (also called properties) are strings (or symbols), and values can be any data type: numbers, strings, arrays, functions, other objects, etc. Objects are often used to store and organize data, and they are essential for working with the DOM, AJAX, and other APIs.

Creating Objects

let person = {
    firstName: "John",
    lastName: "Doe",
    age: 30,
    isStudent: false,
    greet: function() {
        console.log("Hello, my name is " + this.firstName);
    }
};

let person = new Object();
person.firstName = "John";
person.lastName = "Doe";
person.age = 30;
person.isStudent = false;
person.greet = function() {
    console.log("Hello, my name is " + this.firstName);
};

function Person(firstName, lastName, age, isStudent) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;
    this.isStudent = isStudent;
    this.greet = function() {
        console.log("Hello, my name is " + this.firstName);
    };
}

let person = new Person("John", "Doe", 30, false);

Accessing Object Properties

You can access object properties in two ways:

console.log(person.firstName); // "John"
console.log(person.age); // 30

console.log(person["firstName"]); // "John"
console.log(person["age"]); // 30

Bracket notation is useful when the property name is stored in a variable:

let key = "firstName";
console.log(person[key]); // "John"

Adding, Changing, and Deleting Properties

You can add new properties to an object or delete existing ones:

person.email = "john.doe@example.com";
console.log(person.email); // "john.doe@example.com"

delete person.age;
console.log(person.age); // undefined

'name' in user; // true

let person = {
    name: "Ivan",
    age: 30
};

// Changing the value of the "age" property
person.age = 31;

let person = {
    name: "Ivan",
    age: 30
};

// Changing the value of the property using a variable
let property = "name";
person[property] = "Petro";

Object Destructuring

Destructuring is a syntactic convenience in JavaScript that allows you to extract values from objects and arrays and assign them to variables in a single line of code. It makes the code more compact, readable, and expressive.

Basic Syntax of Object Destructuring:

const object = { key1: value1, key2: value2 };
const { key1, key2 } = object;

Example of Object Destructuring:

const person = {
  name: 'John Doe',
  age: 30,
  city: 'New York'
};

const { name, age } = person;

console.log(name);  // Outputs: John Doe
console.log(age);   // Outputs: 30

You can also rename variables during destructuring:

const person = {
  firstName: 'John',
  lastName: 'Doe'
};

const { firstName: name, lastName: surname } = person;

console.log(name);   // Outputs: John
console.log(surname); // Outputs: Doe

Object Methods

Methods are functions that are properties of an object. They can use this to access other properties of the object.

let person = {
    firstName: "John",
    lastName: "Doe",
    greet: function() {
        console.log("Hello, my name is " + this.firstName);
    }
};

person.greet(); // Outputs: "Hello, my name is John"

Default usage:

If a property is missing from an object, you can assign a default value:

const person = {
  name: 'John'
};

const { name, age = 25 } = person;

console.log(age);   // Outputs: 25

Destructuring also works with nested objects:

const user = {
  name: 'Alice',
  address: {
    city: 'London',
    street: 'Oxford Street'
  }
};

const { name, address: { city } } = user;

console.log(city);  // Outputs: London

You can use destructuring to unpack function arguments:

function greet({ name, age }) {
  console.log(`Hello, ${name}! You are ${age} years old.`);
}

const person = { name: 'Bob', age: 35 };
greet(person);

Object Methods this

this in a JavaScript object method is a special keyword that refers to the object itself, within which the method is invoked. In other words, it is the execution context of the function, which is the method of the object.

Example:

const person = {
    firstName: "Ivan",
    lastName: "Petrov",
    fullName() {
        return this.firstName + " " + this.lastName;
    }
};

console.log(person.fullName()); // Outputs: "Ivan Petrov"

How JavaScript Determines the Value of this?

It’s important to understand: the value of this can change depending on the execution context. Misunderstanding this can lead to errors in your code. this is a powerful tool for creating object-oriented code in JavaScript.

Additional nuances: this can be null or undefined in some cases, for example, when calling an arrow function in strict mode without an object. bind() is a method that allows you to fix the value of this for a function.

Iterating Over Object Properties

You can iterate over the properties of an object using the for...in loop:

for (let key in person) {
    console.log(key + ": " + person[key]);
}

This code will output all keys and their values from the person object.

Nested Objects

Objects can contain other objects:

let person = {
    firstName: "John",
    lastName: "Doe",
    address: {
        street: "123 Main St",
        city: "Anytown",
        country: "USA"
    }
};

console.log(person.address.city); // "Anytown"

Copying Objects

Copying objects can be tricky, as a simple assignment is not sufficient for deep copying.

let person = {
    firstName: "John",
    lastName: "Doe"
};

let personCopy = Object.assign({}, person);
console.log(personCopy); // { firstName: "John", lastName: "Doe" }

let person = {
    firstName: "John",
    lastName: "Doe",
    address: {
        street: "123 Main St",
        city: "Anytown"
    }
};

let personCopy = JSON.parse(JSON.stringify(person));
console.log(personCopy);
// { firstName: "John", lastName: "Doe", address: { street: "123 Main St", city: "Anytown" } }

The static method JSON.stringify() converts a JavaScript value to a JSON string, optionally replacing values if a replacement function is provided or including only specified properties if a replacement array is provided.

The static method JSON.parse() parses a JSON string to create a JavaScript value or object as described by the string. An optional reviver function can be provided to perform transformation on the resulting object before it is returned.

Static Methods of the Object Object

JavaScript provides several static methods for working with objects:

• Object.keys(obj) — returns an array of the object’s keys.
• Object.values(obj) — returns an array of the object’s values.
• Object.entries(obj) — returns an array of [key, value] pairs

let person = {
    firstName: "John",
    lastName: "Doe",
    age: 30
};

console.log(Object.keys(person)); // ["firstName", "lastName", "age"]
console.log(Object

.values(person)); // ["John", "Doe", 30]
console.log(Object.entries(person)); // [["firstName", "John"], ["lastName", "Doe"], ["age", 30]]

Examples of Iterating Over Objects with Explanations

Example 1. Iterating Over the Properties of an Object and Modifying Them

Task Description: Let’s say we have an object with user data. We want to:

1. Iterate over each property of the object (i.e., each key).
2. Check if the value of that property is a string.
3. If it is a string, make it uppercase (e.g., admin → ADMIN).
4. Save the changes back to the object.

Code with Detailed Explanations

// Creating a user object with various properties
const user = {
  name: "alice",
  role: "admin",
  age: 25,
  active: true
};

// Using a for...in loop to iterate over all the keys of the user object
for (let key in user) {
  // key will successively have values "name", "role", "age", "active"

  // Getting the value of the current property by its key
  let value = user[key];
  // For example, when key = "name", value = "alice"

  // Checking if the value is a string
  if (typeof value === "string") {
    // If so, replace the string with the same string in uppercase
    user[key] = value.toUpperCase();
    // For example, "alice" → "ALICE"
  }
}

// Outputting the result to check the changes
console.log(user);

Explanation

1. const user = { ... }; – We create the user variable and assign an object with properties:

• active (boolean value).
• name (string),
• role (string),
• age (number),

2. for (let key in user) { – Declaring a for...in loop that allows us to iterate over all the available keys (property names) of the object. The key variable will take the value of one of the object keys on each iteration (first name, then role, etc.).

3. let value = user[key]; – We create the value variable and assign the value of the user property with the key key. For example, when key is "name", value will be "alice".

4. if (typeof value === "string") { – We check if value is a string (string). We use the === comparison operator to check the data type.

5. user[key] = value.toUpperCase(); – If it is a string, we call the toUpperCase() method, which converts all letters to uppercase. Then we update the user[key] property with the new string. For example, "alice" becomes "ALICE".

6. console.log(user); – We output the result to the console to see if all the required changes have been made. The result will be an object where all string values are in uppercase.

Example 2. Iterating Over an Object Using Object.keys(), Object.values(), Object.entries()

Task Description: Now imagine we have an object product that contains product information. We want to:

1. Get a list of all the keys of the object.
2. Get a list of all the values.
3. Get a list of key-value pairs.
4. Output this information in a readable format.

Code with Detailed Explanations:

const product = {
  title: "Laptop",
  price: 1200,
  currency: "USD",
  inStock: true
};

// 1. Getting an array of all keys of the product object
const keys = Object.keys(product);
// keys -> ["title", "price", "currency", "inStock"]

// 2. Getting an array of all values of the product object
const values = Object.values(product);
// values -> ["Laptop", 1200, "USD", true]

// 3. Getting an array of [key, value] pairs
const entries = Object.entries(product);
// entries -> [["title", "Laptop"], ["price", 1200], ["currency", "USD"], ["inStock", true]]

// 4. Using for...of loop to iterate over entries array
for (let [key, value] of entries) {
  console.log(`Key: ${key}, Value: ${value}`);
}

Explanation of Each Line:

1. const product = { ... }; – We create the product variable and assign it an object containing product information:

• inStock – a boolean value indicating availability in stock.
• title – the name of the product,
• price – the price,
• currency – the currency,

2.const keys = Object.keys(product); – We call the built-in Object.keys() method, which returns an array of all the keys of the product object. We store the result in the keys variable.

3. const values = Object.values(product); – We call the Object.values() method, which returns an array of all the values of the product object.

4. const entries = Object.entries(product); – We call the Object.entries() method, which returns an array of pairs [key, value].

5. for (let [key, value] of entries) { ... } – We use the for...of loop to iterate over each element of the entries array. Since each element of the entries array is a small array with two elements [key, value], we use destructuring let [key, value] to extract key and value into variables directly.

6. console.log(`Key: ${key}, Value: ${value}`); – On each iteration, we log a string that shows the current key and its value.

As a result, in the console we will see:

Key: title, Value: Laptop
Key: price, Value: 1200
Key: currency, Value: USD
Key: inStock, Value: true

Note that you can iterate over objects in JavaScript in several ways:

for...in (iteration over object properties),

Object.keys() / Object.values() / Object.entries() (getting an array of keys/values/pairs),

for...of (iteration over array elements, if the object is an array or you use Object.entries()).

Always remember the data type you are working with (string, number, boolean, array, or object). Depending on it, different methods and approaches will apply.
When working with nested structures (for example, an array inside an object, an object inside an array, or even an object inside an object), make sure you consistently address the correct level of nesting (using dot notation or brackets []).

Functions in JavaScript Arrays and Objects: A Detailed Overview

In JavaScript, functions are first-class citizens, meaning they can:

let greet = function(name) {
    console.log(`Hello, ${name}!`);
};

function callFunction(func) {
    func();
}
callFunction(greet);

function createGreeter(greeting) {
    return function(name) {
        console.log(`${greeting}, ${name}!`);
    };
}

Functions in Objects: Methods

When a function is a property of an object, it is called a method. Methods allow objects to perform specific actions.

const person = {
    firstName: "Ivan",
    lastName: "Petrov",
    fullName: function() {
        return this.firstName + " " + this.lastName;
    }
};

console.log(person.fullName()); // Outputs: "Ivan Petrov"

this: Inside the method, this refers to the object itself. This allows the method to access other properties of the object.

Functions in Arrays: Array Methods

Arrays in JavaScript are objects, so they also have their own methods. Array methods allow you to perform various operations on array elements, such as adding, removing, searching, and sorting.

const numbers = [1, 2, 3, 4, 5];

// Adding an element to the end of the array
numbers.push(6);

// Removing the last element
numbers.pop();

// Sorting the array
numbers.sort();

// Checking if an element exists in the array
console.log(numbers.includes(3)); // Outputs: true

Functions as Elements in Arrays

Although arrays usually store primitive values or other objects, they can also store functions:

const functions = [
    function() { console.log("Function 1"); },
    function() { console.log("Function 2"); }
];

functions[0](); // Outputs: "Function 1"

Special Features of Using Functions in Arrays and Objects

• Execution Context (this): It’s important to understand how this works inside functions, especially in object methods.
• Binding Context: You can use bind(), call(), and apply() to manage the value of this.
• Arrow Functions: Arrow functions have special behavior with regard to this.
• Using this in Array Methods: Some array methods like map, filter, reduce accept functions as arguments. In these functions, this may refer to different objects depending on the context.

Why Arrow Functions Are Often Used with Array Methods?

Arrow functions are particularly useful with array methods due to lexical this.

this: In array methods passed as arguments, this typically refers to the global object. Arrow functions inherit this from the surrounding context, allowing them to use this from the object in which the array method is called. Conciseness: Arrow functions often make the code more readable and compact.

Conciseness: Arrow functions often make the code more readable and compact.

Array methods that use functions:

map: Creates a new array by applying a function to each element.

filter: Creates a new array, including only those elements for which the function returned true.

forEach: Executes a function for each array element.

find: Returns the first element for which the function returned true.