Working with Objects

Question 1

What is an object?

Answer 1

An object is a collection of related data and/or functionality. These usually consist of several variables and functions (which are called properties and methods when they are inside objects).

“Object basics” (MDN Web Docs). Retrieved November 13, 2023.

Question 2

How do you create an empty object?

Answer 2

with {}.

For example:

const person = {};

“Object basics” (MDN Web Docs). Retrieved November 13, 2023.

Question 3

How can access a property of an object?

Answer 3

With square brackets notation [] or with dot notation .

Example:

const person = {
  name: 'John';
};

person['name']; // 'John'
person.name; // 'John'

“Object basics” (MDN Web Docs). Retrieved November 13, 2023.

Question 4

How can you set the members of an object?

Answer 4

With the assignment operator =.

For example:

const person = {};
person['name'] = 'John';
person.surname = 'Doe';

“Bracket notation” (MDN Web Docs). Retrieved November 14, 2023.

Question 5

What are Object prototypes?

Answer 5

Prototypes are the mechanism by which JavaScript objects inherit features from one another.

“Object prototypes - Learn web development | MDN” (MDN Web Docs). Retrieved January 3, 2024.

Question 6

Explain the prototype chain

Answer 6

Every object in JavaScript has a built-in property, which is called its prototype. The prototype is itself an object, so the prototype will have its own prototype, making what’s called a prototype chain. The chain ends when we reach a prototype that has null for its own prototype.

When you try to access a property of an object: if the property can’t be found in the object itself, the prototype is searched for the property. If the property still can’t be found, then the prototype’s prototype is searched, and so on until either the property is found, or the end of the chain is reached, in which case undefined is returned.

Note: The property of an object that points to its prototype is not called prototype. Its name is not standard, but in practice all browsers use \_\_proto\_\_. The standard way to access an object’s prototype is the Object.getPrototypeOf() method.

“The prototype chain” (MDN Web Docs). Retrieved January 3, 2024.

Question 7

How can you get the prototype of an object?

Answer 7

We can use the function Object.getPrototypeOf() method:

const myObject = {
  city: "Madrid",
  greet() {
    console.log(`Greetings from ${this.city}`);
  },
};
Object.getPrototypeOf(myObject); // Object { }

“The prototype chain” (MDN Web Docs). Retrieved January 3, 2024.

Question 8

What is Object.prototype

Answer 8

Object.prototype is the most basic prototype, that all objects have by default. The prototype of Object.prototype is null, so it’s at the end of the prototype chain:

const myObject = {
  city: "Madrid",
  greet() {
    console.log(`Greetings from ${this.city}`);
  },
};
Object.getPrototypeOf(myObject); // Object { }

“The prototype chain” (MDN Web Docs). Retrieved January 3, 2024.

Question 9

Is the prototype of an object always Object.prototype?

Answer 9

No. The prototype of an object is not always Object.prototype. For example:

const myDate = new Date();
let object = myDate;

do {
  object = Object.getPrototypeOf(object);
  console.log(object);
} while (object);

// Date.prototype
// Object { }
// null

This code creates a Date object, then walks up the prototype chain, logging the prototypes. It shows us that the prototype of myDate is a Date.prototype object, and the prototype of that is Object.prototype.

In fact, when you call familiar methods, like myDate2.getMonth(), you are calling a method that’s defined on Date.prototype.

“The prototype chain” (MDN Web Docs). Retrieved January 4, 2024.

Question 10

What are shadow properties?

Answer 10

Shadow properties occur when you define a property in an object that shares the same name as another property defined in the object’s prototype? For example:

const myDate = new Date(1995, 11, 17);

console.log(myDate.getYear()); // 95

myDate.getYear = function () {
  console.log("something else!");
};

myDate.getYear(); // 'something else!'

When we call getYear() the browser first looks in myDate for a property with that name, and only checks the prototype if myDate does not define it. So when we add getYear() to myDate, then the version in myDate is called.

This is called “shadowing” the property.

“Shadowing properties” (MDN Web Docs). Retrieved January 4, 2024.

Question 11

How can you set an object’s prototype?

Answer 11

There are various ways of setting an object’s prototype in JavaScript the most common ones are using Object.create() and constructors

“Setting a prototype” (MDN Web Docs). Retrieved January 4, 2024.

Question 12

How can use Object.create() to create an object with a particular prototype?

Answer 12

The Object.create() method creates a new object and allows you to specify an object that will be used as the new object’s prototype.

Here’s an example:

const personPrototype = {
  greet() {
    console.log("hello!");
  },
};

const carl = Object.create(personPrototype);
carl.greet(); // hello!

Here we create an object personPrototype, which has a greet() method. We then use Object.create() to create a new object with personPrototype as its prototype. Now we can call greet() on the new object, and the prototype provides its implementation.

“Using Object.create” (MDN Web Docs). Retrieved January 4, 2024.

Question 13

How can you use a constructor to define the prototype of an object?

Answer 13

In JavaScript, all functions have a property named prototype. When you call a function as a constructor, this property is set as the prototype of the newly constructed object (by convention, in the property named \_\_proto\_\_).

So if we set the prototype of a constructor, we can ensure that all objects created with that constructor are given that prototype.

const personPrototype = {
  greet() {
    console.log(`hello, my name is ${this.name}!`);
  },
};

function Person(name) {
  this.name = name;
}

Object.assign(Person.prototype, personPrototype);
// or
// Person.prototype.greet = personPrototype.greet;

Here we create:

• an object personPrototype, which has a greet() method
• a Person() constructor function which initializes the name of the person to create.
• We then put the methods defined in personPrototype onto the Person function’s prototype property using Object.assign.

After this code, objects created using new Person(...) will get Person.prototype as their prototype, which automatically contains the greet method.

const reuben = new Person("Reuben");
reuben.greet(); // hello, my name is Reuben!

“Using a constructor” (MDN Web Docs). Retrieved January 4, 2024.

Question 14

What are own properties?

Answer 14

Properties that are defined directly in the object are called own properties. You can check whether a property is an own property using the static Object.hasOwn() method.

In other words, the ownership of properties is determined by whether the property belongs to the object directly and not to its prototype chain.

For example:

const personPrototype = {
  greet() {
    console.log(`hello, my name is ${this.name}!`);
  },
};

function Person(name) {
  this.name = name;
}

Object.assign(Person.prototype, personPrototype);

const irma = new Person("Irma");

console.log(Object.hasOwn(irma, "name")); // true
console.log(Object.hasOwn(irma, "greet")); // false

Note: You can also use the non-static Object.hasOwnProperty() method here, but it is recommend to use Object.hasOwn() if you can.

“Own properties” (MDN Web Docs). Retrieved January 5, 2024.

Question 15

What are enumerable properties?

Answer 15

Enumerable properties are those properties whose internal enumerable flag is set to true, which is the default for properties created via simple assignment or via a property initializer. Properties defined via Object.defineProperty and such are not enumerable by default. Most iteration means (such as for...in loops and Object.keys) only visit enumerable keys.

All properties, enumerable or not, string or symbol, own or inherited, can be accessed with dot notation or bracket notation.

“Enumerability and ownership of properties - JavaScript | MDN” (MDN Web Docs). Retrieved January 5, 2024.

Question 16

What’s the problem with changing an object’s prototype with Object.setPrototypeOf()?

Answer 16

It is very slow. Changing the [[Prototype]] of an object is, by the nature of how modern JavaScript engines optimize property accesses, currently a very slow operation in every browser and JavaScript engine. You can read more in JavaScript engine fundamentals: optimizing prototypes.

if you are concerned about performance, you should avoid setting the [[Prototype]] of an object. Instead, create a new object with the desired [[Prototype]] using Object.create().

“Object.setPrototypeOf() - JavaScript | MDN” (MDN Web Docs). Retrieved January 20, 2024.

Question 17

How can you avoid errors in encodeURI()?

Answer 17

encodeURI throws an error if the string passed is not well-formed. This can be avoided by using toWellFormed() to convert the string to a well-formed string first.

const illFormed = "https://example.com/search?q=\uD800";

try {
  encodeURI(illFormed);
} catch (e) {
  console.log(e); // URIError: URI malformed
}

console.log(encodeURI(illFormed.toWellFormed())); // "https://example.com/search?q=%EF%BF%BD"

“Avoiding errors in encodeURI()” (MDN Web Docs). Retrieved February 2, 2024.