Function và Function Expressions trong JavaScript

Trong bài viết này chúng ta sẽ tìm hiểu khái niệm hàm và cách sử dụng hàm trong JavaScript nhé 😁.

Hàm trong JavaScript

Hàm (function) là đoạn mã được viết ra để thực thi một nhiệm vụ cụ thể.

Giả sử bạn cần tạo một chương trình để tạo một hình tròn và tính chu vi của nó. Bạn có thể tạo hai hàm để giải quyết vấn đề này:

1. Một function để vẽ hình tròn
2. Một function để tính chu vi hình tròn

Khi sử dụng function, nó giúp chúng ta chia một vấn đề phức tạp thành các phần nhỏ hơn giúp chương trình dễ hiểu và đặc biệt là có thể sử dụng lại (reusable).

JavaScript hay các ngôn ngữ lập trình khác cũng có một lượng lớn các hàm có sẵn (Built-in Functions). Ví dụ: Math.random() trong JavaScript là một hàm để trả về số ngẫu nhiên, hay Math.max() trong JavaScript dùng để tìm số lớn nhất trong các số đã cho.

Trong bài viết này này, chúng ta cùng tìm hiểu về các hàm do chúng ta định nghĩa.

Khai báo hàm

Cú pháp để khai báo một hàm như sau:

function tenCuaFunction () {
    // function body   
}

1. Một hàm được khai báo bằng cách sử dụng từ khóa function.
2. Quy tắc cơ bản của việc đặt tên cho một function tương tự như đặt tên cho một biến. Để code dễ đọc thì chúng ta nên đặt một tên ngắn gọn mô tả cho chức năng của hàm. Ví dụ: nếu một hàm được sử dụng để thêm hai số, bạn có thể đặt tên cho hàm là addNumbers. Hoặc hàm sử dụng để kiểm tra số nguyên dương - isPositiveInteger
3. Phần thân của hàm được viết trong {}.

Ví dụ:

// tạo một function có tên hàm là greet
function greet() {
    console.log("Xin chào mọi người 😁!");
}

Gọi hàm

Ở ví dụ trên, chúng ta đã khai báo một hàm có tên là greet. Để sử dụng hàm đó, chúng ta cần gọi hay làm cho nó chạy.

Chúng ta sẽ gọi hàm greet() ở trên bằng cách sử dụng () với tên hàm để gọi hàm:

greet(); // gọi hàm

Ví dụ:

// viết hàm hiển thị tên
function displayName() {
    console.log("Xin chào mình là Trang 😋");
}

// gọi hàm để hiển thị tên
displayName();

Sau khi gọi hàm displayName() chúng ta sẽ được kết quả như sau:

Xin chào mình là Trang 😋

Function Parameters

Một hàm cũng có thể được khai báo với các tham số (parameters). Tham số là giá trị được truyền khi khai báo một hàm. Ví dụ như bạn đến ngân hàng vào đưa các thông tin cá nhân của mình (parameters) để yêu cầu ngân hàng tạo cho bạn một thẻ ngân hàng.

Cú pháp:

function tenCuaHam(param1, ..., pramN) {
	// function body   
}

Trong đó: param1 -> pramN là các tham số mà các bạn muốn truyền vào hàm.

Ví dụ:

Ở ví dụ trên mình có tạo một hàm displayName() để hiển thị tên. Tuy nhiên chúng ta chỉ có thể hiển thị một tên duy nhất mỗi khi bạn gọi hàm. Chúng ta có thể viết lại hàm một chút để viết một hàm mà hiển thị được tên theo ý muốn nhé ^^.

// viết hàm hiển thị tên với parameter (tham số): name
function displayName(name) {
    console.log("Xin chào mình là " + name);
}

// tên biến không cần giống tên tham số
let input = prompt("Nhập một tên: ");

// gọi hàm để hiển thị tên
displayName(input);

Ta nhập thử tên theo ý mình nhé:

Nhập một tên: Hà
Xin chào mình là Hà

Thử nhập tên khác xem có tái sử dụng hàm được không 😃:

Nhập một tên: Tú
Xin chào mình là Tú

Trong chương trình trên, hàm displayName() được khai báo với một tham số name. Người dùng được nhắc nhập tên và giá trị sau khi nhập lưu vào biến input. Sau đó, khi ta gọi hàm, một đối số được truyền vào hàm là input.

Khi một giá trị được truyền khi khai báo một hàm, nó được gọi là tham số - parameter. Và khi gọi hàm, giá trị được truyền vào được gọi là đối số - argument. Tên tham số và đối số không cần phải đặt giống nhau.

Ví dụ:

Giờ ta sẽ thử tính tổng hai số với tham số là 2 số tùy chọn nhé.

// khai báo function
function add(a, b) {
    console.log(`Tổng hai số là: ${a + b}`);
}

// gọi hàm
add(1,2); // (1)
add(4,-5); // (2)

Kết quả chúng ta được:

Tổng hai số là: 3
Tổng hai số là: -1

Trong chương trình trên, hàm add dùng để tính tổng của hai số.

1. Hàm được khai báo với hai tham số a và b.
2. Hàm được gọi bằng cách sử dụng tên của nó và truyền hai đối số 1 và 2 ở (1), 4 và -5 ở (2).

Chúng ta có thể gọi một hàm bao nhiêu lần tùy thích, chúng ta còn có thể viết một hàm và sau đó gọi nó nhiều lần với các đối số khác nhau. Đây chính là cái hay khi chúng ta sử dụng hàm 😁😁😁.

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

Chúng ta có thể đặt mặc định một giá trị cho tham số nếu muốn ^^.

// khai báo function
function add(a, b = 5) {
    console.log(`Tổng hai số là: ${a + b}`);
}

// gọi hàm
add(1); // (1)
add(4,-5); // (2)

Kết quả:

Tổng hai số là: 6
Tổng hai số là: -1

Khi gọi hàm với tham số mặc định, như ví dụ trên thì (1) không cần truyền đối số thứ hai (mình để mặc định là 5) thì JavaScript tự biết a + b là 1 + 5. Ở (2) chúng ta truyền -5 vào đối số thứ hai và JavaScript sẽ sử dụng -5 thay vì giá trị mặc định để tính toán ^^.

Function Return

Câu lệnh return có thể được sử dụng để trả về giá trị cho một lời gọi hàm. Mình lấy lại ví dụ về thẻ ngân hàng, bạn đến và đưa thông tin cá nhân (parameter) để làm thẻ tại ngân hàng, ngân hàng chấp nhận thông tin của bạn và sau đó thẻ ngân hàng được làm và đưa cho bạn (return).

Câu lệnh return có nghĩa là hàm đã kết thúc. Bất kỳ đoạn code nào sau return đều không được thực thi.

Nếu không có gì được return, hàm sẽ trả về một giá trị undefined.

Ví dụ:

// tính tổng hai số

// khỏi tạo hàm tính tổng
function add(a, b) {
    return a + b; // lệnh return trả về kết quả phép tính tổng
}

// gọi function và kết quả trả về từ function được lưu vào biến result
let result = add(1, 99);

// in ra kết quả
console.log("Tổng hai số là " + result);

Chúng ta xem kết quả ở ví dụ trên:

Tổng hai số là 100

Trong chương trình trên, kết quả phép tính tổng được trả về bởi hàm sử dụng câu lệnh return. Và giá trị đó được lưu trữ trong biến result.

Giả sử chúng ta không sử dụng lệnh return thì kết quả như sau:

// tính tổng hai số

// khởi tạo hàm tính tổng
function add(a, b) {
    a + b; // không dùng return trả về kết quả phép tính tổng
}

// gọi function, kết quả lưu vào biến result
let result = add(1, 99);

// in ra kết quả
console.log("Tổng hai số là " + result);

Kết quả chúng ta được: Tổng hai số là undefined 😣. Lý do là chúng ta không return về kết quả tính tổng. Do đó function sẽ mặc định return undefined;.

Qua các ví dụ trên chúng ta có thể thấy được lợi ích khi sử dụng hàm như sau ^^.

1. Function làm cho các đoạn code có thể được sử dụng lại. Chúng ta có thể khai báo một lần và sử dụng nhiều lần.
2. Function giúp chúng ta tạo chương trình dễ dàng hơn vì mỗi nhiệm vụ nhỏ được chia thành một chức năng.
3. Function giúp tăng khả năng đọc.

Function Expressions

Trong Javascript, các hàm cũng có thể được định nghĩa dưới dạng các biểu thức (expressions).

Ví dụ:

// tính diện tính hình chữ nhật

// khởi tạo hàm và lưu vào biến
let dienTichHinhChuNhat = function (a, b) { return a * b };
console.log(dienTichHinhChuNhat(8, 4)); // 32

// có thể lưu kết quả vào một biến khác
let dienTichHinhChuNhat2 = dienTichHinhChuNhat(3, 8);
console.log(dienTichHinhChuNhat2); // 24

Trong chương trình trên, biến dienTichHinhChuNhat được sử dụng để lưu khai báo hàm. Ở đây hàm được coi như một biểu thức. Và hàm được gọi bằng cách sử dụng tên biến.

Hàm trên chúng ta không đặt tên cho nó, hàm này được gọi là hàm ẩn danh (anonymous function). Trong ES2015, các biểu thức trên còn được viết dưới dạng các arrow functions hay "hàm mũi tên". chúng ta sẽ tìm hiểu về chúng trong các bài viết sau 😄😄😄.

Cảm ơn các bạn đã đọc bài viết này. Chúng ta sẽ gặp lại nhau trong các bài viết sắp tới nhé ^^.