오늘 면접에서 promise에 대한 설명에 이어서 메소드 체이닝에 대한 질문을 했었다. 질문을 받았을떄는 뭔지 몰라서 대답을 하지 못했다. 면접끝나고 나서 해당 내용을 검색해보았을때 평소 현업에서도 잘 쓰고 있었던 패턴이었다.
메서드 chaining
사슬에 이어진 고리처럼 함수를 호출할때 객체를 반환하면, 객체안에 있는 메서드를 줄줄이 이어서 호출을 할수 있는 패턴을 말한다.
사용 예시
- 배열 Chaining
위에서 언급했던 메서드 체이닝은 아니지만, 배열 또는 문자열에서도 체이닝 기법을 사용하는 경우를 볼수있다.
아래 소스 소스는 BASE_ARR배열을map을 통해 2배씩 곱한 배열 결과를 리턴한다음. 4로나누었을떄 0인 결과만을 가져오는filter를 실행한후 내림차순으로 정렬하는 결과를 보여주는 코드다. 이처럼 배열에서도 체이닝이 일어나는것을 알 수 있다.
const BASE_ARR = [1,2,3,4,5,6,7,8,9];
BASE_ARR.map(n=> n*2).filter(n=> n%4 === 0).sort((a,b)=> b-a);//[16, 12, 8, 4]- Promise 체이닝
Promise안에 비동기 소스 실행 후resolve()메소드를 호출시, 그다음 호출되는then함수는 promise객체를 리턴하기때문에 체이닝 패턴으로 호출 하는것이 가능하다.
new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve('call1!')
},10);
})
.then(str=> `${str} call2!`)
.then(str=>`${str} call3!`)
.then(str=> console.log(str));
//call! call2! call3!메소드 체이닝 직접 작성해보기
간단한 계산기 객체를 만들어 보았다. 체이닝 패턴을 적용하기전에는 연산들을 줄마다 따로따로 작성을 해야하는것을 알수있다.
const calc ={
originNum:0,
setNum(num){
this.originNum = num;
},
addNum(num){
this.originNum += num;
},
substractNum(num){
this.originNum -= num;
},
multiplyNum(num){
this.originNum *= num;
},
divideNum(num){
this.originNum /= num;
}
}
calc.setNum(10);
calc.addNum(5);
calc.substractNum(2);
calc.multiplyNum(6);
calc.divideNum(4);
console.log(calc.originNum);그 다음 체이닝 패턴을 적용해서 작성해보자. 위에서 함수 호출시에 객체를 리턴하면 리턴한 객체안에 있는 함수들을 자유자재로 호출 할수있다고 설명했다. 이 때, 각 함수마다 calc 객체를 가리키는 this를 리턴하면, 체이닝 패턴을 이용해 줄줄이 연산을 할 수 있다.
const calc ={
originNum:0,
setNum(num){
this.originNum = num;
return this;
},
addNum(num){
this.originNum += num;
return this;
},
substractNum(num){
this.originNum -= num;
return this;
},
multiplyNum(num){
this.originNum *= num;
return this;
},
divideNum(num){
this.originNum /= num;
return this;
}
}
calc.setNum(10).addNum(5).substractNum(2).multiplyNum(6).divideNum(4);
console.log(calc.originNum);
