Trong bài viết này, chúng ta sẽ khám phá về function trong Javascript. Function, hay còn được gọi là hàm, là một phần quan trọng và được sử dụng rất nhiều trong việc lập trình Javascript.
Contents
- 1 1. Function trong Javascript là gì?
- 2 2. Một ví dụ về lợi ích của function trong Javascript
- 3 3. Cách tạo và gọi hàm trong Javascript
- 4 4. Giá trị mặc định của tham số
- 5 5. Cách tạo hàm arrow function trong Javascript
- 6 6. Một số ví dụ tạo hàm trong Javascript
- 7 7. Các hàm có sẵn trong Javascript là gì?
1. Function trong Javascript là gì?
Function, hoặc hàm, là một tập hợp các đoạn mã được sử dụng để thực hiện một tác vụ cụ thể. Mã trong hàm sẽ không được biên dịch cho tới khi nó được gọi. Điều này giúp chương trình trở nên linh hoạt hơn.
Ví dụ: Bạn đang xây dựng chức năng hiển thị danh sách sản phẩm cho trang chủ, trang chuyên mục,… và nhiều trang khác. Nếu bạn viết mã từ đầu cho mỗi trang, điều này sẽ mất rất nhiều thời gian. Thay vào đó, hãy tạo một function và gọi nó khi cần sử dụng.
2. Một ví dụ về lợi ích của function trong Javascript
Nếu chúng ta viết mỗi đoạn mã riêng lẻ và lặp lại chúng khi cần, thì nếu chúng ta cần xử lý vấn đề đó trong 1000 trường hợp, chúng ta sẽ phải viết lại 1000 lần. Điều này rất tốn thời gian. Chính vì vậy, người ta nghĩ ngay đến hàm. Hàm sẽ gom một số đoạn mã vào một khối xử lý và chỉ gọi khi cần.
Ví dụ: Giả sử chúng ta viết một chương trình kiểm tra số chẵn hay lẻ như sau:
function kiem_tra_so_chan_le(number) {
if (number % 2 === 0) {
console.log(number + " là số chẵn");
} else {
console.log(number + " là số lẻ");
}
}
Nếu chúng ta cần kiểm tra 100 số, việc viết đoạn mã trên 100 lần là không hiệu quả. Nhưng không cần lo lắng, khi sử dụng hàm trong Javascript, chúng ta chỉ cần gom chúng vào một thư viện và gọi khi cần.
3. Cách tạo và gọi hàm trong Javascript
3.1 Cách tạo hàm trong Javascript
Trước tiên, hãy xem cú pháp tạo hàm trong Javascript như thế nào:
function ten_ham(var1, var2, var3...) {
//Đoạn mã xử lý
}
Trong đó:
function
: là từ khóa trong Javascript và bắt buộc phải có.ten_ham
: là tên của hàm, thường sẽ chọn tên có ý nghĩa nhưtim_so_max
,tim_so_min
,…var1, var2, var3...
: là các tham số truyền vào hàm. Ví dụ, nếu bạn muốn viết hàm kiểm tra số chẵn hay lẻ, thì bạn sẽ có một tham số để kiểm tra số đó. Đương nhiên, bạn cũng có thể tạo hàm không có tham số.
Ví dụ:
function kiem_tra_so_chan_le(number) {
if (number % 2 === 0) {
console.log(number + " là số chẵn");
} else {
console.log(number + " là số lẻ");
}
}
3.2 Cách gọi hàm trong Javascript
Để gọi một hàm, bạn chỉ cần gọi đến tên của hàm và truyền các tham số cần thiết.
Ví dụ dưới đây là một ví dụ về việc gọi hàm kiem_tra_so_chan_le
và truyền giá trị cho tham số của hàm:
kiem_tra_so_chan_le(5);
kiem_tra_so_chan_le(10);
kiem_tra_so_chan_le(15);
Chúng ta đã tạo một hàm với tham số truyền vào có tên là number
. Khi sử dụng, nếu chúng ta truyền số 1 vào, biến number
trong hàm sẽ có giá trị là 1. Tương tự, nếu truyền 2, 3, 4, 5 vào, giá trị của biến number
sẽ tương ứng là 2, 3, 4, 5.
Lưu ý rằng trong Javascript, không tồn tại khái niệm con trỏ và tham chiếu trong hàm.
3.3 Hàm có return và hàm không có return
Hàm có return là hàm sử dụng từ khóa return
để trả kết quả về để sử dụng trong những đoạn mã bên ngoài. Ví dụ, nếu bạn cần viết một hàm tính tổng của hai số a và b, thì hàm này sẽ trả về tổng của hai số. Xem ví dụ sau:
function tinh_tong(a, b) {
return a + b;
}
Hàm không có return là hàm không sử dụng từ khóa return
trong hàm. Ví dụ, nếu bạn viết một chương trình in ra tổng của hai số a và b:
function in_tong(a, b) {
console.log(a + b);
}
Tùy vào mục đích sử dụng, bạn có thể sử dụng hoặc không sử dụng return
. Thông thường, chúng ta sử dụng return
để lấy kết quả và xử lý tiếp trong các đoạn mã khác.
4. Giá trị mặc định của tham số
Trong một số trường hợp, bạn muốn một tham số có thể được truyền hoặc không cần truyền vào. Javascript không hỗ trợ gán giá trị mặc định trực tiếp như PHP, thay vào đó, chúng ta sử dụng toán tử ||
.
Ví dụ: Hãy xem ví dụ về hàm hiển thị một thông báo:
function hien_thi_thong_bao(message) {
message = message || "Chào mừng đến với trang web!";
console.log(message);
}
Toán tử ||
bao gồm hai phần: nếu phần TRÁI có giá trị rỗng (undefined
, null
, false
,…), kết quả sẽ trả về phần PHẢI, ngược lại, nó sẽ trả về phần TRÁI.
5. Cách tạo hàm arrow function trong Javascript
Arrow function, hay còn được gọi là hàm mũi tên, là cách tạo hàm bằng cách sử dụng ký tự =>
. Cách này xuất hiện từ phiên bản ES6.
So sánh với cú pháp thông thường mà chúng ta đã học ở đầu bài, ta có:
//Cú pháp thông thường
function ten_ham(var1, var2, var3...) {
//Đoạn mã xử lý
}
//Arrow function
(ten_tham_so) => {
//Đoạn mã xử lý
}
Ví dụ: Viết hàm kiểm tra một số có chia hết cho 3 hay không bằng hai cách trên.
//Cách 1: Sử dụng hàm thông thường
function kiem_tra_chia_het_cho_3(number) {
if (number % 3 === 0) {
console.log(number + " chia hết cho 3");
} else {
console.log(number + " không chia hết cho 3");
}
}
//Cách 2: Sử dụng arrow function
(number) => {
if (number % 3 === 0) {
console.log(number + " chia hết cho 3");
} else {
console.log(number + " không chia hết cho 3");
}
}
6. Một số ví dụ tạo hàm trong Javascript
Ví dụ 1: Viết chương trình kiểm tra một năm có phải là năm nhuận hay không
Năm nhuận là năm chia hết cho 4, nếu chia hết cho 100 thì nó phải chia hết cho 400. Đây là định nghĩa năm nhuận, nhưng đây vẫn có thể không đúng 100% vì có một số trường hợp khác.
Ví dụ 2: Làm lại ví dụ trên và sử dụng return
để trả kết quả, nếu true
thì là năm nhuận, false
thì không phải năm nhuận.
Trong ví dụ này, thay vì alert
trực tiếp trong hàm, chúng ta sẽ trả về giá trị true/false
. Sau đó, chúng ta sẽ kiểm tra kết quả này để xác định xem năm đó có phải là năm nhuận hay không.
7. Các hàm có sẵn trong Javascript là gì?
Các hàm có sẵn trong Javascript là những hàm tích hợp sẵn trong trình biên dịch của Javascript. Bạn có thể gọi đến những hàm này ở bất cứ đâu trong chương trình.
Một ví dụ về danh sách các hàm có sẵn trong Javascript có thể tìm thấy tại đây
Lời kết: Qua bài viết này, bạn đã hiểu cách tạo và sử dụng hàm trong Javascript. Khi lập trình với Javascript, chúng ta phải sử dụng hàm rất nhiều, vì vậy cần phải nắm vững kiến thức này.