2019-02-19(JavaScript Method Chaining)

메서드 체인(Method Chaining)

메서드 체이닝

메서드가 객체를 반환하게 되며느 메서드의 반환 값인 객체를 통해 또 다른 함수를 호출할 수 있습니다. 이러한 프로그래밍 패턴을 메서드 체이닝(Method Chaining) 이라 부른다.

객체 선언 및 생성

아래는 자바 스크립트 코드로 객체를 작성하였다.

var myObject = function() {
    this._name = "";
    this._age = 0;
    this._addr = "";
};
 
myObject.prototype.setName = function(name) {
    this._name = name;
};
 
myObject.prototype.setAge = function(age) {
    this._age = age;
};
 
myObject.prototype.setAddr = function(addr) {
    this._addr = addr;
};
 
myObject.prototype.getInfo = function() {
    console.log(this._name);
    console.log(this._age);
    console.log(this._addr);
};
 
//객체 값 지정 및 호출
var object = new myObject();
object.setName('홍길동');
object.setAge(26);
object.setAddr('홍길동 형님이라부르지못해오피스텔 101호');
object.getInfo();
 
/*
홍길동
26
홍길동 형님이라부르지못해오피스텔 101호
*/

자바스크립트 코드는 myObject 객체의 속성 및 함수를 선언하고, 값을 지정하여 메서드를 호출하는 형태로 되어 있습니다. 결과값은 아래와 같이 입력한 값들이 잘 나타납니다.

메서드 체이닝

메서드 체이닝은 객체에 값을 선언하고 호출하는 부분에서 이루어집니다.

var myObject = function() {
    this._name = "";
    this._age = 0;
    this._addr = "";
};
 
myObject.prototype.setName = function(name) {
    this._name = name;
    return this;
};
 
myObject.prototype.setAge = function(age) {
    this._age = age;
    return this;
};
 
myObject.prototype.setAddr = function(addr) {
    this._addr = addr;
    return this;
};
 
myObject.prototype.getInfo = function() {
    console.log(this._name);
    console.log(this._age);
    console.log(this._addr);
};
 
//객체 값 지정 및 호출
var object = new myObject();
object
    .setName('홍길동')
    .setAge(26)
    .setAddr('홍길동 형님이라부르지못해오피스텔 101호')
    .getInfo();
 
/*
홍길동
26
홍길동 형님이라부르지못해오피스텔 101호
*/

결과 값은 동일한 결과값이 나온다.

동일한 결과가 나오게 되는 이유는 객체의 반환값을 자기 자신으로 지정했기 때문이다.
object의 setName('홍길동')은 name을 홍길동으로 지정하고 object 객체 자신을 반환한다. 반환값인 object객체는 당연히 setAge(26) 함수를 실행할수 있다.

이런식으로 자기 자신을 반환하면서 다른 함수를 지속적으로 호출하는 릴레이 방식의 프로그래밍 패턴이 메서드 체이닝 이다. JQuery 라이브러리에서 매우 흔하게 볼수 있는 디자인 패턴이다.