JavaScript를 조금 다뤄봤다면,
“매번 똑같은 기능을 구현하느라 비효율적”이라는 생각을 해보셨을 겁니다.
이번 글에서는 실무에서 반복적으로 사용하는 자바스크립트 함수들을 엄선해 공유합니다.
복사해서 바로 써도 좋고, 구조를 바꿔 내 스타일로 써도 좋습니다!
1. 디바운스 함수 (Debounce)
“`javascript
function debounce(func, delay) {
let timeout;
return function (…args) {
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(this, args), delay);
};
}
“`
- 사용 예: 검색창 자동완성, 리사이즈 이벤트 최적화
- 호출 빈도를 줄여 성능 향상
2. 날짜 포맷 변환 함수
“`javascript
function formatDate(date) {
const d = new Date(date);
return ${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()};
}
“`
2025-06-06형식으로 날짜를 반환- 실무 보고서, 블로그 등에 자주 활용
3. 배열 중복 제거 함수
“`javascript
function uniqueArray(arr) {
return […new Set(arr)];
}
“`
- 배열 내 중복 요소를 제거
Set객체 활용한 가장 간결한 방식
4. 숫자 천 단위 콤마 넣기
“`javascript
function numberWithCommas(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, “,”);
}
“`
- 1000 → 1,000
- 쇼핑몰, 재무 데이터 등에서 자주 사용
5. 문자열 첫 글자 대문자 변환
“`javascript
function capitalize(str) {
return str.charAt(0).toUpperCase() + str.slice(1);
}
“`
hello→Hello- 폼 입력 후 처리, 제목 자동 생성 등 활용
6. 객체 깊은 복사 (Deep Clone)
“`javascript
function deepClone(obj) {
return JSON.parse(JSON.stringify(obj));
}
“`
⚠️ 단, 함수/순환참조가 있는 경우에는 lodash의
cloneDeep권장
7. 쿠키 저장 및 불러오기
“`javascript
function setCookie(name, value, days) {
const d = new Date();
d.setTime(d.getTime() + days 24 60 60 1000);
document.cookie = ${name}=${value};expires=${d.toUTCString()};path=/;
}
function getCookie(name) {
const match = document.cookie.match(new RegExp(name + ‘=([^;]+)’));
return match ? match[1] : null;
}
“`
- 로그인 유지, 사용자 설정 저장 등에 필수
8. 랜덤 문자열 생성기
“`javascript
function generateRandomString(length = 8) {
const chars = ‘ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789’;
return Array.from({ length }, () => chars[Math.floor(Math.random() * chars.length)]).join(”);
}
“`
🔐 토큰, 임시 ID, 쿠폰코드 생성 등에 유용
9. 이메일 유효성 검사
“`javascript
function validateEmail(email) {
const re = /\S+@\S+\.\S+/;
return re.test(email);
}
“`
- 폼 입력 검증 기본 중의 기본
10. 간단한 딜레이 함수 (async/await)
“`javascript
function delay(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
“`
“`javascript
await delay(1000); // 1초 대기
“`
🧩 테스트, 애니메이션 순차 실행 시 유용
마무리
위 함수들은 실무 중 가장 자주 쓰이는 패턴들로,
작업 속도를 높이고 코드 품질을 향상시키는 데 큰 도움이 됩니다.
직접 타이핑해 보면서 내 프로젝트에 맞게 커스터마이징해 보세요!
🔎 다음 포스팅 주제 추천
→ 31번: JavaScript 이벤트 핸들링 완벽 가이드
→ 13번: JavaScript 비동기 처리 쉽게 이해하기
참고자료
- https://developer.mozilla.org/ko/docs/Web/JavaScript
- https://lodash.com/