How to call JavaScript object methods in one statement (Method Chaining)

Question

I made an object inside function. I want to call object methods in one statement.

(function(){
        s4 = function(getSection){
            var self = {
            name: function(getname){
                console.log("Name of the Student " +getname);
            },

            subject: function(getsub){
                console.log(" & Studying " +getsub);
            }

        }
     return self;   
        }
    })();

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Student Details</title>
</head>
<body>
  <div class="hello">
      <h1>Student Details</h1>
  </div>
    <script src="script.js"></script>
    <script>
        s4("5th").name("John"); //This works fine
        s4("5th").subject("Python"); //This works fine
        s4("5th").name("John").subject("Python"); //Shows error: SCRIPT5007: Unable to get property 'subject' of undefined or null reference


    </script>
</body>
</html>

When I call s4("5th").name("John").subject("Python"); Shows error:

SCRIPT5007: Unable to get property 'subject' of undefined or null reference

Please help me solve this issue. Thanks in advance.

@jeffcarey is correct. Name function is not returning any object, that's why you are getting null or undefined reference. — Mr. Noddy
– Mr. Noddy, Commented Oct 13, 2016 at 5:35

Ryan · Accepted Answer · 2016-10-13 05:40:11Z

2

In your methods, return the object. return this in name and subject. This is called method chaining and it works by returning an object.

(function() {
  s4 = function(getSection) {
    var self = {
      name: function(getname) {
        console.log("Name of the Student " + getname);
        return this;
      },
      subject: function(getsub) {
        console.log(" & Studying " + getsub);
        return this;
      }
    }
    return self;
  }
})();

s4("5th").name("John");
s4("5th").subject("Python");
s4("5th").name("John").subject("Python");

edited Oct 13, 2016 at 5:40

answered Oct 13, 2016 at 5:33

Ryan

14.7k9 gold badges68 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Paul · Accepted Answer · 2016-10-13 05:35:40Z

2

That is called method chaining and is normally achieved by making each function that doesn't return some other value, return this;:

name: function(getname){
    console.log("Name of the Student " +getname);
    return this;
},

subject: function(getsub){
    console.log(" & Studying " +getsub);
     return this;
}

Then s4("5th").name("John").subject("Python"); will work since name("John") returns the result of s4("5th").

answered Oct 13, 2016 at 5:35

Paul

142k28 gold badges285 silver badges272 bronze badges

1 Comment

G Naga Subrahmanyam Over a year ago

Can we concatenate both methods while calling method in a chain

Mr. Noddy · Accepted Answer · 2016-10-13 05:37:18Z

Your code should be

(function() {
  s4 = function(getSection) {
    var self = {
      name: function(getname) {
        console.log("Name of the Student " + getname);
        return this;
      },
      subject: function(getsub) {
        console.log(" & Studying " + getsub);
        return this;
      }
    }
    return self;
  }
})();
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Student Details</title>
</head>

<body>
  <div class="hello">
    <h1>Student Details</h1>
  </div>
  <script src="script.js"></script>
  <script>
    s4("5th").name("John"); //This works fine
    s4("5th").subject("Python"); //This works fine
    s4("5th").name("John").subject("Python"); //Shows error: SCRIPT5007: Unable to get property 'subject' of undefined or null reference
  </script>
</body>

</html>

And now you will not get error for calling function subject()

Cliff Zhu · Accepted Answer · 2016-10-13 06:11:38Z

-1

Your function

name: function(getname){
        console.log("Name of the Student " +getname);
    }

does not return this. Change it to:

name: function(getname){
        console.log("Name of the Student " +getname);
        return this;
    }

edited Oct 13, 2016 at 6:11

answered Oct 13, 2016 at 5:37

Cliff Zhu

244 bronze badges

Collectives™ on Stack Overflow

How to call JavaScript object methods in one statement (Method Chaining)

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related