Bài 8: Hàm trong Javascript – PhamBinh.net

Posted on by mtoplistChuyên mục:Top List

I. Giới thiệu

Trước khi đi vào khái niệm Hàm trong Javascript là gì, chúng ta cùng xem một ví dụ sau đây.

Dưới đây là ví dụ về việc kiểm tra lần lượt các số x, y, z có phải là số chẵn hay không?

var x = 1;
var y = 2;
var z = 3;

if (x % 2 == 0) {
    console.log(x + ' là số chẵn')
} else {
    console.log(x + ' là số lẻ')
}

if (y % 2 == 0) {
    console.log(y + ' là số chẵn')
} else {
    console.log(y + ' là số lẻ')
}

if (z % 2 == 0) {
    console.log(z + ' là số chẵn')
} else {
    console.log(z + ' là số lẻ')
}

Nhận xét về ví dụ trên

  • Xét về góc độ đáp số, ví dụ trên thực hiện đúng yêu cầu của bài toán đề ra, tức là đã kiểm tra chính xác lần lượt các số x, y, z có phải là số chẵn hay không.
  • Ví dụ trên có những đoạn code bị lặp đi lặp lại, cụ thể là việc kiểm tra, x, y, z chia cho 2 có dư hay không? Nếu không dư, thì là số chẵn, nếu có dư thì là số lẻ.

Kết luận: Ví dụ trên tuy giải quyết đúng yêu cầu bài toán, nhưng cách giải quyết có vẻ không ổn do có nhiều đoạn code bị lặp đi lặp lại. Giả sử không phải chỉ là 3 số x, y, z, mà là 100 số a, b, c,… gì đấy, không lẽ ta lặp đi lặp lại logic kiểm tra số chẵn lẻ 100 lần? Rồi không dừng lại ở 100 số, mà là 1000 số, thì ta cũng lặp đi lặp lại 1000 lần. Không… không thể như thế được.

II. Hàm trong Javascript là gì?

Hàm trong Javascript là một khái niệm giúp bạn có thể gom một đoạn code thành một khối, khi cần có thể gọi ra để sử dụng. Cách hoạt động của hàm được mô tả như sau:
– Bước 1: Bạn đưa cho hàm một tham số.
– Bước 2: Hàm xử lý tham số bạn vừa đưa vào.
– Bước 3: Trả về một kết quả.

Để khai báo một hàm (function) trong Javascript, chúng ta sử dụng theo cú pháp sau:

function tenHam (thamSo1, thamSo2, ... thamSoN) {
    // thân hàm
    // chứa các code cần xử lý
}

Để hiểu rõ hơn, mình sẽ sử dụng function để giải quyết ví dụ trên nhé.

// Khai hàm soChanHayLe
// có tính năng nhận biết số n truyền vào là số chẵn hay lẻ.
function soChanHayLe (n) {
    if (n % 2 == 0) {
        console.log(n + ' là số chẵn');
    } else {
        console.log(n + ' là số lẻ');
    }
}

var x = 1;
var y = 2;
var z = 3;

// kiểm tra các số x, y, z là chẵn hay lẻ
soChanHayLe(x);
soChanHayLe(y);
soChanHayLe(z);

// bạn cũng có thể viết trực tiếp số cần kiểm tra như sau
soChanHayLe(10);
soChanHayLe(11);

Nhận xét

  • Đáp số vẫn không thay đổi so với việc không sử dụng function.
  • Khi áp dụng function, code có vẻ gắn gọn và dễ hiểu hơn.
  • Dễ dàng tái sử dụng khi bạn muốn kiểm tra một số khác.
  • Logic kiểm tra số chẵn lẻ tập trung tại một chỗ, nếu muốn thay đổi logic thì chỉ cần thay đổi một chỗ.

Đến đây chắc bạn hiểu tư tưởng của function sinh ra là để làm gì rồi chứ.

III. Từ khóa return

Có một từ khóa rất hay được sử dụng trong thân hàm, đó là từ khóa return.

Giá trị nằm ngay sau từ khóa return sẽ được trả về thông qua lời gọi hàm.

Để hiểu rõ hơn về cách sử dụng từ khóa return, các hạn hãy theo dõi các ví dụ sau đây.

Ví dụ 1: Mình sẽ xây dựng một hàm kiểm tra một số có phải là số nguyên tố hay không, nếu là số nguyên tố thì trả về true, ngược lại trả về false.

Nhắc lại: Số nguyên tố là số tự nhiên lớn hơn 1 và chỉ chia hết cho 1 và chính nó.

/**
 * Hàm kiểm tra số n truyền vào có phải là số nguyên tố hay không?
 * Nếu là số nguyên tố, trả về true, ngược lại trả về false
 *
 * Ý tưởng: Số nguyên tố là số tự nhiên lớn hơn 1 và chỉ chia hết cho 1 và chính nó.
 * Vì vậy mà số nguyên tố luôn chỉ có 2 ước, nếu nhiều hơn 2 ước thì số đó không phải là số nguyên tố.
 *
 * Ban đầu mình có biến soUoc mang giá trị là 1. Đây là biến sẽ lưu số ước của số n.
 * Mình khởi tạo giá trị bằng 1 là bởi vì bất kỳ số tự nhiên nào lớn hơn 1 đều chia hết cho 1.
 * Tiếp theo mình sử dụng một vòng lặp cho lặp từ 2 tới n,
 * nếu n chia hết cho bất kỳ số nào trong khoảng từ 2 đến n, biến soUoc sẽ tăng lên 1 đơn vị.
 * Sau toàn bộ vòng lặp, mình kiểm tra soUoc có bằng 2 hay không?
 * Nếu soUoc bằng 2, thì n là số nguyên tố.
 * Ngược lại n không phải là số nguyên tố.
 */
function laSoNguyenTo (n) {
    var soUoc = 1;

    for (var i = 2; i <= n; i++) {
        if (n % i == 0) {
            soUoc = soUoc + 1;
        }
    }

    if (soUoc == 2) {
        return true; // trả về kết quả true;
    } else {
        return false; // trả về kết quả false;
    }
}

var x = 1;
var y = 2;
var z = 4;

// Giá trị true, false sẽ được trả về thông qua lời gọi hàm
// vì vậy mình có thể sử dụng luôn hàm laSoNguyenTo() như một điều kiện của câu lệnh if
if (laSoNguyenTo(x)) {
    console.log(x + ' là số nguyên tố');
} else {
    console.log(x + ' không phải số nguyên tố');
}

if (laSoNguyenTo(y)) {
    console.log(y + ' là số nguyên tố');
} else {
    console.log(y + ' không phải số nguyên tố');
}

if (laSoNguyenTo(z)) {
    console.log(z + ' là số nguyên tố');
} else {
    console.log(z + ' không phải số nguyên tố');
}

Ví dụ 2: Mình sẽ xây dựng hàm tính trung bình cộng các số có trong một mảng.

/**
 * Hàm tính trung bình cộng các số có trong mảng.
 * Trả về giá trị trung bình của các số có trong mảng
 *
 * Ý tưởng
 * Ban đầu mình khởi tạo biến tong là 0
 * Sau đó sử dụng vòng lặp for để duyệt hết các phần tử có trong mảng
 * Duyệt tới phần tử nào, thì mình cộng dồn phần từ đó vào biến tong.
 * Kết thúc vòng lặp for, biến tong sẽ mang giá trị là tổng các số có trong mảng
 * Cuối cùng, mình chỉ việc gán kết quả trung bình cộng vào biến ketQua
 * Sau đó return ketQua, để trả về kết quả.
 */
function tinhTrungBinhCong (array) {
    var tong = 0;
    for (var i = 0; i < array.length; i++) {
        tong = tong + array[i];
    }

    // array.length là số lượng phần tử có trong mảng array
    var ketQua = tong/array.length;
    return ketQua;
}

var soNguyen = [1, 2, 3, 4, 6, 9];

// Tính trung bình cộng các số có trong mảng soNguyen
var trungBinhCong = tinhTrungBinhCong(soNguyen);

console.log('Trung bình cộng của mảng là ' + trungBinhCong);

Tham khảo hai ví dụ trên, bạn chắc đã hiểu được vai trò của từ khóa return rồi chứ.

IV. Lợi ích của việc sử dụng hàm trong Javascript

Nếu bạn lướt bài này của mình quá nhanh, có thể bạn sẽ không hiểu được tầm quan trọng của việc sử dụng hàm trong Javascript so với việc code bình thường. Vì vậy, mình liệt kê một số lợi ích của việc sử dụng hàm ở đây:

  • Logic đóng gói: bạn không cần quan tâm tới việc trong function xử lý như thế nào, bạn chỉ cần quan tâm tới việc bạn đưa gì cho function, và function sẽ trả về cho bạn cái gì. Ví dụ bây giờ mình viết sẵn cho bạn một hàm kiemTraSoNguyenTo, mình chỉ cho bạn cách sử dụng là truyền vào một số nguyên, nếu là số nguyên tố, thì function trả về true, ngược lại trả về false. Chấm hết, bạn chỉ không cần phải bận tâm mình làm gì trong thân function cả, miễn sao là mình trả về cho bạn kết quả đúng.
  • Dễ dàng bảo trì: Có một sự thật phũ phàng là trong quá trình code, bạn sẽ dành thời gian để sửa code nhiều hơn là viết code. Nếu có một đoạn code bị lặp đi lặp lại nhiều lần, và một ngày đẹp trời bạn phát hiện logic code đó bị sai, cần phải sửa lại cho chính xác, thì thật là ác mộng nếu bạn phải tìm và sửa lại hết các đoạn code đó. Tuy nhiên nếu sử dụng hàm, bạn chỉ cần sửa một chỗ.

Hai điều trên là hai lợi ích cực kỳ to lớn và ý nghĩa, có thể bây giờ bạn không cảm thấy vậy, nhưng sau này chắc chắn bạn sẽ nhận ra.

V. Kết luận

Hàm (hay function) trong Javascript là một khái niệm đặc biệt quan trọng mà bạn cần phải nắm rõ, nếu bạn cảm thấy nó khó hiểu và có ý định bỏ qua khái niệm này thì đừng làm vậy. Bởi nếu bỏ qua, bạn sẽ không có cơ hội để trở thành lập trình viên đâu.

Tóm tắt lại nội dung bài, có một số ý trọng tâm như sau:

  • Function giúp bạn gom code thành một khối, khi cần bạn có thể gọi function ra để sử dụng.
  • Theo sau từ khóa return, là kết quả trả về của function.
  • Những lợi ích của việc sử dụng function: Logic đóng gói, dễ dàng bảo trì.

Chúc các bạn học tập hiệu quả, hẹn gặp lại trong bài viết lần sau.

mtoplist