Top 10 JavaScript Helper Functions Bạn Nên Có Trong Mọi Dự Án

0 0 0

Người đăng: Hoài Long

Theo Viblo Asia

Không phải lúc nào cũng cần dùng thư viện to như Lodash, bạn hoàn toàn có thể viết một số helper nhỏ gọn để tăng tốc độ làm việc, giữ code sạch, và tránh lặp lại.

Dưới đây là 10 helper "must-have" trong mọi dự án JS – từ web đến Node.js.


1. debounce(fn, delay)

Giúp giới hạn số lần gọi hàm, thường dùng cho sự kiện scroll, resize, input.

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

2.throttle(fn, delay)

Giới hạn việc gọi hàm, nhưng đảm bảo gọi đều đặn (khác với debounce).

function throttle(fn, delay) { let last = 0; return (...args) => { const now = Date.now(); if (now - last >= delay) { last = now; fn(...args); } };
}

3. deepClone(obj)

Clone object sâu – tránh bị ảnh hưởng khi thay đổi dữ liệu gốc.

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

Lưu ý: Cách này không clone được hàm, Date, Map, Set.

4. isEmpty(obj)

Kiểm tra object hoặc array có rỗng không.

function isEmpty(val) { if (Array.isArray(val)) return val.length === 0; if (typeof val === 'object' && val !== null) return Object.keys(val).length === 0; return !val;
}

5. capitalize(str)

Viết hoa chữ cái đầu tiên.

function randomInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min;
}

6. randomInt(min, max)

Sinh số nguyên ngẫu nhiên trong khoảng[min, max].

function randomInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min;
}

7. groupBy(arr, key)

Nhóm các phần tử theo key.

function groupBy(arr, key) { return arr.reduce((acc, obj) => { const k = obj[key]; acc[k] = acc[k] || []; acc[k].push(obj); return acc; }, {});
}

8. formatDate(date, locale = 'vi-VN')

Định dạng ngày tháng dễ đọc.

function formatDate(date, locale = 'vi-VN') { return new Date(date).toLocaleDateString(locale);
}

9. delay(ms)

Tạo delay trong async/await.

function delay(ms) { return new Promise(resolve => setTimeout(resolve, ms));
}

10. unique(arr)

Lọc các phần tử không trùng lặp trong array.

function unique(arr) { return [...new Set(arr)];
}

Kết luận

Những helper trên tuy nhỏ, nhưng cực kỳ hữu dụng nếu bạn dùng thường xuyên. Thay vì code lại từ đầu, hãy chuẩn bị sẵn một file utils.js hoặc helpers.js và tái sử dụng cho mọi project.

Bình luận

Bài viết tương tự

- vừa được xem lúc

Blog#173: Introduction to Advanced JavaScript Concepts - Advanced JavaScript Part 1

Hi, I'm Tuan, a Full-stack Web Developer from Tokyo . JavaScript is an essential language for web development, and learning advanced concepts can significantly improve your programming skills.

0 0 24

- vừa được xem lúc

Blog#174: 🤔Understanding Asynchronous JavaScript: 🔄Callbacks, 🤞Promises, and 🤝Async/Await

Hi, I'm Tuan, a Full-stack Web Developer from Tokyo . 1. Introduction to Asynchronous JavaScript. What is Asynchronous JavaScript.

0 0 30

- vừa được xem lúc

Blog#175: 🧐Mastering JavaScript's Execution Context and Closures🚀

Hi, I'm Tuan, a Full-stack Web Developer from Tokyo . 1. Understanding Execution Context. A Quick Overview.

0 0 30

- vừa được xem lúc

Blog#177: 🤔MAYBE YOU DON'T KNOW - 👌Using Node-Postgres in Node.js Express✨

Hi, I'm Tuan, a Full-stack Web Developer from Tokyo . In this article, we'll walk you through a step-by-step guide on using node-postgres with Node.

0 0 36

- vừa được xem lúc

Blog#176: 💪The Power of JavaScript Functional Programming🚀

. The main goal of this article is to help you improve your English level. I will use Simple English to introduce to you the concepts related to software development.

0 0 28

- vừa được xem lúc

[Javascript] Nâng cấp kỹ thuật tạo Tham số trong Hàm JS

1. Khái niệm.

0 0 24