[JS Basics] Hàm trong JavaScript: Khái niệm, cách khai báo và ví dụ chi tiết

Nếu coi JavaScript là một ngôn ngữ để giao tiếp với máy tính, thì Hàm (Functions) chính là những động từ, những hành động cốt lõi tạo nên sự sống động và mạnh mẽ cho ngôn ngữ đó. Từ những cú click chuột đơn giản đến các thuật toán phức tạp, tất cả đều được xây dựng từ những viên gạch nền tảng này.

Bài viết này sẽ cùng bạn đi từ những khái niệm cơ bản nhất đến những kỹ thuật nâng cao, giúp bạn thực sự làm chủ các hàm trong JavaScript.

1. Hàm là gì? Một ví dụ đời thường

Hãy tưởng tượng bạn có một chiếc máy xay sinh tố.

• Đầu vào (Input): Bạn cho vào trái cây, sữa, đá (đây là các tham số - parameters).
• Quy trình xử lý: Bạn bấm nút, máy sẽ xay nhuyễn mọi thứ theo một cơ chế đã được lập trình sẵn (đây là thân hàm - function body).
• Kết quả (Output): Bạn nhận được một ly sinh tố thơm ngon (đây là giá trị trả về - return value).

Trong JavaScript, hàm là một khối mã được đặt tên, được thiết kế để thực hiện một công việc cụ thể và có thể tái sử dụng nhiều lần. Giống như chiếc máy xay, bạn chỉ cần "gọi" tên nó và cung cấp "nguyên liệu" (dữ liệu), nó sẽ thực hiện công việc và trả về kết quả.

Tại sao phải dùng hàm?

• Tái sử dụng (DRY - Don't Repeat Yourself): Viết một lần, dùng mãi mãi. Thay vì lặp đi lặp lại cùng một đoạn mã, bạn chỉ cần gọi hàm.
• Tổ chức & Module hóa: Chia một chương trình lớn, phức tạp thành các hàm nhỏ hơn, mỗi hàm đảm nhiệm một nhiệm vụ duy nhất. Điều này giúp mã nguồn trở nên cực kỳ dễ đọc, dễ quản lý và dễ gỡ lỗi.
• Trừu tượng hóa (Abstraction): Bạn không cần biết chiếc máy xay hoạt động bên trong thế nào, chỉ cần biết cách sử dụng nó. Tương tự, bạn có thể sử dụng một hàm mà không cần quan tâm đến logic phức tạp bên trong nó.

2. Phân tích một hàm trong JavaScript

Một hàm cơ bản trong JavaScript có cấu trúc như sau:

// Cú pháp
function functionName(param1, param2) {
  // Các dòng lệnh để thực thi
  // ...
  return result // Không bắt buộc
}

Hãy mổ xẻ từng phần:

• function: Từ khóa bắt buộc để JavaScript biết bạn đang định nghĩa một hàm.
• functionName: Tên mà bạn đặt cho hàm. Tên này nên mang tính gợi nhớ, mô tả rõ ràng chức năng của hàm (ví dụ: calculateSum, getUserInfo).
• (param1, param2): Danh sách các "biến giữ chỗ" cho dữ liệu đầu vào. Chúng được gọi là tham số (parameters).
• { ... }: Cặp dấu ngoặc nhọn bao bọc toàn bộ mã lệnh sẽ được thực thi khi hàm được gọi. Đây là thân hàm (function body).
• return: Từ khóa để chỉ định giá trị mà hàm sẽ trả về sau khi thực hiện xong. Nếu không có return, hàm sẽ mặc định trả về undefined.

Ví dụ thực tế: Một hàm tính tổng hai số.

// 1. Định nghĩa hàm
function calculateSum(a, b) {
  const sum = a + b
  return sum
}

// 2. Gọi hàm và sử dụng kết quả
let result = calculateSum(5, 10) // `5` và `10` là các đối số (arguments)
console.log(result) // Kết quả in ra: 15

let anotherResult = calculateSum(100, -50)
console.log(anotherResult) // Kết quả in ra: 50

Lưu ý quan trọng: Parameter là tên biến được liệt kê trong phần định nghĩa hàm. Argument là giá trị thực tế được truyền vào hàm khi nó được gọi.

3. Các cách "tạo ra" một hàm

Trong JavaScript, có nhiều cách để khai báo một hàm. Ba cách phổ biến nhất là:

a. Function Declaration (Hàm khai báo)

Đây là cách cổ điển và phổ biến nhất.

function greetMorning(name) {
  return `Chào buổi sáng, ${name}!`
}

• Đặc điểm nổi bật: Hàm được "Hoisting" (nâng lên). Nghĩa là JavaScript sẽ "biết" về sự tồn tại của hàm này trước khi thực thi bất kỳ dòng mã nào. Do đó, bạn có thể gọi hàm trước khi định nghĩa nó.

b. Function Expression (Biểu thức hàm)

Ở đây, hàm được gán cho một biến, giống như gán một giá trị (số, chuỗi,...).

const greetEvening = function (name) {
  return `Chào buổi tối, ${name}!`
} // Lưu ý có dấu chấm phẩy ở cuối

• Đặc điểm nổi bật: Hàm không được "Hoisting". Bạn phải định nghĩa nó trước khi có thể gọi. Cách này rất linh hoạt, cho phép bạn truyền hàm như một đối số cho một hàm khác (xem phần Callback dưới đây).

c. Arrow Function (Hàm mũi tên - ES6+)

Đây là cú pháp hiện đại, ngắn gọn và mạnh mẽ được giới thiệu trong ES6.

const calculateRectangleArea = (length, width) => {
  return length * width
}

// Cú pháp còn có thể ngắn gọn hơn nữa!
// Nếu hàm chỉ có 1 dòng lệnh return, có thể bỏ {} và return
const calculateSquare = (number) => number * number

console.log(calculateSquare(9)) // Kết quả: 81

• Đặc điểm nổi bật: Cú pháp ngắn gọn, dễ đọc. Một khác biệt quan trọng nữa là cách nó xử lý từ khóa this, giúp giải quyết nhiều vấn đề nhức nhối trong JavaScript cổ điển.

4. Những khái niệm nâng cao cần nắm vững

Khi đã quen với những điều cơ bản, hãy nâng tầm kỹ năng của bạn với các khái niệm sau:

a. Higher-Order Functions (Hàm bậc cao)

Đây là những hàm "siêu đẳng" có thể nhận một hàm khác làm đối số hoặc trả về một hàm. Đây là một khái niệm cực kỳ mạnh mẽ.

Các phương thức xử lý mảng như .map(), .filter(), .reduce() chính là những ví dụ điển hình.

const numbers = [1, 2, 3, 4, 5]

// .map() là một Higher-Order Function.
// Nó nhận một hàm (arrow function `num => num * 2`) làm đối số.
const doubledNumbers = numbers.map((num) => num * 2)

console.log(doubledNumbers) // Kết quả: [2, 4, 6, 8, 10]

b. Callback Functions (Hàm gọi lại)

Đây chính là hàm được "truyền vào" như một đối số cho một hàm bậc cao. Nó được gọi là "callback" vì nó sẽ được hàm bậc cao đó "gọi lại" (execute) tại một thời điểm thích hợp.

Hãy tưởng tượng bạn đặt pizza và đưa cho cửa hàng số điện thoại của bạn. Số điện thoại đó chính là callback. Cửa hàng (hàm bậc cao) sẽ dùng nó để gọi lại cho bạn khi pizza đã sẵn sàng.

function placeOrder(dish, notifyFunction) {
  console.log(`Đang chuẩn bị món: ${dish}...`)
  // Giả lập thời gian chờ 3 giây
  setTimeout(function () {
    // Sau 3 giây, "gọi lại" hàm thông báo
    notifyFunction(dish)
  }, 3000)
}

function notifySuccess(dish) {
  console.log(`Món ${dish} của bạn đã sẵn sàng!`)
}

// "notifySuccess" chính là một callback function
placeOrder('Pizza', notifySuccess)

c. Scope (Phạm vi)

Hàm tạo ra một phạm vi riêng của nó (local scope). Các biến được khai báo bên trong một hàm chỉ có thể được truy cập từ bên trong hàm đó. Điều này giúp tránh xung đột tên biến giữa các phần khác nhau của chương trình.

let globalVar = 'Tôi ở bên ngoài'

function myFunction() {
  let localVar = 'Tôi ở bên trong'
  console.log(globalVar) // OK, có thể truy cập
  console.log(localVar) // OK, có thể truy cập
}

myFunction()

console.log(localVar) // Lỗi! Uncaught ReferenceError: localVar is not defined

Kết luận: Hàm là triết lý để xây dựng phần mềm

Hàm không đơn thuần chỉ là một tính năng của JavaScript; chúng là triết lý, là phương pháp để xây dựng phần mềm một cách có cấu trúc, hiệu quả và dễ bảo trì. Việc hiểu sâu và sử dụng thành thạo các loại hàm sẽ mở ra cho bạn một cánh cửa hoàn toàn mới để viết mã sạch hơn, thông minh hơn và mạnh mẽ hơn.

Trước khi kết thúc, gửi tới bạn những "lời khuyên vàng" khi viết hàm:

1. Tên hàm phải rõ nghĩa: calculateTotalPrice tốt hơn ngàn lần so với calc().
2. Một hàm, một nhiệm vụ: Mỗi hàm chỉ nên làm một việc duy nhất và làm thật tốt. Đừng tạo ra một hàm "Thụy Sĩ" đa năng nhưng phức tạp.
3. Giữ hàm ngắn gọn: Nếu một hàm dài hơn 20-25 dòng, hãy cân nhắc tách nó thành các hàm con nhỏ hơn.
4. Bình luận khi cần thiết: Viết bình luận để giải thích logic phức tạp (cái "tại sao"), chứ không phải để mô tả những gì mã đang làm (cái "gì").

Hãy bắt đầu thực hành ngay hôm nay. Viết một hàm tính giai thừa, một hàm kiểm tra số nguyên tố, hay một hàm sắp xếp mảng. Càng thực hành nhiều, bạn sẽ càng thấy được vẻ đẹp và sức mạnh vô tận của Functions trong JavaScript.