Loạt bài JavaScript cơ bản · Bài 08/18 — Mục lục học tập

Hàm gom một công việc thành một tên có thể gọi lại. Thay vì chép công thức tính tiền ở nhiều nơi, bạn tạo một hàm nhận giá, số lượng và trả về tổng. Khi thay đổi công thức, chỉ cần sửa một chỗ.

Khai báo và gọi hàm

function calculateTotal(price, quantity) {
  return price * quantity;
}
const firstTotal = calculateTotal(50000, 3);
const secondTotal = calculateTotal(80000, 2);
console.log(firstTotal); // 150000
console.log(secondTotal); // 160000

price và quantity là tham số của hàm. Các giá trị 50000 và 3 khi gọi là đối số. Mỗi lần gọi có dữ liệu riêng. return trả kết quả về nơi gọi và kết thúc lượt thực thi hiện tại; các dòng phía sau return trong cùng nhánh không chạy.

return khác console.log

function showTotal(a, b) {
  console.log(a + b);
}
const result = showTotal(2, 3); // Console in 5
console.log(result); // undefined

showTotal chỉ in kết quả mà không trả lại giá trị. Khi muốn tiếp tục tính hoặc hiển thị ở nơi khác, hàm nên return kết quả. Có thể giữ phần tính toán tách khỏi phần cập nhật giao diện để dễ kiểm tra hơn.

Giá trị mặc định và kiểm tra sớm

function calculateFinalPrice(price, quantity = 1) {
  if (!Number.isFinite(price) || price < 0) {
    return null;
  }
  if (!Number.isInteger(quantity) || quantity <= 0) {
    return null;
  }
  return price * quantity;
}
console.log(calculateFinalPrice(50000)); // 50000
console.log(calculateFinalPrice(50000, 0)); // null

Giá trị mặc định được dùng khi đối số tương ứng bị thiếu hoặc là undefined. Nó không tự thay thế null hay 0. Ví dụ quy ước null là đầu vào không hợp lệ; người gọi cần kiểm tra trước khi dùng kết quả.

Arrow function

const double = (number) => number * 2;
const add = (a, b) => {
  const total = a + b;
  return total;
};
console.log(double(4)); // 8
console.log(add(3, 7)); // 10

Dạng một biểu thức trả lại kết quả ngầm định. Khi dùng khối ngoặc nhọn, phải viết return nếu cần giá trị trả về. Arrow function có khác biệt về this so với hàm thông thường; ở giai đoạn này, chỉ dùng cho các hàm tính toán hoặc callback đơn giản.

Bài tập và gợi ý

Viết hàm isEven nhận một số nguyên và trả true nếu số chẵn, false nếu số lẻ hoặc dữ liệu không phải số nguyên. Kiểm tra 4, 7, 2.5 và chuỗi “4”.

function isEven(value) {
  return Number.isInteger(value) && value % 2 === 0;
}
console.log(isEven(4)); // true
console.log(isEven(7)); // false
console.log(isEven(2.5)); // false
console.log(isEven("4")); // false

Ghi nhớ: đặt tên hàm theo việc nó làm, xác định đầu vào và đầu ra, tránh để một hàm vừa tính toán vừa làm quá nhiều thao tác không liên quan.