PHẦN CƠ BẢN
VÒNG LẶP
DATA TYPES
EVENTS
DOM
BOM
OBJECT
BỔ SUNG
THỰC HÀNH
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
Dự án mới của mình là gamehow.net, mời anh em ghé thăm và góp ý ạ.

Function trong Javascript - cách tạo hàm và gọi hàm trong JS

Trong bài này chúng ta sẽ tìm hiểu function trong Javascript. Function hay còn gọi là hàm, được sử dụng rất nhiều khi làm việc với Javascript.

Kể từ phiên bản ES6 trở đi thì hàm trong Javascript có rất nhiều cách tạo khác nhau, điển hình nhất là các khái niệm về arrow function, callback function, khiến những người mới học cảm thấy đau đầu. Nhưng bạn đừng quá lo lắng bởi trong bài này mình sẽ nói tất cả những kiến thức cần biết về function / hàm trong JS nhé.

1. Function trong Javascript là gì?

Function hay còn gọi là hàm, là tập hợp một đoạn code dùng để xử lý một nhiệm vụ nào đó. Code bên trong function không được biên dịch cho tới khi được gọi đến. Chính vì vậy khi sử dụng function sẽ giúp chương trình được 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. Lúc này nếu trang nào bạn cũng code từ A - Z thì sẽ mất khá nhiều thời gian, thay vào đó hãy viết nó vào một function và gọi đến nó ở những trang cần sử dụng.

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

2. Một ví dụ về lợi ích của function trong Javascript

Từ bài 1 tới giờ ta đang code từng đoạn code riêng lẻ và khi cần thì code lại, như vậy giả sử ta cần xử lý vấn đề đó trong 1000 trường hợp thì ta phải code lại 1000 lần nên 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 code vào một khối xử lý và khi cần thì gọi ra dùng.

Giả sử mình viết chương trình kiểm tra số chẵn hay lẻ như sau:

var number = 2;

if (number % 2 == 0){
   alert('Số chẵn');
}
else {
   alert('Số lẻ');
}

Nếu mình cần kiểm tra cho 100 số thì sẽ viết lặp lại đoạn code trên 100 lần, điều này quả là tệ hại phải không các bạn? Nhưng đừng lo bởi khi sử dụng hàm trong Javascript thì ta sẽ gom chúng vào thư viện riêng và chỉ gọi tới khi cần.

3. Cách tạo function trong Javascript

Trước tiên hãy xem cú pháp tạo hàm trong Javascript như thế nào đã nhé.

Cú pháp:

function name_of_function(var1, var2, var3, ...)
{
    // Some code
}

Trong đó:

  • function: là từ khóa của javascript nên bắt buộc phải như vậy
  • name_of_function: là tên của hàm, thông thường chúng ta tạo những tên có ý nghĩa như find_max, find_min, ...
  • var1, var2 var3, ... là các tham số truyền vào hàm. Ví dụ viết hàm kiểm tra số chẵn hay lẽ thì ta sẽ có một tham số đó là số cần kiểm tra. Đương nhiên bạn có thể tạo một hàm không có tham số.

Ví dụ: Viết hàm kiểm tra một số chẵn hay lẻ.

Code RUN
// Tạo hàm
function check_number(number)
{
    if (number % 2 == 0){
        alert(number + ' là số chẵn');
    }
    else {
        alert(number + 'Số lẻ');
    }
}

4. Cách gọi hàm trong Javascript

Để gọi hàm thì ta chỉ cần gọi đến tên hàm, sau đó truyền vào các tham số cần thiết.

Ví dụ dưới đây là mình đã gọi hàm check_number 5 lần và có truyền giá trị cho tham số của hàm.

Code RUN
// Sử dụng hàm kiểm tra cho 5 số
check_number(1);
check_number(2);
check_number(3);
check_number(4);
check_number(5);

Các bạn thấy mình đã tạo một hàm với tham số truyền vào có tên là number. Như vậy khi sử dụng nếu ta truyền số 1 vào thì lúc này biến number trong hàm sẽ có giá trị là 1, tương tự cho 2, 3,4,5.

Lưu ý với các bạn trong javascript không tồn tại khái niệm con trỏ và tham chiếu trong hàm

5. Hàm có return và hàm không có return

Hàm có return là hàm có sử dụng từ khóa return để đặt ở cuối hàm với mục đích trả kết quả về để sử dụng tiếp ở những đoạn code bên ngoài. Ví dụ ta cần viết một hàm tính tổng của hai số a và b thì hàm này phải trả về giá trị là tổng của hai số a, b. Xem ví dụ sau:

Code RUN
// Khai báo hàm
function tinh_tong(a, b)
{
    // trả về kết quả là a + b
    return a + b;
}

// Sử dụng
var so1 = 1;
var so2 = 2;

// truyền so1 và so2 vào hàm
var ketqua = tinh_tong(so1, so2);

alert(ketqua);

Hàm không có return là hàm không có sử dụng từ khóa return đặt trong hàm. Ví dụ viết chương trình in ra tổng của hai số a và b.

Code RUN
// Khai báo hàm
function tinh_tong(a, b)
{
    document.write('Tổng là ' + (a + b));
}

// Sử dụng
var so1 = 1;
var so2 = 2;

// truyền so1 và so2 vào hàm
tinh_tong(so1, so2);

Như vậy tùy vào mục đích mà ta dùng có return hay không có return. Nhưng thông thường ta sử dụng return ở những trường hợp cần lấy kết quả đó để xử lý tiếp, như ở ví dụ trên đó là mình lấy kết quả để in thông báo.

5. Giá trị mặc định của tham số (default parameter)

Có một số trường hợp bạn muốn một tham số nào đó có thể được truyền hoặc không cần truyền vào đều được, lúc này chúng ta phải sử dụng nó như một tham số mặc định. Javascript không có cú pháp gán giá trị mặc định như PHP mà thay vào đó chúng ta sử dụng toán tử ||.

Ví dụ: Hàm hiển thị một thông báo.

Code RUN
function showMessage(message)
{
   // Nếu message không được truyền vào hoặc giá trị nó là rỗng
   // thì sẽ được thay thế bằng giá trị 'Không có tin nhắn'
   message = message || 'Không có tin nhắn <br/>';
   document.write(message);
}

// Cách 1: không truyền tham số
showMessage();

// Cách 2: Truyền tham số
showMessage('Chào mừng bạn đến với freetuts.net');

Toán tử || gồm hai vế, trong đó nếu vế TRÁI có giá trị rỗng (undefined, null, false, ...) kết quả sẽ trả về vế PHẢI, ngược lại nó sẽ trả về vế TRÁI.

6. Cách tạo hàm arrow function trong Javascript

Arrow function còn được gọi là hàm mũi tên, tức là ta sẽ tạo hàm bằng cách sử dụng ký tự =>. Cách tạo này xuất hiện kể từ phiên bản ES6.

Cú pháp
var name_of_function = (var1, var2, var3, ...) => {
    // Nội dung function
};

So sánh với cú pháp cơ bản mà chúng ta đã học ở đầu bài sẽ là:

function name_of_function(var1, var2, var3, ...)
{
    // Nội dung function
}

Ví dụ: Viết hàm kiểm tả 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 chia_het_cho_3(number){
    if (number % 3 == 0){
        return true;
    }
    return false;
}  

Cách 2: Sử dụng arrow function

var chia_het_cho_3 = (number) => {
    if (number % 3 == 0){
        return true;
    }
    return false;
};

7. 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 còn chính xác hay không thì mình không biết nhé :D vì có trường hợp nó sai.

Code RUN
// khai báo hàm
function kiem_tra_nam_nhuan(nam)
{
    // nếu năm chia hết cho 100
    // thì kiểm tra nó có chia hết cho 400 hay không
    if (nam % 100 == 0)
    {
        // nêu chia hết cho 400 thì là năm nhuận
        if (nam % 400 == 0){
            alert(nam + ' là năm nhuận');
        }
        else { // ngược lại không phải năm nhuận
            alert(nam + ' không phải năm nhuận');
        }
    }
    else if (nam % 4 == 0){ // trường hợp chia hết cho 4 thì là năm nhuận
        alert(nam + ' là năm nhuận');
    }
    else { // cuối cùng trường hợp không phải năm nhuận
        alert(nam + 'không phải là năm nhuận');
    }
}
// sử dụng
kiem_tra_nam_nhuan(4);

Ví dụ 2: thực hiện lại ví dụ trên nhưng sử dụng return để trả kết quả vè, nếu true thì là năm nhuận, false thì không phải năm nhuận.

Code RUN
// khai báo hàm
function kiem_tra_nam_nhuan(nam)
{
    // nếu năm chia hết cho 100
    // thì kiểm tra nó có chia hết cho 400 hay không
    if (nam % 100 == 0)
    {
        // nêu chia hết cho 400 thì là năm nhuận
        if (nam % 400 == 0){
            return true;
        }
        else { // ngược lại không phải năm nhuận
            return false;
        }
    }
    else if (nam % 4 == 0){ // trường hợp chia hết cho 4 thì là năm nhuận
        return true;
    }
    else { // cuối cùng trường hợp không phải năm nhuận
        return false;
    }
}
// sử dụng
var flag = kiem_tra_nam_nhuan(4);

if (flag){
    alert('là năm nhuận');
}
else {
    alert('không phải là năm nhuận');
}

Trong ví dụ này thay vì alert trực tiếp trong hàm thì ta trả về kết quả true/false, sau đó kiểm tra kết quả này nếu true thì là năm nhuận, nếu false thì không phải là năm nhuận.

9. Các hàm có sẵn trong Javascript là gì?

Hàm có sẵn trong Javascript là những hàm được 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ình có soạn một series riêng về danh sách các hàm trong js, mới bạn tham khảo tại đây.

Lời kết: Qua bài này bạn đã hiểu được cách tạo và sử dụng hàm trong javascript, Sau này khi lập trình với JS thì bạn sử dụng hàm rất nhiều, vì vậy cần phải nắm vững nó nhé.

Câu hỏi thường gặp liên quan:

Cùng chuyên mục:

Cách gộp hai object javascript lại với nhau

Cách gộp hai object javascript lại với nhau

Cách lấy chiều dài của object trong Javascript

Cách lấy chiều dài của object trong Javascript

Hướng dẫn giải phương trình bậc 1 bằng Javascript

Hướng dẫn giải phương trình bậc 1 bằng Javascript

Cách dùng nextSibling trong javascript

Cách dùng nextSibling trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng innerHTML trong Javascript

Cách dùng innerHTML trong Javascript

Cách dùng insertBefore trong javascript

Cách dùng insertBefore trong javascript

Cách dùng insertAfter trong Javascript

Cách dùng insertAfter trong Javascript

Cách dùng parentNode trong Javascript

Cách dùng parentNode trong Javascript

Cách dùng parentElement trong Javascript

Cách dùng parentElement trong Javascript

Tính tổng các phần tử trong mảng javascript

Tính tổng các phần tử trong mảng javascript

Tính tổng hai số bằng Javascript (cộng hai số)

Tính tổng hai số bằng Javascript (cộng hai số)

Cách gán giá trị cho thẻ input trong javascript

Cách gán giá trị cho thẻ input trong javascript

Để gán giá trị cho thẻ input thì ta có hai cách, thứ nhất là…

Cách kiểm tra số nguyên âm trong javascript

Cách kiểm tra số nguyên âm trong javascript

Cách kiểm tra số nguyên dương trong javascript

Cách kiểm tra số nguyên dương trong javascript

Hàm closure trong javascript

Hàm closure trong javascript

Closure là một khái niệm không phải ai cũng ..

Biểu thức chính quy RegEx trong Javascript

Biểu thức chính quy RegEx trong Javascript

Bài này chúng ta sẽ tìm hiểu đến chuỗi và cách sử dụng biểu thức…

Cách dùng Import / Export Module trong javascript

Cách dùng Import / Export Module trong javascript

Khi bạn xây dựng một ứng dụng nhỏ thì việc đặt

Cơ chế hoạt động của hoisting trong Javascript

Cơ chế hoạt động của hoisting trong Javascript

Hoisting là vấn đề liên quan đến cách khai báo biến trong Javascript. Nó liên…

Cấp độ private / protected của class trong Javascript

Cấp độ private / protected của class trong Javascript

Top