Hàm trong JavaScript

Trong bài hướng dẫn tự học Javascript này, bạn sẽ học cách định nghĩa và gọi một hàm trong JavaScript.

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

Hàm trong JavaScript

Hàm (hay còn gọi là Function) là một nhóm các câu lệnh thực hiện các nhiệm vụ cụ thể và có thể được giữ và duy trì riêng biệt trong chương trình chính.

Các hàm cung cấp một cách để tạo code đóng gói có thể tái sử dụng, dễ mang theo hơn và dễ gỡ lỗi hơn.

Dưới đây là một số ưu điểm của việc sử dụng hàm trong Javascript:

Ưu điểm của Hàm #1: Các hàm làm giảm sự lặp lại code trong một chương trình

Hàm cho phép bạn trích xuất khối mã thường được sử dụng thành một thành phần duy nhất (single component).

Bây giờ bạn có thể thực hiện cùng một tác vụ bằng cách gọi hàm này ở bất cứ chỗ nào mà bạn muốn trong tập lệnh của mình mà không phải sao chép và dán cùng một khối mã nhiều lần.

Ưu điểm của Hàm #2: Các hàm làm cho code dễ bảo trì hơn

Vì một hàm được tạo ra một lần có thể được sử dụng nhiều lần, do đó, mọi thay đổi được thực hiện bên trong một hàm sẽ tự động được thực hiện tại tất cả các vị trí mà không cần sửa từng chỗ, từng chỗ một.

Ưu điểm của Hàm #3: Các hàm làm cho dễ sửa lỗi hơn

Khi chương trình được chia thành các hàm, nếu có lỗi xảy ra, bạn biết chính xác hàm nào gây ra lỗi và tìm nó ở đâu. Do đó, sửa lỗi trở nên dễ dàng hơn nhiều.

Phần sau đây sẽ cho bạn thấy cách xác định và gọi các hàm trong Javascript.

2. Cách định nghĩa và gọi hàm trong Javascript

Việc khai báo một hàm trong Javascript sẽ theo thứ tự như sau:

+ Bắt đầu bằng từ khóa function

+ Theo sau là tên hàm bạn muốn tạo

+ Theo sau là dấu ngoặc đơn, tức là ( )

+ Và cuối cùng đặt các câu lệnh của hàm giữa các dấu ngoặc nhọn { }.

Đây là cú pháp cơ bản để khai báo hàm trong Javascript:

function tenHam() {
    // Code thực thi
}

Đây là một ví dụ đơn giản về một hàm trong Javascript, nó sẽ hiển thị một thông báo "Xin chào Javascript":

// Định nghĩa hàm trong JS
function noiXinChao() {
    alert("Xin chào Javascript");
}
 
// Gọi hàm
noiXinChao();

Khi chạy chương trình, chúng ta sẽ nhận được một thông báo dạng popup:

Xin chào Javascript

Khi một hàm đã được định nghĩa, nó có thể được gọi (invoked) từ bất kỳ đâu trong.

Bạn chỉ cần nhập tên của nó theo sau là một dấu ngoặc đơn, ví dụ như noiXinChao() trong ví dụ trên.

Lưu ý: Tên hàm phải bắt đầu bằng một chữ cái thường hoặc ký tự gạch dưới (không bắt đầu với một số), theo sau thì tùy ý ký tự (chữ cái, số, gạch dưới). Tên hàm có phân biệt chữ hoa chữ thường, giống như tên biến.

3. Cách thêm tham số cho hàm trong Javascript

Bạn có thể chỉ định tham số (parameter) khi bạn định nghĩa hàm của mình để chấp nhận giá trị đầu vào trong thời gian chạy (runtime).

Các tham số hoạt động như các biến giữ chỗ trong một hàm.

Các tham số được thay thế vào thời điểm chạy bằng các giá trị truyền vào (lúc truyền như thế nó được gọi là đối số) cho hàm tại thời điểm gọi.

Các tham số được đặt trên dòng đầu tiên của hàm bên trong cặp dấu ngoặc đơn, cách nhau bằng dấu phảy, như sau:

function tenHam(thamSo1, thamSo2, thamSo3) {
    // Code thực thi
}

Để hiểu hơn về cách thêm tham số cho hàm, chúng ta cùng làm ví dụ sau:

Hàm hienThiTong() trong ví dụ sau lấy hai số làm đối số, cộng chúng lại và hiển thị kết quả trên trình duyệt.

// Định nghĩa hàm
function hienThiThong(so1, so2) {
    var tong = so1 + so2;
    alert(tong);
}
 
// Gọi hàm
hienThiThong(5, 5); // Kết quả: 10
hienThiThong(-5, 9); // Kết quả: 4

Bạn có thể định nghĩa bao nhiêu tham số tùy thích.

Tuy nhiên, đối với mỗi tham số bạn chỉ định, một đối số tương ứng cần được truyền cho hàm khi nó được gọi, nếu không giá trị của nó sẽ trở thành undefined.

Hãy xem xét ví dụ sau:

// Định nghĩa hàm
function hienThiHoTen(hoKhachHang, tenKhachHang) {
    alert(hoKhachHang + " " + tenKhachHang);
}
 
// Gọi hàm
hienThiHoTen("Vi", "Doanh"); // Kết quả: Vi Doanh
hienThiHoTen("Hoàng"); // Kết quả: Hoàng undefined

Như bạn thấy, ở lần gọi hàm hienThiHoTen() thứ hai chúng ta đã quên truyền đối số thứ 2. Chính vì thế kết quả cho ra là: Hoàng undefined

4. Giá trị mặc định cho tham số của hàm (ES6)

Từ phiên bản ES6 chúng ta đã có thể gán giá trị mặc định cho tham số của hàm Javascript từ lúc định nghĩa hàm.

Điều này có nghĩa là nếu không có đối số nào được truyền cho hàm khi nó được gọi thì các giá trị tham số mặc định này sẽ được sử dụng.

Đây là một trong những tính năng được chờ đợi nhất trong JavaScript.

Hãy thử xem một ví dụ:

// Định nghĩa hàm và thêm tham số
// Gán giá trị mặc định cho tham số
function noiXinChao(ten = 'ICT Hà Nội') {
    alert('Xin chào, ' + name);
}

// Gọi hàm không truyền đối số
noiXinChao(); // Kết quả: Xin chào, ICT Hà Nội
// Gọi hàm có truyền đối số
noiXinChao('Javascript'); // Kết quả: Xin chào, Javascript

Mặc dù trước ES6, để đạt được kết quả tương tự, chúng ta có thể viết như thế này:

// Định nghĩa hàm và thêm tham số
function noiXinChao(ten) {
    // Thiết lập giá trị mặc định
    var ten = ten || "ICT Hà Nội";
    alert('Xin chào, ' + name);
}

// Gọi hàm không truyền đối số
noiXinChao(); // Kết quả: Xin chào, ICT Hà Nội
// Gọi hàm có truyền đối số
noiXinChao('Javascript'); // Kết quả: Xin chào, Javascript

5. Giá trị trả về từ một hàm trong JavaScript

Một hàm có thể trả về một giá trị (để sử dụng sau) bằng cách sử dụng câu lệnh return.

Giá trị có thể là bất kỳ loại nào, bao gồm cả mảng và đối tượng.

Câu lệnh return thường được đặt ở dòng cuối cùng của hàm trước dấu ngoặc nhọn đóng và kết thúc nó bằng dấu chấm phẩy, như trong ví dụ sau:

// Định nghĩa hàm
function tinhTong(so1, so2) {
    var tong = so1 + so2;
    return tong;
}
 
// Hiển thị giá trị trả về
alert(tinhTong(5, 5)); // Kết quả: 10
alert(tinhTong(-5, 9)); // Kêt quả: 4

Một hàm thì không thể trả về nhiều giá trị.

Tuy nhiên, bạn có thể có được kết quả tương tự bằng cách trả về một mảng các giá trị, như được minh họa trong ví dụ sau:

// Định nghĩa hàm
function chiaHaiSo(soBiChia, soChia){
    var thuong = soBiChia / soChia;
    var arr = [soBiChia, soChia, thuong];
    return arr;
}
 
// Lưu giá trị trả về trong một biến
var mangTraVe = chiaHaiSo(10, 5);
 
// Hiển thị từng giá trị riêng lẻ
alert(mangTraVe[0]); // Kết quả: 10
alert(mangTraVe[1]); // Kết quả: 5
alert(mangTraVe[2]); // Kết quả: 2

>> Chưa hiểu cách sử dụng Mảng thì đọc lại bài viết: Mảng trong JavaScript

6. Cách làm việc với hàm biểu thức(Function Expression)

Cú pháp mà chúng ta đã sử dụng trước đây để tạo hàm được gọi là hàm khai báo. Còn có một cú pháp khác để tạo một hàm được gọi là hàm biểu thức.

Ví dụ:

// Hàm khai báo
function tinhTong(so1, so2) {
    var tong = so1 + so2;
    return tong;
}
 
// Hàm biểu thức
var tinhTong = function(so1, so2) {
    var tong = so1 + so2;
    return tong;
};

Lưu ý: Không cần đặt dấu chấm phẩy sau dấu ngoặc nhọn đóng trong hàm khai báo. Nhưng, các hàm biểu thức phải luôn luôn kết thúc bằng dấu chấm phẩy.

Khi hàm biểu thức đã được lưu trữ trong một biến, biến đó có thể được sử dụng làm hàm:

// Định nghĩa hàm biểu thức
var tinhTong = function(so1, s2) {
    var tong = so1 + so2;
    return tong;
};

// Gọi hàm
alert(tinhTong(1, 1)); // Kết quả: 2

var tong = tinhTong(5, 5);
alert(tong); // Kết quả: 10

Lưu ý: Trong Javascript các hàm có thể được lưu trữ trong các biến, được chuyển vào các hàm khác dưới dạng đối số, chuyển ra khỏi hàm dưới dạng giá trị trả về và được xây dựng trong thời gian chạy (run-time).

Cú pháp của hàm khai báo và hàm biểu thứctrông rất giống nhau, nhưng nó được đánh giá theo cách khác nhau, hãy xem ví dụ sau:

hamKhaiBao(); // Kết quả: Đây là hàm khai báo!
function hamKhaiBao() {
    alert("Đây là hàm khai báo!");
}
 
hamBieuThuc(); // Uncaught TypeError: undefined is not a function
var hamBieuThuc = function() {
    alert("Đây là hàm biểu thức!");
};

Như bạn có thể thấy trong ví dụ trên, hàm biểu thức đã ném ra một ngoại lệ khi nó được gọi trước khi nó được định nghĩa.

Nhưng hàm khai báo lại được thực hiện thành công.

Hàm khai báo phân tích cú pháp JavaScript trước khi chương trình thực thi.

Do đó, không có vấn đề gì nếu chương trình gọi hàm trước khi được định nghĩa bởi vì.

Ngượ lại, Hàm biểu thức không được ước tính cho đến khi nó được gán cho một biến. Do đó, nó vẫn là undefined khi được gọi.

ES6 đã giới thiệu cú pháp thậm chí ngắn hơn để viết biểu thức hàm được gọi là arrow function, (sẽ giới thiệu trong một bài khác)

7. Hiểu rõ hơn về phạm vi biến trong Javascript (Variable Scope)

Bạn có thể khai báo các biến ở bất cứ đâu trong JavaScript.

Nhưng, vị trí của khai báo xác định mức độ sẵn có của một biến trong chương trình JavaScript, tức là nơi biến có thể được sử dụng hoặc truy cập.

Khả năng tiếp cận này được gọi là phạm vi biến (variable scope).

Theo mặc định, các biến được khai báo trong một hàm có phạm vi cục bộ có nghĩa là nó không thể được xem hoặc thao tác từ bên ngoài hàm đó, như trong ví dụ dưới đây:

// Định nghĩa hàm
function xinChao() {
    var chao = "Chào bạn!";
    alert(chao);
}
 
xinChao(); // Kết quả: Chào bạn!
 
alert(chao); // Uncaught ReferenceError: chao is not defined

Như bạn thấy, biến chao được khai báo bên trong hàm xinChao(). Chúng ta không thể gọi nó ở bên ngoài được.

Ngược lại, bất kỳ biến nào được khai báo trong một chương trình bên ngoài hàm đều có phạm vi toàn cục, tức là nó sẽ có sẵn cho tất cả các tập lệnh, cho dù tập lệnh đó nằm trong một hàm hay bên ngoài.

Đây là một ví dụ:

// Khao báo biến chao bên ngoài hàm
var chao = "Chào bạn!";

// Định nghĩa hàm
function xinChao() {
    alert(chao);
}
 
xinChao(); // Kết quả: Chào bạn!
 
alert(chao); // Kết quả: Chào bạn!

>> Tham khảo: Biến trong Javascript

Chúc mừng bạn đã hiểu cơ bản về hàm trong Javascript

Qua bài viết này, bạn đã được học cách định nghĩa hàm, gọi hàm, thêm tham số cũng như truyền đối số cho một hàm trong Javascript.

Ngoài ra bạn cũng được tìm hiểu thêm về giá trị trả về của hàm, sự khác biệt giữa hàm khai báo và hàm biểu thức. Một chút về phạm vi biến nữa.

Khá nhiều đấy nhỉ. Hãy xem xét kỹ lại các ví dụ để hiểu rõ hơn về hàm trong Javascript nhé.

Chúc bạn học tốt.

---

HỌC VIỆN ĐÀO TẠO CNTT NIIT - ICT HÀ NỘI

Dạy học Lập trình chất lượng cao (Since 2002). Học làm Lập trình viên. Hành động ngay!

Đc: Tầng 3, 25T2, N05, Nguyễn Thị Thập, Cầu Giấy, Hà Nội

SĐT: 02435574074 - 0914939543 - 0353655150 

Email: hello@niithanoi.edu.vn

Website: https://niithanoi.edu.vn

Fanpage: https://facebook.com/NIIT.ICT/

#niit #niithanoi #niiticthanoi #hoclaptrinh #khoahoclaptrinh #hoclaptrinhjava #hoclaptrinhphp #java #php #python