Question 184412 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – 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.

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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:

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

let eagle = {...bird};

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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search