💻 오늘의 코드 팁 — Tap으로 체이닝 중간에 디버깅하기

문제: 메서드 체이닝 중에 값을 어떻게 확인할까?

```javascript
// 배열을 변환하는데, 중간 값이 뭔지 알고 싶어
const result = [1, 2, 3]
.map(x => x * 2)
.filter(x => x > 3)
.map(x => x + 10);
// 각 단계에서 값이 뭔지 확인하려면? console.log를 중간에 넣으면 체이닝이 깨진다
```

해결: Tap 함수로 체이닝을 유지하면서 디버깅하기

```javascript
function tap(value, fn) {
fn(value);
return value; // 원본 값을 그대로 반환해서 체이닝 유지
}
// 사용
const result = [1, 2, 3]
.map(x => x * 2)
.tap(v => console.log('map 후:', v)) // [2, 4, 6]
.filter(x => x > 3)
.tap(v => console.log('filter 후:', v)) // [4, 6]
.map(x => x + 10)
.tap(v => console.log('최종:', v)); // [14, 16]
// 더 고급: 조건부 디버깅
function tapIf(value, condition, fn) {
if (condition(value)) {
fn(value);
}
return value;
}
const data = [10, 5, 20, 3]
.map(x => x * 2)
.tapIf(v => v.length > 2, x => console.log('큰 배열:', x)) // [20, 10, 40, 6]
.filter(x => x > 10);
```

왜 좋을까?

1. 체이닝 유지 — 중간에 값을 확인해도 흐름이 안 끊김
2. 개발 / 운영 분리 — tap을 한 줄만 지우면 배포 가능
3. 테스트에도 유용 — 단위 테스트에서 중간 상태 검증 가능
4. 함수형 스타일 — 순수 함수로만 구성
```javascript
// 실전 예제: API 응답 처리
fetch('/api/users')
.then(res => res.json())
.then(users => users.filter(u => u.active))
.tap(filtered => console.log(`활성 사용자 ${filtered.length}명`))
.then(users => users.map(u => ({ id: u.id, name: u.name })))
.tap(mapped => console.log('매핑 완료:', mapped))
.then(result => updateUI(result))
.catch(err => console.error(err));
```
공식 문서: [Lodash _.tap()](https://lodash.com/docs/#tap) | [ECMAScript 파이프라인 제안](https://tc39.es/proposal-pipeline-operator/)