Hàm là trái tim của JavaScript. Bài này trình bày hàm thường, hàm mũi tên, tham số mặc định và callback.
Bạn sẽ học được
- Viết hàm theo hai cách
- Dùng hàm mũi tên (arrow function)
- Dùng tham số mặc định, rest
- Hiểu hàm có thể truyền như giá trị (callback)
Thuật ngữ cần biết
- Hàm mũi tên
- Cách viết gọn:
(a, b) => a + b. - Callback
- Hàm được truyền vào hàm khác để gọi sau.
- Phạm vi (scope)
- Biến khai báo bằng let/const chỉ sống trong khối chứa nó.
- Closure
- Hàm nhớ được biến ở nơi nó được tạo ra.
Khai báo hàm
function chao(ten = "bạn") {
return `Xin chào ${ten}`;
}
console.log(chao("Lan"), chao());
const nhan = (a, b) => a * b;
const binhPhuong = x => x * x;
console.log(nhan(3, 4), binhPhuong(5));Tham số còn lại và spread
function tong(...so) {
return so.reduce((s, x) => s + x, 0);
}
console.log(tong(1, 2, 3, 4)); // 10
const a = [1, 2], b = [...a, 3, 4]; // [1,2,3,4]Callback
function lapLai(n, viec) {
for (let i = 0; i < n; i++) viec(i);
}
lapLai(3, i => console.log("Việc số", i));
setTimeout(() => console.log("Sau 1 giây"), 1000);Closure
function boDem() {
let dem = 0;
return () => ++dem;
}
const d = boDem();
console.log(d(), d(), d()); // 1 2 3Tình huống: Bộ lọc giá
Cửa hàng muốn lọc sản phẩm theo điều kiện thay đổi (dưới 200k, dưới 500k...). Hàm nhận điều kiện làm tham số giúp dùng lại:
const loc = (ds, dk) => ds.filter(dk);
console.log(loc([120, 340, 90], g => g < 200)); // [120, 90]Mẹo hay
Hàm một dòng ngắn dùng mũi tên; hàm dài, cần tên rõ ràng, dùng function.
Lưu ý
Hàm mũi tên không có this riêng; trong phương thức đối tượng cần cân nhắc.
Thực hành
- Viết hàm đảo ngược chuỗi.
- Viết hàm
demNguyenAm(chuoi). - Dùng
setIntervalin thời gian mỗi giây, dừng sau 5 lần.
Tóm tắt bài học
- Hàm có thể là giá trị: gán biến, truyền, trả về.
- Mũi tên viết gọn, tham số mặc định tiện lợi.
- Callback và closure là nền tảng của lập trình bất đồng bộ.