Bài 7: Hàm trong javascript

Ở cách phần trước chúng ta đã được tìm hiểu qua các khái niệm và cách sử dụng các câu lệnh rẽ nhánh, và vòng lặp Bài hôm nay chúng ta sẽ tiếp tục đi tìm hiểu khái niệm hàm và cách sử dụng hàm trong javascript.

1, Hàm là gì?

-Hàm là một hoặc nhiều đoạn mã được viết ra để thực thi một hoặc nhiều hành động khi gọi nó, hàm có khả năng gọi đi gọi lại được. VD như thay vì tính tích của 2 số nhất định chúng ta có thể sử dụng hàm để tính tích của 2 số bất kỳ mà chúng ta muốn.

2, Cấu trúc của hàm.

-Hàm trong javascript khai báo cũng giống như trong javascript, là bắt đầu phải có từ khóa function với các dạng như sau:

Hàm cơ bản

-Đây là dạng cơ bản nhất của hàm trong javascript, có cú pháp như sau:

function funName() {
	//code
}

Trong đó: funName là tên của hàm mà các bạn muốn đặt còn function là từ khóa bắt buộc.

VD: Tạo hàm lấy tên website.

function getWebsite() {
    document.write('http://toidicode.com');
}

Hàm có tham số truyền vào

-Đây là một dạng hàm rất hay được sử dụng trong dự án.

Cú pháp:

function funName(param_1, ..., pram_n) {
	//code
}

Trong đó:

• funName là tên của hàm các bạn muốn đặt.
• param_1,…,pram_n là các tham số mà các bạn muốn truyền vào hàm(không giới hạn số lượng).

VD: Tạo hàm tính tổng của 2 số bất kì.

function getSum(a, b) {
	document.write('Tổng: ' + (a + b));
}

Hàm có tham số mặc định

-Đây thực ra là dạng hàm có truyền tham số và đồng thời xét luôn giá trị mặc định cho các tham số đó.

Cú pháp:

function funName(param_1 = value_1, ..., pram_n = value_2) {
	//code
}

Trong đó:

• funName là tên của hàm các bạn muốn đặt.
• param_1,…,pram_n là các tham số mà các bạn muốn truyền vào hàm(không giới hạn số lượng).
• value_1,…,value_n là các giá trị tương ứng với các pram.

VD: với hàm getSum ở trên mình sẽ xét tham số mặc định cho nó.

function getSum(a = 1, b = 2) {
	document.write('Tổng: ' + (a + b));
}

Hàm có giá trị trả về và không

-Trong javascript có hai loại hàm,đó là hàm có giá trị trả về và hàm không có giá trị trả về.

• Đối với hàm có giá trị trả về thì phải sử dụng từ khóa return
• Và ngược lại đối với hàm không có giá trị trả về thì không có từ khóa return.

VD: khai báo hàm getSum ở trên là hàm có giá trị trả về.

function getSum(a = 1, b = 2) {
	return a + b;
}

3, Gọi hàm.

-Sau khi đã tạo được hàm thì giờ các bạn chỉ cần gọi hàm thôi.

Hàm cơ bản

-Để gọi hàm này các bạn sử dụng cú pháp:

funName();

Trong đó: funName là tên của hàm các bạn muốn gọi.

VD: Gọi hàm getWebsite ở trên.

getWebsite();

Xem Kết Quả

Hàm có tham số truyền vào

-Để gọi dạng hàm này thì các bạn cũng dùng cú pháp như hàm cơ bản, nhưng đồng thời các bạn truyền thêm các param vào theo cú pháp:

funName(param_1, ..., param_n);

VD: Ta sẽ gọi hàm getSum ở trên.

getSum(5, 6);

Xem Kết Quả

Hàm có tham số mặc định

-Để gọi dạng hàm này chúng ta có thể sử dụng cách gọi hàm cơ bản nếu không muốn truyền tham số, và cách gọi hàm có tham số truyền vào nếu muốn truyền tham số cho hàm.

VD: Mình sẽ gọi hàm getSum theo 2 cách.

getSum();
//tạo khoảng ngăn cách cho các bạn dễ nhìn
document.write('
__________________________________
');
getSum(4, 5);

Xem Kết Quả

Hàm có giá trị trả về và không

-Hàm này thì các bạn gọi như các ví dụ trên nhé.

VD: Mình sẽ gọi hàm getSum ở trên.

var kq1 = getSum();
//in kết quả hàm trả về
document.write(kq1);
//tạo khoảng ngăn cách cho các bạn dễ nhìn
document.write('
__________________________________
');
var kq2 = getSum(4, 5);
//in kết quả hàm trả về
document.write(kq2);

Xem Kết Quả

4, Các ràng buộc của tên hàm.

-Javascript cũng giống như các ngôn ngữ khác nó cũng có các ràng buộc về tên hàm sau đây:

• Tên hàm phải được bắt đầu bằng chữ cái (a-z,A-Z) hoặc ký tự _.
• Tên hàm không được bắt đầu bằng số, các ký tự khác ký tự _.

5, Lời kết.

-Như vậy phần này mình đã giới thiệu với các bạn về hàm trong javascript rồi, phần tiếp theo mình sẽ giới thiệu với bạn các hàm xuất ra notification(thông báo) trên trình duyệt trong javascript.