How would I share the parameters between these 2 functions?

Question

const a = {
  method1: function(param) {
    this.param = param;
    $('span[data-count]').text('This is a parameter ' + param);
  },
  test: 10
}
var b = Object.create(a);
b.method2 = function(param) {
  this.param = param;
  $('.span2[data-count]').text('This is an another parameter ' + b.param);
}

b.method1('Orange');
b.method2('Blue');

    <span data-count></span><br>
    <span data-count class="span2"></span>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">https://stackoverflow.com/questions/ask#</script>

CodePen

I have an object called a which is a prototype of an another object called b. When these are executed, Each results are going to show up different tags span and .span2.

My goal is to share the method1's parameter to method2 without if statement. I would like to assume method1's parameter on the screen when if method2 has no parameter. So the result would be like;

This is a parameter Orange // method1's result
This is an another parameter Orange // method2's result

If method2 has its own parameter:

This is a parameter Orange // method1's result
This is an another parameter Blue // method2's result

I've tried several ways to get any kinds of clues but no progress at all.

Is there any ways to do this?

Let me see if I understand - you want to call `b.method1("Orange")` which will produce `This is a parameter Orange` and then if you call `b.method2()` it should result in `This is an another parameter Orange` because you didn't supply a parameter, so it's using the one passed to `method1`. However, calling `b.method2("Blue")` should still result in `This is an another parameter Blue` because it has a parameter. Is this right? — VLAZ, Mar 01 '19 at 18:04

Callam · Accepted Answer · 2019-03-01T19:05:44.950

Here's how it can be done with a class

const foo = new class {
  method1(param) {
    $(`span[data-count]`).text(`This is a parameter ${this.param = param}`)
  }
  
  method2(param = this.param) {
    $(`.span2[data-count]`).text(`This is an another parameter ${this.param = param}`)
  }
}

foo.method1('Orange');
foo.method2();

<span data-count></span><br>
<span data-count class="span2"></span>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

And so using your approach, we give method2 a default value of this.param

const a = {
  method1: function(param) {
    this.param = param;
    $('span[data-count]').text('This is a parameter ' + param);
  },
  test: 10
}

var b = Object.create(a);
b.method2 = function(param = this.param) {
  this.param = param;
  $('.span2[data-count]').text('This is an another parameter ' + b.param);
}

b.method1('Orange');
b.method2();

<span data-count></span><br>
<span data-count class="span2"></span>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Thank you for crystal clear answer. But could you explain me what is `class` in the first example? — l3lue, Mar 01 '19 at 18:28
Since you're using the class only once you might as well make it an [anonymous/unnamed class](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes#Class_expressions). — 3limin4t0r, Mar 01 '19 at 18:43

score 1 · Answer 2 · answered Mar 01 '19 at 18:28

You cam easily get what you want without using if statements. You can use the logical OR to provide a fallback if no parameter was passed in. The fallback would be this.param which is set when either method is called, so the other one would still use the same value.

const a = {
  method1: function(param) {
    param = param || this.param; //provide a fallback if `param` is falsey
    this.param = param;
    $('span[data-count]').text('This is a parameter ' + param);
  },
  test: 10
}
var b = Object.create(a);
b.method2 = function(param) {
  param = param || this.param; //provide a fallback if `param` is falsey
  this.param = param;
  $('.span2[data-count]').text('This is an another parameter ' + b.param);
}

b.method1('Orange');
b.method2(); //nothing passed in

<span data-count></span><br>
    <span data-count class="span2"></span>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">https://stackoverflow.com/questions/ask#</script>

Note that this will provide fallback for any falsey value. So if you want to intentionally pass null, undefined, "" (empty string), or 0 you'd get the fallback.

How would I share the parameters between these 2 functions?

2 Answers2