Kevin Powell - Community•2y ago

arrow function used within an object literal

why does arrow function cause an issue - this.make and this.model are undefined but "normal" function(){} when used, theres no issue of undefined properties in the object literal

let car = {
  make: 'bmw',
  model: '745li',
  year: 2020,
  getPrice: () => {
    //perform some calc
    return 5000;
  },
  printDescription: () =>
  {
    console.log(this.make, this.model) <- undefined with arrow functions
  }
};

let car = {
  make: 'bmw',
  model: '745li',
  year: 2020,
  getPrice: () => {
    //perform some calc
    return 5000;
  },
  printDescription: () =>
  {
    console.log(this.make, this.model) <- undefined with arrow functions
  }
};

21 Replies

Jochem•2y ago

this isn't bound to arrow functions https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions:

* Arrow functions don't have their own bindings to this, arguments, or super, and should not be used as methods.

interactive-harp•2y ago

doesnt it contain the lexical scope? but in that cause its getting this from the window?

Jochem•2y ago

this references Window, yeah but you shouldn't use arrow functions as methods You can however define them like this:

let car = {
  make: 'bmw',
  model: '745li',
  year: 2020,
  getPrice() {
    //perform some calc
    return 5000;
  },
  printDescription() {
    console.log(this.make, this.model)
  }
};

let car = {
  make: 'bmw',
  model: '745li',
  year: 2020,
  getPrice() {
    //perform some calc
    return 5000;
  },
  printDescription() {
    console.log(this.make, this.model)
  }
};

interactive-harp•2y ago

okay thanks didnt know arrow function has such drawbacks lol thank you good sir!

Jochem•2y ago

as always, glad to help 🙂

interactive-harp•2y ago

testing it out with another code i have but this.width is getting an undefined error at the geometry property

const floor = {
  width: 3,
  height: 3,
  textures: '',
  color: 0xFF0,
  geometry: new PlaneGeometry(this.width, this.height),
  material: new MeshBasicMaterial({ color: this.color }),
  floor: new Mesh( geometry, material ),
  createFloor: function()
  {
    console.log(this.width)
  }
}

const floor = {
  width: 3,
  height: 3,
  textures: '',
  color: 0xFF0,
  geometry: new PlaneGeometry(this.width, this.height),
  material: new MeshBasicMaterial({ color: this.color }),
  floor: new Mesh( geometry, material ),
  createFloor: function()
  {
    console.log(this.width)
  }
}

Jochem•2y ago

I know it doesn't work, I just don't know why you can use a getter instead, but you can't reference values of an object during its initialization like you are there. this.color would be undefined as well on the next line, and geometry and material on the one after ah, it doesn't work because to reference the object you're in through this it needs to be defined and initialized, and that's not done yet

interactive-harp•2y ago

isnt width: 3 defined and has a value?>

Jochem•2y ago

width is, floor isn't, and this would have to refer to floor someone else might be better able to explain why exactly, but it won't work like you have it there Here's the javascript.info article on getters and setters, you'll have to use a getter, which will have the added benefit of staying dynamic if you ever change width or height: https://javascript.info/property-accessors

interactive-harp•2y ago

okay thanks

Jochem•2y ago

if you do find out why it doesn't work, or if anyone else knows and wants to add it here, I'm definitely interested

interactive-harp•2y ago

sounds good searching chatgpt is confused, saying the variables arent within the floor object lol

The error message you're encountering, "width is undefined," is due to the fact that the width variable is not defined or accessible in the context of the object declaration.

In your code, the width and height variables are not defined within the floor object. To fix this issue, you need to either define width and height as separate variables before the floor object declaration or directly provide their values within the object.

Jochem•2y ago

the first sentence is correct though, it's not accessible in the context of the declaration

interactive-harp•2y ago

yes but wondering why this is what chatgpt gave me:

const floor = {
  width: 3,
  height: 3,
  textures: '',
  color: 0xFF0,
  // get createPlane(){
  //   new PlaneGeometry(this.width, this.heavy),
  //   new MeshBasicMaterial({ color: this.color })
  // },
   // Function to initialize object properties
   initialize: function() {
    this.geometry = new PlaneGeometry(this.width, this.height);
    this.material = new MeshBasicMaterial({ color: this.color });
    this.floor = new Mesh(this.geometry, this.material);
  }
  // geometry: new PlaneGeometry(this.width, this.height),
  // material: new MeshBasicMaterial({ color: this.color }),
  // floor: new Mesh( geometry, material ),
  // createFloor: function()
  // {
    // console.log(this.width)
  // }
}
floor.initialize();

works makes no sense, same as mine testing now

Jochem•2y ago

initialize doesn't run until the last line where you call it with floor.initialize(), so it's definitely different

interactive-harp•2y ago

const floor = { width: 3, height: 3, textures: '', color: 0xFF0, createPlane(){ new PlaneGeometry(this.width, this.height), new MeshBasicMaterial({ color: this.color }), console.log(this.width) }, } did that originally, now it works lol

Jochem•2y ago

yeah, because you're not referencing this during declaration, just inside methods which you call after

interactive-harp•2y ago

yes makes now, thanks because at the time of object initialization this refers to the window object not the floor object

const floor = {
  width: 3,
  height: 3,
  textures: '',
  color: 0xFF0,
  createPlane(){
    new PlaneGeometry(this.width, this.height),
    new MeshBasicMaterial({ color: this.color }),
    console.log(this.width)
  },
}

const floor = {
  width: 3,
  height: 3,
  textures: '',
  color: 0xFF0,
  createPlane(){
    new PlaneGeometry(this.width, this.height),
    new MeshBasicMaterial({ color: this.color }),
    console.log(this.width)
  },
}

this works floor gets placed into memory, then when floor.createPlane is called it gets the object and all its properties and etc

Jochem•2y ago

yes, exactly

interactive-harp•2y ago

perfect! now, its better to turn this into a class right? incase I need to make copies of this object literals arent a good approach to making copies?

Jochem•2y ago

probably yeah

Gaming

Programming

arrow function used within an object literal