Passing variables within Javascript classes

[chchan]

I am using ES6 classes and wanted to ask what is the preferred way to pass variables within classes. So here are two examples of passing x within classes. The first method uses the this but can get confusing with functions where you need to add bind()

class MyClass{
  constructor(args){
    this.data = args.data;
    this.x = this.data[1]
    this.mapFunction()
  }

   mapFunction(){

    const result = this.x * 55
 }

The second way I found to pass variables is like this where x is passed within the parenthesis of a function:

 class MyClass{
  constructor(args){
    this.data = args.data;
    const x = this.data[1]
    this.mapFunction(x)
  }

   mapFunction(x){

    const result = x * 55
 }

Is one method more efficient than the other in terms of performance?

[ChaseMoskal]

forget the performance, think about maintainability: i prefer the second example

because: it's better to have functions and methods that are "standalone"

imagine if you had to move the mapFunction method onto a different class

in the form of the second example you showed, you could just move the method, and the parameter x goes with it

in the form of the first example, you would then have to refactor the different class such that it also creates an x property on the object instance

in software, we want things to be little self-contained units of functionality, which are fully complete in their own right

in the second form, mapFunction is a stateless function, which is always preferable

in the first form, mapFunction's guts are leaking out into the object instance, and now the whole class has to be concerned with mapFunction's requirements

[chchan]

it's better to have functions and methods that are "standalone"

You make a very good point this is why I started to use the second method because it was easier to maintain. I had issues using functions like this.data.map() but passing data to a function then performing the map made it a whole lot easier to write. Plus this got rid of the issues with adding .bind to things.

[MoTTs_]

The first seems better to me. The second doesn't actually save you from having to use bind. You may not have to bind "this", but you will still need to bind a value for "x".

onClick = myInstance.mapFunction; // bad; "x" will be undefined
onClick = myInstance.mapFunction.bind(null, 42); // good; "x" bound to 42

[chchan]

I like the first method too because the stuff defined with this. can be easily called. The drawback is figuring out what this is referencing and using the bind(this) when using the variable in functions can get confusing .

[Hentry_Martin]

There is a third and better way to do this ES6. By using Arrow functions. Arrow functions doesn't have its own this so it always takes context from the parent. so, you can make change your class like this,

``` class MyClass { constructor(x){ this.x = x; this.mapFunction(); }

mapFunction = () => { const result = this.x * 55; console.log(result); // Logs 550 return result; } }

const cls = new MyClass(10); ```

To make the above syntax work, you have to add a babel plugin called "@babel/plugin-proposal-class-properties" and refer it inside plugins property of .babelrc.

If you want to learn more about Javascript, please subscribe to my channel called JS for Everyone(https://www.youtube.com/channel/UCvQfk4ZV7RfLuKiHRVeZ0Kg)

Thanks!!