용어 정리
side-effect (부작용) | 함수가 실행 중에 외부 상태를 변경하는 행위 (예: 콘솔 출력, 변수 수정, API 호출 등) |
pure function (순수 함수) | 입력 → 출력만 존재하고 외부 상태에 영향을 주지 않는 함수 (ex. map, filter 등에서 쓰는 콜백) |
예제
// 사이드 이펙트를 map에서 쓰는 경우 (비추)
callbacks
.filter(cb => typeof cb === 'function')
.map(cb => cb()); // <-- 여기에 사이드 이펙트가 있음
이 코드는 cb()가 어떤 부작용(API 호출, 로그 등)을 일으키는 상황인데, map은 원래 "값을 변환해서 새 배열을 만드는" 용도이기 때문에 이 부작용이 코드 흐름 속에서 잘 드러나지 않고 가독성이 떨어진다는 뜻이에요.
위의 예제를 forEach를 사용한다면
callbacks
.filter(cb => typeof cb === 'function')
.forEach(cb => cb());
forEach는 반환값이 undefined라 "나는 뭔가 하려고 실행만 하고 끝낼 거야" 라는 의도가 분명해짐
즉, "여기서 부작용(side-effect)이 발생합니다!" 라고 코드 자체가 말해주는 것처럼 보여서 좋다는 의견입니다.
https://ntgard.medium.com/foreach-is-for-side-effects-60fca9f78850
forEach is for side-effects
The array method forEach is wonderfully useful, but I see it used in instances where other array methods are a better fit. For those who…
ntgard.medium.com
'IT > web' 카테고리의 다른 글
[요약정리] 접근성 작업을 도와주는 ESLint plugin 개발기 / if(kakaoAI)2024 (0) | 2025.02.19 |
---|---|
[요약정리] 웹 성능 게이트 키퍼: 웹 성능 모니터링 서비스, '파루스' 의 기술과 활용 / if(kakaoAI)2024 (0) | 2025.02.19 |
[요약정리] 서비스 UX는 내가 직접 지킨다: 웹 이미지 뷰어 '포커스' 개발 및 적용기 / if(kakaoAI)2024 (0) | 2025.02.16 |
[web] tree-shaking 요약 (0) | 2024.10.27 |
[web] 사용되지 않는 자바스크립트 및 CSS 찾기 (0) | 2024.10.23 |