Concise Declarative Function with ES6

Hi, there! Guys, I’m working on the Java Script curriculum, and I tried to play around with Concise Declarative Functions with ES6. Here I wrote two examples where I can’t understand the syntax:

Why I have different result calling so:

const person = {
  name : 'Smith',
  changeName(newName){
    "use strict";
     return this.name = newName;
  }
}

const {name,changeName} = person;

//console.log(name);  => //return name

//console.log(changeName('Mike'));  => //Does note display name
//console.log(person.changeName('Mike')); => //Display name
const calc = {
  a:2,
  b:4,
  
  //case ONE
  /*fun(){
    return this.a + this.b;
  }*/
  
  //case TWO
  fun(a,b){
    return a + b;
  }
  
}

const {a,b,fun} = calc;

//case ONE
//console.log(calc.fun());// result => 6
//console.log(fun());//result => NaN

//case TWO
//console.log(fun(10,20)); //result 30;
console.log(calc.fun(10,20)); //result 30;

Here’s the CodePen:

https://codepen.io/Dimitrii1/pen/VwLrOQY?editors=0012

const {name,changeName} = person;

changeName here is just a plain function, and this is not bound to person. It only gets bound when you use the dot in the call, i.e. person.changeName('Mike') or if you explicitly bind it with the .bind method on functions. What’s worse is that this will actually be bound to the global object unless you add "use strict"; at the top of your file. In short, always use strict unless 100% of your code is inside an ES6 class (where strict is always on)

YDKJS goes into a nice detailed explanation about all the gory and disgusting behaviors of this in javascript: https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/objects-classes/ch1.md

1 Like

Thanks. I should read and practice more with it.

Glad to help. I’m used to Python where just grabbing a reference to an instance method will bind it for you. So I’m always running into this behavior in JS, but with strict mode enabled, it will at least error out trying to access properties on this when the function is unbound (since it’s undefined, not global) rather than just return undefined.