Hàm trong JavaScript

Ngày đăng: 30/09/2020 - Cập nhật: 07/10/2020

Mục Lục

1. Hàm là gì? Function là gì trong JavaScript?
2. Định nghĩa một Function trong JavaScript
3. Cách thực thi function trong JS
4. Đối tượng Argument
5. Return trong Function
6. Gán function cho một biến
Tổng kết

Function (Hàm) trong JavaScript rất lợi hại và chính nó mang lại sức mạnh tùy biến cho các chương trình JavaScript. Hôm nay hãy cùng mình tìm hiểu về nó nhé.

Hàm trong JavaScript

1. Hàm là gì? Function là gì trong JavaScript?

Như các bài trước bạn đã có sử dụng một số hàm thao tác với String và một số hàm xử lý Mảng tuy nhiên đó là những hàm có sẵn, được nhà phát hành tạo sẵn để bạn sử dụng.

Ngoài những hàm được cung cấp sẵn đó ra, bạn cũng có thể tự tạo ra các hàm riêng theo ý thích của bạn.

Và cũng không hề quá khi nói rằng: Hàm chính là sức mạnh của ngôn ngữ lập trình.

Hàm (hay còn gọi là Function) là một khối lệnh (một nhóm các lệnh) được viết để nhằm hoàn thành một nhiệm vụ nào đó.

Một function trong JavaScript được thực thi khi được gọi đến.

Function có nhiều ưu điểm nhưng trong đó nổi bật nhất đó là: Định nghĩa một lần sử dụng lại nhiều lần giúp tiết kiệm thời gian và công sức khi lập trình.

Trong JavaScript thì function rất linh hoạt, bạn có thể truyền bất cứ tham số nào cho nó (có thể nhiều hơn, có thể ít hơn) mà không bị lỗi biên dịch, và một số điểm mới nữa mà bạn sẽ được học ở bên dưới.

> Chú ý: JavaScript là một ngôn ngữ động nên nó sẽ không quy định chặt chẽ. Đây là ưu điểm mà cũng là nhược điểm của nó.

2. Định nghĩa một Function trong JavaScript

Để định nghĩa (tạo ra) một function trong JavaScript ta thường làm như sau:

		
		// Cú pháp định nghĩa một function

		function ten_function(thamSo1, thamSo2, thamSo3, ...)  

		{

		    // Tập hợp các câu lệnh

		    // để hoàn thành nhiệm vụ nào đó

		};

Cách làm này còn được gọi là Khai báo hàm (hoặc Function Declaration)

Trong đó:

function: Đây là từ khóa để thông báo rằng bạn đang định nghĩa một function

ten_function: Đây là tên hàm, bạn có thể đặt giống như cách đặt tên biến trong JavaScript. Tuy nhiên, mình khuyên bạn nên đặt tên theo quy tắc camelCase (Từ đầu tiên viết thường, các từ sau viết HOA chữ cái đầu, tên function phải thể hiện ý nghĩa của function đó)

thamSo1, thamSo2, thamSo3....: Là danh sách các tham số để sử dụng. Có thể có mà cũng có thể không có (Bạn sẽ được tìm hiểu kỹ hơn ở phần bên dưới)

{ ... }: Các câu lệnh sẽ được đặt trong dấu ngoặc nhọn này

Ví dụ: Tạo một function không có tham số đầu vào để in ra màn hình console dòng chữ Hello World!

		
		// Tạo một hàm in thông tin

		function inThongTin()

		{

		    // In thông tin ra màn hình console

		    console.log("Hello World!");

		}

Ví dụ: Tạo một function có hai tham số đầu vào là a, và b để in ra tổng hai số a và b

		
		// Tạo một hàm tính tổng hai số

		function tongHaiSo(a, b)

		{

		    // in ra màn hình console tổng 2 số a + b

		    console.log(a + b);

		}

Ngoài ra, có thể trong một số chương trình bạn còn nhìn thấy cách tạo như thế này:

		
		// Khai báo hàm sử dụng Function constructor

		let tongHaiSo = new Function(a, b) {

		    console.log(a + b);

		};

		let x = tongHaiSo(2, 3);

> Lưu ý: Hầu hết thời điểm bạn nên tránh sử dụng từ khóa new trong JavaScript.

Thế nên, cách làm trên cũng được làm tương tự như thế này:

		// Anonymous function

		let tongHaiSo = function (a, b) {

		    console.log(a + b);

		};

3. Cách thực thi function trong JS

Ở trên bạn mới chỉ tạo ra function mà thôi. Để nó in ra màn hình "Hello World!" hay tính tổng hai số thì chưa.

Sau khi tạo ra function thì chúng ta cần một bước là bước thực thi function để function đó làm nhiệm vụ của nó.

Bước này chúng ta thường nói là bước gọi hàm.

Bước này bạn cần gọi tên của một function. Nếu có tham số thì truyền tham số vào.

Ví dụ: Ta muốn gọi một function inThongTin ở trên thì sau khi định nghĩa, ta làm như sau:

		
		// Gọi hàm in thông tin "Hello World"

		inThongTin();

Kêt quả trên màn hình console, ta nhận được:

	
	Hello World!

Như ở trên đã nói, tham số là tùy chọn, có thể truyền hay không truyền cũng được.

Hãy thử xem truyền một tham số và thực lại hàm inThongTin xem sao nhé:

		
		// Cố tình truyền thêm tham số cho hàm inThongTin

		inThongTin("NIIT");

Kêt quả:

	
	Hello World!

Như bạn thấy, khi tạo function inThongTin thì ta không có tạo tham số nào.

Như khi thực thi cố gắng truyền tham số vào thì cũng không ảnh hưởng gì.

Đây là một điểm mạnh của JavaScript.

Nếu như trong ngôn ngữ lập trình Java thì bạn đã bị dính lỗi rồi.

> Tiện đây, bạn nào muốn học Java thì có thể tham khảo KHÓA HỌC JAVA Full Stack ngay!

Bây giờ chúng ta thử gọi hàm tongHaiSo xem thế nào nhé, thực hiện như sau:

		
		// Tính tổng hai số 2 và 3

		tongHaiSo(2, 3);

Kết quả trong màn hình console ta được:

5

Tương tự, bạn thử gọi hàm mà không truyền tham số, hoặc truyền nhiều hơn số lượng tham số đã định nghĩa để xem kết quả như thế nào nhé.

> Ghi chú: Ở phần này có thể bạn sẽ gặp khái niệm là "Đối số". Giả sử với hàm tongHaiSo, khi định nghĩa hàm, a và b được gọi là tham số, thì khi gọi hàm tongHaiSo(2, 3); thì 2 và 3 này sẽ được gọi là đối số.

Trong trường hợp bạn gọi như thế này:

		
		// Cố tình truyền thiếu đối số

		tongHaiSo(2);

Khi đó kết quả sẽ là:

NaN

Bởi vì, nếu bạn truyền thiếu, tham số b không nhận được giá trị, nó sẽ có giá trị là undefined.

Khi đó: 2 + undefined = NaN.

Vị trí các tham số sẽ tương ứng với vị trí của các đối số được truyền vào.

4. Đối tượng Argument

Đối với đối tượng Argument (đối số) này ta có thể sử dụng để lấy dữ liệu được truyền vào.

Argument nó giống như một mảng, vì vậy bạn có thể truy cập đến các phần tử giống như truy cập phần tử trong mảng nhưng nó không có các hàm của mảng.

Ví dụ:

		
		// Tạo hàm tính tổng hai số

		function tongHaiSo(a, b) {

		    let c = arguments[0] + arguments[1];

		    console.log(c);

		}

		// Tính tổng hai số 2, 3

		tongHaiSo(2, 3);

Kết quả ta nhận được:

5

Trong khối lệnh thực thi ta sẽ sử dụng arguments[0] và arguments[1] thay cho a và b. Ta vẫn có kết quả tương tự như sử dụng a và b.

5. Return trong Function

5.1. Function trả về một giá trị

Khi thực thi đến một câu lệnh return, thì function sẽ không thực thi nữa.

Một hàm sẽ trả về một giá trị hoặc không trả về giá trị nào.

Ví dụ: Ta sẽ chỉnh sửa một chút ở hàm tongHaiSo để nó trả về tổng của hai số a và b

		
		// Tạo một hàm tính tổng hai số

		function tongHaiSo(a, b)

		{

		    // Trả về tổng hai số a + b

		    return a + b;

		}

Khi ta gọi hàm như thế này:

	
	tongHaiSo(2, 3);

Thì ở phần trực quan chúng ta không thấy thay đổi gì.

Tuy nhiên, để biết nó có thay đổi gì chúng ta làm như sau:

		
		// Gán giá trị trả về cho biến c

		let c = tongHaiSo(2, 3);

		// Kiểm tra giá trị của c

		console.log(c);

Kết quả:

5

Như vậy, khi sử dụng câu lệnh return, hàm tongHaiSo trả về một giá trị.

Giá trị này chúng ta có thể sử dụng trong các chương trình tiếp theo, ví dụ:

		
		let c = tongHaiSo(2, 3);

		function xepHang(c)

		{

		    if ( c >= 5 ) {

		        console.log("Điểm trên trung bình!");

		    } else {

		        console.log("Điểm dưới trung bình!");

		    }

		}

		xepHang(c);

Kết quả:

	
	Điểm trên trung bình!

Bởi vì bạn chưa học đến phần cấu trúc điều kiện if else nên có thể bạn chưa hiểu lắm.

Nhưng bạn chỉ cần hiểu là chúng ta có thể có kết quả được trả về từ một hàm nào đó thông qua việc return.

Sau đó, bạn muốn sử dụng giá trị đó để làm gì thì tùy bạn.

5.2. Function trả về Function

Đây cũng là một điểm mạnh của JavaScript so với các ngôn ngữ khác. Khi mà trong một hàm sẽ có một hoặc nhiều hàm khác nó cho phép chúng ta trả về một hàm.

Những function nằm trong function cha sẽ được gọi là nested function khi đó chúng chỉ hoạt động được trong function cha mà không gọi được ở bên ngoài fucntion đó.

Ví dụ:

		
		function a() {

		    console.log('A');

		}

		let x = a(); // A

		console.log(x); // undefined

		function b() {

		    console.log('B');

		    return a;

		}

		let y = b(); // B

		console.log(y); // return function a

		function c() {

		    console.log('C');

		    return a();

		}

		let z = c(); // C A

		console.log(z); // return undefined

Cũng hơi khó hiểu nhỉ?

Không sao!

Bây giờ bạn chưa cần hiểu nó làm gì cả.

Hãy biết rằng bạn có thể return (trả về) một function trong JavaScript là được.

6. Gán function cho một biến

JavaScript cũng hỗ trợ chúng ta gán một function cho một biến, đây cũng là một điểm linh hoạt của JavaScript so với các ngôn ngữ khác.

Khi mà ta có thể khai báo một biến và được gán bằng một function và sử dụng biến đó như là một function.

Ví dụ:

		
		let tongHaiSo = function sum (a, b) { return a + b; };

		// In ra tổng hai số 2 và 3

		console.log(tongHaiSo(2, 3));

Kết quả:

5

Và khi đã gán function như thế thì bạn không thể làm như thế này:

		
		// Không thể làm như thế này

		sum(2, 3);

Mà phải gọi từ tên biến mà bạn đã gán tongHaiSo(2, 3); mới được.

JavaScript cho phép chúng ta gán function theo kiểu biểu thức:

		
		// Function expression

		let tongHaiSo = function (a, b) {

		    return a + b;

		};

		// In ra tổng hai số 2 và 3

		console.log(tongHaiSo(2, 3));

Cách này còn được gọi là biểu thức hàm (hay Function Expression)

Kết quả:

5

Hàm trên thực chất là một hàm ẩn danh (anonymous function - một hàm không có tên).

Hàm được gán như kiểu biểu thức nên kết thúc bằng dấu chấm phẩy ; vì nó là một phần của câu lệnh thực thi (Tuy nhiên JavaScript thường mắt nhắm mắt mở cho qua)

Tổng kết

Trên đây là những kiến thức cơ bản về function, về hàm trong JavaScript, bạn hãy làm lại các ví dụ và tự biến đổi, suy nghĩ làm những ví dụ khác để hiểu hơn về chúng nhé.

Sau khi nắm vững những kiến thức này chúng ta sẽ học đến những thứ nâng cao hơn. Hẹn gặp lại các bạn ở bài học tiếp theo.

> Nhớ đọc thêm về Function trên Mozilla bạn nhé

Về trang trước Bài tiếp theo

Gửi email in trang