[자바스크립트] Method Chaining

Method Chaining 이란?

메소드 체이닝(Method Chaining)은 이름 그대로 Method를 연결하여 사용하는 것을 의미한다. 메소드가 실행 결과로 객체를 반환하게 되고 반환된 객체를 통해 또 다른 메소드를 호출할 수 있는 것이다.

 

배열과 객체를 많이 사용하신 분들이라면 이미 메소드 체이닝을 사용하고 있었을 것이다. 예를 들어, 문자열을 거꾸로 뒤집는 코드를 작성할 때 다음과 같이 작성 할 수 있다.

// 문자열 뒤집기
const str = "JavaScript");

const strReverse = str.split('').reverse().join('');
console.log(strReverse); //tpircSavaJ

 

위의 문자열 뒤집는 부분의 동작과정은 다음과 같다.

• split('') : 문자열을 한 문자(구분자가 ''이므로)로 쪼개 새로운 배열에 담아 반환
• 배열이 반환 되었으므로 배열의 메소드 사용 가능
• reverse() : 배열의 순서를 뒤집은 기존의 배열 반환(mutation)
• 배열이 반환 되었으므로 배열의 메소드 사용 가능
• join('') : 배열을 구분자('')를 이용하여 합친 문자열을 반환
• 최종적으로 strReverse 변수에 기존의 문자열을 거꾸로 뒤집은 새로운 문자열이 할당

 

위의 과정에서 알 수 있듯이, 메소드 체이닝을 사용할 때 주의할 점으로는 메소드가 어떤 타입의 객체 값을 반환하는 지를 알고 있어야 한다. (배열을 리턴했는데 배열 객체가 가지고 있지 않은 메소드는 사용할 수 없기 때문!!)

 

 

 

Method Chaining 사용하기

프로그래밍을 하다보면 자바스크립트에서 제공하는 객체가 아닌 사용자가 정의한 객체를 사용하는 순간도 많다. 아래의 코드는 사용자가 정의한 객체이다.

// person 객체 생성

function Person() {
    this.name = '';
    this.age = 0;
    this.city = '';

    this.setName = function(name) {
        this.name = name;
    }
    
    this.setAge = function(age) {
        this.age = age;
    }
    
    this.setCity = function(city) {
        this.city = city;
    }
    
    this.printInfo = function(name) {
        console.log(this.name);
        console.log(this.age);
        console.log(this.city);
    }
}

const person = Person()

 

위의 예제에서 person 객체의 프로퍼티를 지정하기 위해서는 다음과 같이 작성하여야 한다.

person.setAge(26)
person.setName('kim')
person.setCity('Seoul')

person.printInfo();
// kim
// 26
// Seoul

 

하나의 프로퍼티를 지정해줄 때 마다 person 객체를 호출해야 하는 번거로움이 생기는 것이다. 이럴 때 메소드 체이닝을 이용하면 어떻게 될까?

person.setAge(26).setName('kim').setCity('Seoul').printInfo();
// Uncaught TypeError : Cannot read property 'setName' of undefined

 

에러가 뜬다!! 에러를 살펴보면 undefined의 setName 프로퍼티는 읽을 수 없다라고 되어 있다. 이러한 에러를 띄운 이유는 setAge 메소드가 반환값을 가지고 있기 때문이다!! 즉 setAge 메소드 호출 결과의 반환값은 undefined가 되고 이 것을 통해 setName이라는 프로퍼티에 접근하였기 때문에 위의 에러를 띄우는 것이다.

 

이를 해결하기 위해서는 person의 메소드를 해당 객체를 반환하는 메소드로 만들어주면 된다.

function Person() {
    this.name = '';
    this.age = 0;
    this.city = '';

    this.setName = function(name) {
        this.name = name;
        return this;
    }
    
    this.setAge = function(age) {
        this.age = age;
        return this;
    }
    
    this.setCity = function(city) {
        this.city = city;
        return this;
    }
    
    this.printInfo = function(name) {
        console.log(this.name);
        console.log(this.age);
        console.log(this.city);
    }
}

const person = Person()
person.setAge(26).setName('kim').setCity('Seoul').printInfo();
// kim
// 26
// Seoul

 

이런 식으로 코드를 수정하면 메소드 체이닝이 잘 동작하는 것을 볼 수 있다.