💻 Dev

🛠️ 처음부터 만드는 Once — 함수를 단 한 번만 실행하기

# Once — 함수를 단 한 번만 실행하기
어떤 함수는 처음 호출할 때만 실행되고, 그 이후로는 같은 결과를 반환해야 합니다.
예를 들어 초기화 함수, 이벤트 리스너, 또는 비용이 큰 작업이 그렇습니다.
```javascript
// 목표: 함수를 한 번만 실행하고, 그 다음부터는 캐시된 결과를 반환
function once(fn) {
let called = false;
let result;

return function(...args) {
if (!called) {
result = fn.apply(this, args);
called = true;
}
return result;
};
}
// 사용 예제
const initialize = once(() => {
console.log('초기화 실행!');
return 'initialized';
});
initialize(); // "초기화 실행!" → 'initialized'
initialize(); // (아무것도 출력 안 됨) → 'initialized'
initialize(); // (아무것도 출력 안 됨) → 'initialized'
```

개선: 컨텍스트 유지


클래스 메서드를 래핑할 때는 `this` 바인딩이 중요합니다:
```javascript
class UserManager {
constructor() {
this.isInit = false;
}

init = once(() => {
console.log(`${this.name} 초기화됨`);
this.isInit = true;
});
}
const user = new UserManager();
user.init(); // 초기화됨
```

실전 팁


1. 에러 처리: 첫 호출에서 에러 발생 시 재시도 가능하게 하려면 `called` 플래그를 유지하지 않기
2. 메모리: 클로저가 result를 캐시하므로 큰 객체의 경우 메모리 누수 주의
3. 라이브러리: Lodash의 `_.once()`, Underscore의 `_.once()`도 동일 구현

실전 예제


```javascript
// API 초기화
const setupAPI = once(async () => {
const res = await fetch('/api/config');
return res.json();
});
// 이벤트 한 번만 처리
button.addEventListener('click', once(() => {
analytics.track('first_click');
}));
```
💬 0
👁 0 views

Comments (0)

💬

No comments yet.

Be the first to comment!