Cách sử dụng hàm (Function) trong JavaScript

1) Hàm là gì?

– Hàm là một tập hợp gồm nhiều câu lệnh, các câu lệnh này được sắp xếp theo một thứ tự xác định để xây dựng thành một chức năng cụ thể

– Mỗi hàm sẽ có một cái tên và hàm chỉ thực thi khi nó được gọi đến tên.

Ví dụ

Trong kịch bản bên dưới, chúng ta có một hàm tên là GioiThieu.

Hàm này gồm ba câu lệnh với chức năng là hiển thị một câu giới thiệu về bản thân.

– Một hàm có thể được gọi nhiều lần (hay nói cách khác là không giới hạn số lần gọi hàm).

Ví dụ

Trong kịch bản bên dưới, hàm GioiThieu được gọi đến ba lần

2) Phân loại hàm

– Hàm được chia làm hai loại cơ bản: hàm không có tham số & hàm có tham số

– Hàm không có tham số là hàm mà kết quả thực thi của nó luôn luôn không thay đổi.

Ví dụ

Hàm GioiThieu bên dưới là một hàm không có tham số

Kết quả thực thi của nó luôn là hiển thị dòng chữ “Tôi là Nhân sinh năm 1993”

– Hàm có tham số là loại hàm mà khi gọi hàm ta phải truyền giá trị vào cho nó. Tùy vào giá trị được truyền mà hàm sẽ thực thi và cho ra kết quả khác nhau.

Ví dụ

– Hàm GioiThieu bên dưới có hai tham số là x & y

– Về nội dung của hàm:

Biến name được gán giá trị bằng với giá trị của tham số x

Biến year được gán giá trị bằng với giá trị của tham số y

– (1) Trong lần gọi hàm đầu tiên:

Tham số x được truyền giá trị là Trình Giảo Kim ==> biến name có giá trị Trình Giảo Kim

Tham số y được truyền giá trị là 1993 ==> biến year có giá trị 1993

==> Kết quả thực thi của hàm sẽ là hiển thị dòng chữ Tôi là Trình Giảo Kim sinh năm 1993

– (2) Trong lần gọi hàm thứ hai:

Tham số x được truyền giá trị là La Thành ==> biến name có giá trị La Thành

Tham số y được truyền giá trị là 1989 ==> biến year có giá trị 1989

==> Kết quả thực thi của hàm sẽ là hiển thị dòng chữ Tôi là La Thành sinh năm 1989

– (3) Trong lần gọi hàm thứ ba:

Tham số x được truyền giá trị là Tần Thúc Bảo ==> biến name có giá trị Tần Thúc Bảo

Tham số y được truyền giá trị là 1985 ==> biến year có giá trị 1985

==> Kết quả thực thi của hàm sẽ là hiển thị dòng chữ Tôi là Tần Thúc Bảo sinh năm 1985

3) Cách khai báo & gọi hàm “không có tham số”

– Để khai báo (khởi tạo) một hàm thuộc thoại không có tham số, ta sử dụng cú pháp như sau:

– Để gọi một hàm thuộc loại không có tham số, ta sử dụng cú pháp:

tên hàm()

Ví dụ

Tạo một hàm có tên GioiThieu với chức năng hiển thị câu “Tôi là Nhân sinh năm 1993”

4) Cách khai báo & gọi hàm “có tham số”

– Để khai báo một hàm thuộc thoại có tham số, ta sử dụng cú pháp như sau:

– Tham số có tính năng gần giống như biến, tuy nhiên tham số thì chỉ có thể sử dụng bên trong hàm.

– Khi khai báo hàm, ta khai báo danh sách các tham số thì điều này cũng gần giống như việc khai báo danh sách các biến.

– Đối với hàm có tham số, khi gọi hàm ta phải truyền giá trị cho các tham số theo cú pháp như sau:

tên hàm(giá trị tham số thứ nhất, giá trị tham số thứ hai, giá trị tham số thứ ba, ….)

– Việc truyền giá trị cho tham số cũng tương tự như việc gán giá trị cho biến, nếu ta gọi hàm mà không truyền giá trị cho các tham số thì mặc định các tham số sẽ có giá trị là undefined

Ví dụ

Tạo một hàm có tên là GioiThieu

Hàm GioiThieu có hai tham số là name & year

– Để tránh tình trạng tham số bị nhận giá trị undefined thì trong lúc khai báo hàm ta có thể gán giá trị mặc định cho các tham số, khi đó nếu lúc gọi hàm ta không truyền giá trị cho tham số thì tham số sẽ sử dụng giá trị mặc định được gán lúc khai báo.

Ví dụ

Hàm GioiThieu bên dưới có hai tham số là name & year

Tham số là name được gán giá trị mặc định là Nhân

Tham số là year được gán giá trị mặc định là 1993

5) Gọi hàm thông qua một sự kiện

– Ta có thể thiết lập việc một hàm nào đó sẽ được thực thi khi một sự kiện nào đó xảy ra (Ví dụ như: khi người dùng click chuột vào một phần tử, dí chuột vào một phần tử, ….) bằng cách đặt câu lệnh gọi hàm vào bên trong thuộc tính sự kiện của phần tử.

Ví dụ

6) Lệnh return

– Lệnh return dùng để trả về cho hàm một giá trị.

(Sau khi thực thi xong, hàm sẽ có một giá trị, lúc đó nó có thể được sử dụng giống như một biến)

Ví dụ 1

Ví dụ 2:

Ví dụ 3

– Lưu ý: Trong một hàm, sau khi thực thi xong lệnh return thì hàm sẽ kết thúc (tức là những câu lệnh nằm phía sau lệnh return sẽ không được thực thi). Cho nên trong một hàm, lệnh return cần phải được đặt ở vị trí cuối cùng.

Javascript Cơ bản