자바스크립트 실무 유틸 함수 시리즈

실제 개발 현장에서는 작은 유틸리티 함수 하나가 프로젝트 유지보수성과 개발 생산성을 크게 향상시킵니다. 자바스크립트 실무에서 자주 사용하는 핵심 유틸 함수들을 정리해보겠습니다.

이 시리즈는 초보자뿐 아니라 중급 개발자에게도 바로 도움이 될 수 있도록, 기본 사용법 + 고급 활용법까지 함께 다룹니다.

---

✅ 1. deepClone (깊은 복사)

📌 기본 버전

function deepClone(obj) {
  return JSON.parse(JSON.stringify(obj));
}

📌 한계

• undefined, function, Symbol 타입은 누락
• 순환 참조가 있는 경우 오류 발생

📌 개선된 버전 (lodash 스타일)

function deepClone(obj, hash = new WeakMap()) {
  if (Object(obj) !== obj) return obj;
  if (hash.has(obj)) return hash.get(obj);

  const result = Array.isArray(obj) ? [] : {};
  hash.set(obj, result);

  for (const key in obj) {
    result[key] = deepClone(obj[key], hash);
  }
  return result;
}

---

✅ 2. debounce (디바운스)

📌 입력 지연 처리

function debounce(fn, delay) {
  let timer;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}

📌 활용 예시

• 검색창 입력시 서버 요청 최적화
• 창 크기 조절 이벤트 처리

---

✅ 3. throttle (스로틀)

📌 주기적 호출 제한

function throttle(fn, limit) {
  let waiting = false;
  return function (...args) {
    if (!waiting) {
      fn.apply(this, args);
      waiting = true;
      setTimeout(() => waiting = false, limit);
    }
  };
}

📌 활용 예시

• 스크롤 이벤트 최적화
• 드래그 이벤트 제어

---

✅ 4. formatDate (날짜 포맷 변환)

📌 간단한 포맷 변환

function formatDate(date) {
  const d = new Date(date);
  const year = d.getFullYear();
  const month = String(d.getMonth() + 1).padStart(2, '0');
  const day = String(d.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
}

📌 고급 사용 예

• 사용자 지정 포맷 (YYYY/MM/DD, MM-DD-YYYY 등)

---

✅ 5. copyToClipboard (클립보드 복사)

📌 간단한 복사 기능

function copyToClipboard(text) {
  navigator.clipboard.writeText(text).then(() => {
    console.log('복사 완료');
  }).catch(err => {
    console.error('복사 실패', err);
  });
}

📌 활용 예시

• 링크 복사 버튼
• 초대 코드 복사 기능

---

✅ 결론

실무에서는 작은 작업 하나라도 반복적이면 유틸 함수를 활용해 관리하는 것이 개발 생산성을 높이는 핵심입니다. 위에 소개한 함수들은 프로젝트 초기 셋업에 기본 탑재해두면 유지보수가 훨씬 쉬워집니다.