본 튜토리얼은 전 세계 사람들이 이용할 수 있는 오픈 소스 프로젝트입니다. 프로젝트 페이지에 방문하셔서 번역을 도와주세요.
구매EPUB/PDF
튜토리얼 지도
돌아가기

체이닝

중요도: 2

올라가기(up)와 내려가기(down) 메서드를 제공하는 객체 ladder가 있습니다.

let ladder = {
  step: 0,
  up() {
    this.step++;
  },
  down() {
    this.step--;
  },
  showStep: function() { // 사다리에서 몇 번째 단에 올라와 있는지 보여줌
    alert( this.step );
  }
};

메서드를 연이어 호출하고자 한다면 아래와 같이 코드를 작성할 수 있습니다.

ladder.up();
ladder.up();
ladder.down();
ladder.showStep(); // 1

up, down, showStep을 수정해 아래처럼 메서드 호출 체이닝이 가능하도록 해봅시다.

ladder.up().up().down().showStep(); // 1

참고로 이런 방식은 자바스크립트 라이브러리에서 널리 사용됩니다.

테스트 코드가 담긴 샌드박스를 열어 정답을 작성해보세요.

메서드를 호출할 때마다 객체 자신을 반환하게 하면 됩니다.

let ladder = {
  step: 0,
  up() {
    this.step++;
    return this;
  },
  down() {
    this.step--;
    return this;
  },
  showStep() {
    alert( this.step );
    return this;
  }
}

ladder.up().up().down().up().down().showStep(); // 1

체이닝이 길어질 땐 메서드 호출을 별도의 줄에 작성하면 가독성이 좋아집니다.

ladder
  .up()
  .up()
  .down()
  .up()
  .down()
  .showStep(); // 1

테스트 코드가 담긴 샌드박스를 열어 정답을 확인해보세요.