Confusion about Object.create() vs Object Literals

I am currently completing the front-end web development course offered by Meta.

I am confused with the usage of Object.create() and Object Literals. Let's use the following code for the reference:

let bird = {
  hasWings: true,
  canFly: true,
  hasFeathers: true
};

let eagle = bird;
console.log("Eagle can fly: ", eagle.canFly); //"Eagle can fly: " true
eagle.canFly = false;
console.log("Eagle can fly: ", eagle.canFly); // "Eagle can fly: " false

let penguin = Object.create(bird);
penguin.canFly = false;
console.log("Penguin can fly: ", penguin.canFly); //"Penguin can fly: " false

If I can achieve the same results by simply using the object literals like in case of eagle, then what difference does using Object.create()` make in the case of penguin?

I tried to take help from ChatGPT, but it was confusing.

Using your code, I could rewrite something like this:

let bird = {
  hasWings: true,
  canFly: true,
  hasFeathers: true
};

let eagle = bird;
console.log("Eagle can fly: ", eagle.canFly); //"Eagle can fly: " true
eagle.canFly = false;
console.log("Eagle can fly: ", eagle.canFly); // "Eagle can fly: " false

// but you changed BIRD also!!!
console.log("Bird can fly: ", bird.canFly); // Bird cannot fly :(
bird.canFly = true;
console.log("Bird can fly: ", bird.canFly); // Bird can fly again :)
// but you changed EAGLE again!
console.log("Eagle can fly: ", eagle.canFly); // Eagle can fly again, even if you set false before

To avoid those problems, Object.create() will give you a new object without any references from other objects.

let eagle = Object.create(bird);

Something like that.

I believe there are a lot of details that we need to explain here, so let us start one by one.

The Object.create by definition creates an another object and sets its prototype to the object that you have passed as the first argument.

Essentially in your case when you created the penguin object, you retrieved an empty object and set its prototype to the bird object.
Try logging the penguin object and take a look at its properties, you will be much surprised.

This is a mechanism that Javascript uses in order to manage inheritance called prototype chaining.

As you can see the Object.create method is not as straight forward as it seems and I would encourage you to read more about it on the following links.

Object.create

Object prototypes

The difference between using Object Literals and the Object.create method is that they are used to achieve different results in a very fundamental level.

Additionally, keep in mind that when you are assigning the bird object directly to the eagle, you are not storing its value, but its actual reference.

Both the bird, and the eagle variables are pointing out to the same object in memory and that is why changing a property in one of the objects will be reflected in the other one. Now essentially if you want to store a fresh copy of the bird object in the eagle variable I would suggest using the following method:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

let bird = {
  hasWings: true,
  canFly: true,
  hasFeathers: true
};

let eagle = {...bird};

<!-- end snippet -->

Doing this, will let you have two independent objects and modifying the values in one object will not affect the other.

Okay, there is a lot missing here.

1. To fully appreciate Object.create, you must understand prototypal inheritance
2. When you do something like let eagle = bird, you are not creating a new object, eagle. You are just creating a new reference, eagle, that is pointing to the bird object

From your code, I see that you are trying to do the following:

1. Create a generic bird
2. Create an eagle, which is a type of bird
3. Create a penguin, which is a type of bird

You want eagles and penguins to 'inherit' the properties of birds.

1. Create a generic bird using an object literal

   let bird = {
       hasWings: true,
       canFly: true,
       hasFeathers: true
   };
   

2. Create an eagle

   let eagle = Object.create(bird)
   

By using object.create, you are setting the prototype of eagle to be bird.
Try this in the console:

Object.getPrototypeOf(eagle) === bird

It will evaluate to true.

Now, when you call eagle.canFly, the JavaScript runtime will check if the eagle object has a canFly property. It does not. So it'll move up the prototype chain and check bird. bird does have the canFly property, and its set to true. Hence eagle.canFly will evaluate to true.

Honestly, there's a lot to fix here. I actually wrote a series on prototypal inheritance. I recommend going though it:

Part 1 - Understanding the Prototype Chain

Part 2 - Prototypal Inheritance with Object.create

Part 3 - Prototypal Inheritance with Constructor Functions