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
이런 식으로 코드를 수정하면 메소드 체이닝이 잘 동작하는 것을 볼 수 있다.
'Programming > 자바스크립트' 카테고리의 다른 글
[자바스크립트] Math (0) | 2023.10.28 |
---|---|
[자바스크립트] callback 함수 (1) | 2023.10.28 |
[자바스크립트] 배열 - 메소드2 (1) | 2023.10.28 |
[자바스크립트] Date 메소드 (1) | 2023.10.28 |
[자바스크립트] Date 객체 생성 (0) | 2023.10.27 |