10 Essential JavaScript Utility Functions Every Developer Sh
AI Store에서 AI코딩으로 만들어진 앱을 만나보세요!
지금 바로 방문하기

모든 개발자가 알아야 할 10가지 유용한 JavaScript 유틸리티 함수

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

JavaScript 개발자, 특히 코드 효율성과 가독성 향상을 목표로 하는 중급 이상 개발자

핵심 요약

  • deepClone 함수를 사용하여 객체의 깊은 복사를 통해 원본 데이터의 불필요한 변형을 방지
  • debounce 패턴을 활용하여 이벤트 처리 시 성능 최적화 (예: resize 이벤트)
  • utils.js 파일로 유틸리티 함수를 모듈화하여 재사용성 향상 (예: import { debounce } from './utils.js')
  • Lodash 같은 라이브러리 활용을 통해 대규모 프로젝트에서 반복 코드 제거

섹션별 세부 요약

1. 객체의 깊은 복사

  • JSON.parse(JSON.stringify(obj))를 사용하여 중첩된 객체/배열 복사
  • 예시: deepClone({ a: 1, b: { c: 2 } })copy.b.c = 99 시 원본 original은 변함 없음

2. 숫자 포맷팅

  • toLocaleString()을 활용하여 천단위 콤마 추가 및 소수점 처리
  • 예시: formatNumber(1000000)"1,000,000"

3. 문자열 대문자 변환

  • capitalize("hello world")"Hello world"
  • str.charAt(0).toUpperCase() + str.slice(1) 조합 사용

4. 배열 평탄화

  • arr.flat(Infinity)로 다중 중첩 배열을 1차원 배열로 변환
  • 예시: flattenArray([1, [2, [3]]])[1, 2, 3]

5. 디바운스 (Debounce)

  • setTimeoutclearTimeout을 사용하여 이벤트 발생 후 일정 시간 지연 후 실행
  • 예시: window.addEventListener('resize', debounce(() => {...}, 500))

6. 랜덤 색상 생성

  • Math.random() + toString(16)을 사용하여 6자리 HEX 색상 코드 생성
  • 예시: randomColor()"#a3e12f"

7. 객체 비어 확인

  • Object.keys(obj).length === 0으로 빈 객체 검출
  • 예시: isEmpty({})true

8. 쿼리 문자열 파싱

  • URLSearchParamsObject.fromEntries로 쿼리 스트링을 객체로 변환
  • 예시: parseQueryString('?name=John&age=30'){ name: "John", age: "30" }

9. 클립보드 복사

  • navigator.clipboard.writeText()로 텍스트 복사 (HTTPS 및 사용자 상호작용 필수)
  • 예시: copyToClipboard("Hello, world!")

10. UUID 생성

  • crypto.randomUUID()로 고유 식별자 생성 (모던 브라우저 지원)
  • 예시: generateUUID()"6fd9f51c-8df3-4a7b-a1f7-3c72ec518d1a"

결론

  • 핵심 팁: Lodash 같은 유틸리티 라이브러리 사용을 통해 중복 코드 제거 및 유지보수성 향상
  • 모듈화: utils.js 파일로 유틸리티 함수를 집중 관리하여 재사용성 극대화
  • 성능 최적화: debouncethrottle 같은 패턴을 활용해 이벤트 처리 시 리소스 낭비 방지