모든 개발자가 알아야 할 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)
setTimeout
과clearTimeout
을 사용하여 이벤트 발생 후 일정 시간 지연 후 실행- 예시:
window.addEventListener('resize', debounce(() => {...}, 500))
6. 랜덤 색상 생성
Math.random()
+toString(16)
을 사용하여 6자리 HEX 색상 코드 생성- 예시:
randomColor()
→"#a3e12f"
7. 객체 비어 확인
Object.keys(obj).length === 0
으로 빈 객체 검출- 예시:
isEmpty({})
→true
8. 쿼리 문자열 파싱
URLSearchParams
와Object.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
파일로 유틸리티 함수를 집중 관리하여 재사용성 극대화 - 성능 최적화:
debounce
및throttle
같은 패턴을 활용해 이벤트 처리 시 리소스 낭비 방지