Các hàm (function) trong JavaScript

Hàm trong JS cũng giống như hàm trong PHP giúp chúng ta xây dựng một nhiệm vụ mà phải thường xuyên dùng lại hoặc khi nó rất phức tạp chúng ta muốn tạo và tách nó rồi để ở một file riêng và chỉ gọi đến khi cần. Kỹ năng viết hàm rất quan trọng, bởi vì sớm muộn bạn sẽ phải thực hiện viết các đoạn mã vài trăm dòng.

—

Hàm trong JavaScript là khối mã được thiết kế để thực hiện một nhiệm vụ cụ thể.

Một hàm JavaScript sẽ thực thi khi “cái gì đó” gọi nó.

Ví dụ:

function hamCuaToi(p1, p2) {
   return p1 * p2; // Hàm trả về kết quả của phép nhân p1 với p2
}

---

Cú pháp trong hàm JavaScript

Một hàm JavaScript được định nghĩa với từ khoá function, theo sau bằng tên hàm và cuối cùng là dấu ngoặc đơn ().

Tên hàm có thể bao gồm chữ cái, số, ký tự gạch dưới, và ký tự đô la ($) – các luật này giống với các biến trong JavaScript.

Dấu ngoặc đơn có thể bao gồm các tham số được phân cách bởi dấu phẩy:

(tham số 1, tham số 2, ...)

Các đoạn code được thực thi bởi hàm sẽ được đưa vào bên trong ngoặc nhọn:

{}

Cú pháp chung giống như thế này:

function tên_hàm (tham số 1, tham số 2, tham số 3) {code thực thi}

Tham số (parameters) của hàm là các tên được liệt kê trong định nghĩa hàm, ở trong dấu ngoặc đơn.

Đối số (arguments) của hàm là các giá trị thực nhận được khi hàm được gọi.

Bên trong hàm, các đối số được cư xử như các biến địa phương.

Một hàm cũng tương tự Thủ tục (procedure) hoặc Chương trình con (subroutine) trong các ngôn ngữ lập trình khác.

Đến phần này, bạn nào từng học PHP có thể thấy cấu trúc hàm, cách viết của JS rất giống với PHP.

---

Gọi hàm

Đoạn code bên trong hàm sẽ được thực thi khi “cái gì đó” gọi hàm:

• Khi một sự kiện xuất hiện (chẳng hạn khi người dùng click vào nút);
• Khi nó được gọi từ mã JavaScript;
• Tự động (tự gọi hàm);

---

Kết quả trả về trong Hàm

Khi JavaScript đi đến lệnh return, hàm sẽ ngừng không thực thi nữa.

Nếu hàm được gọi từ một lệnh, JavaScript sẽ “return” để thực thi code sau câu lệnh gọi.

Các hàm thường tính toán giá trị trả về (return value). Giá trị trả về là “trả lại / returned” trở lại với “người gọi / caller”:

Ví dụ:

Tình toán phép tính từ hai số sau và trả về kết quả:

var x = myFunction(4, 3);   // Hàm được gọi, giá trị trả về cuối cùng được gán cho x

function myFunction(a, b) {
    return a * b;// Hàm trả về giá trị của phép nhân a và b
}

Kết quả của x vì vậy sẽ là:

12

---

Tại sao dùng hàm?

Bạn có thể dùng lại mã đã thực hiện: Thao tác code một lần, và sử dụng nó bất cứ khi nào bạn muốn.

Bạn có thể dùng cùng một code nhiều lần với các đối số khác nhau để tạo ra các kết quả khác nhau.

Ví dụ:

Chuyển đổi nhiệt độ F sang độ C:

function toCelsius(fahrenheit) {
    return (5/9) * (fahrenheit-32);
}

document.getElementById("demo").innerHTML = toCelsius(77);

---

Toán tử () gọi hàm

Sử dụng ví dụ ở trên, toCelsius đề cập đến đối tượng hàm (function object), và toCelsius() đề cập đến kết quả của hàm (function result).

Ví dụ:

Truy cập một hàm không có () sẽ trả về định nghĩa của hàm chứ không phải kết quả:

function toCelsius(fahrenheit) {
     return (5/9) * (fahrenheit-32);
}
 document.getElementById("demo").innerHTML = toCelsius;

---

Sử dụng hàm như là biến

Các hàm có thể được dùng như các biến trong các công thức, bài tập và tính toán.

Ví dụ:

Bạn có thể sử dụng:

let text = "Nhiệt độ là " + toCelsius(77) + " độ C";

Thay cho:

let x = toCelsius(77);
let text = "Nhiệt độ là " + x + " độ C";

Bạn có thể thấy là nhờ coi hàm như là biến, bạn đỡ được một thao tác gán. Tuy nhiên không phải lúc nào làm thế cũng hay, đôi khi chúng ta muốn mã dễ nhìn, rõ ràng hơn thì việc gán biến vào hàm, rồi thao tác với biến đó cũng không phải là ý tưởng tệ.

Biến cục bộ

Biến được khai báo trong hàm là biến cục bộ (LOCAL), biến cục bộ chỉ có thể được truy cập từ bên trong hàm mà thôi.

Ví dụ:

// mã ở đây KHÔNG thể sử dụng biến carName để thao tác

function myFunction() {
  let carName = "Volvo";
  // mã ở đây nếu muốn có khả năng dùng biến carName để thao tác
}

// mã ở đây KHÔNG thể sử dụng biến carName để thao tác

Quy tắc biến cục bộ trong hàm của JS cũng rất giống với quy tắc của PHP.

Vì các biến cục bộ chỉ được ghi nhận ở bên trong hàm, các biến cùng tên có thể được sử dụng trong các hàm khác nhau.

Biến cục bộ được tạo khi hàm bắt đầu, và sẽ bị xóa khi hàm hoàn thành xong nhiệm vụ.