JavaScript

Tổng quan về function trong JavaScript

Tổng quan về function trong JavaScript
Được viết bởi Minh Hoàng

Series lập trình JavaScript, ngôn ngữ lập trình linh động, thực thi phía client.

Tổng quan về function trong JavaScript

– JavaScript cung cấp các hàm (functions) tương tự như hầu hết các ngôn ngữ lập trình.

– Trong JavaScript, bạn có thể sử dụng các functions để xác định các khối lệnh, đặt tên cho chúng và thực hiện chúng nhiều lần tùy thích.

1. Cách định nghĩa hàm JavaScript

1. Cách định nghĩa hàm JavaScript

– Một hàm JavaScript có thể được định nghĩa bằng cách sử dụng từ khóa function.

– Bạn có thể sử dụng khai báo hàm (function declaration) hoặc biểu thức hàm (function expression).

1.1. Sử dụng khai báo hàm (function declaration)

Cú pháp:

// Định nghĩa hàm
function functionName(parameters) {
	// các lệnh thực thi
}

// Gọi hàm
functionName();

Ví dụ:

function myFunction(a, b) {
    return a * b;
}

myFunction(4, 3);	// return 12
Try it »

– Dấu chấm phẩy được sử dụng để phân tách các câu lệnh JavaScript có thể thực thi.
– Vì một khai báo hàm không phải là một câu lệnh thực thi được, nên không cần kết thúc nó bằng một dấu chấm phẩy.

1.2. Sử dụng biểu thức hàm (function expression)

– Một hàm JavaScript cũng có thể được định nghĩa bằng cách sử dụng một biểu thức (expression).

Biểu thức hàm có thể được lưu trữ trong một biến:

Ví dụ 1:
var x = function (a, b) {return a * b};
Try it »

– Sau khi một hàm (function expression) được lưu trữ trong biến, biến có thể được sử dụng như một hàm.

– Các hàm được lưu trong các biến không cần tên hàm. Chúng luôn được invoked (called) bằng cách sử dụng tên biến.

Ví dụ 2:
var x = function (a, b) {return a * b};
var y = x(4, 3);	// return 12
Try it »

Ví dụ 3:
var add = function sum(val1, val2) {
    return val1 + val2;
};

var result1 = add(10,20);
var result2 = sum(10,20);	// not valid
Try it »

Hàm trên là một phần câu lệnh thực thi được, vì vậy nó kết thúc bằng dấu chấm phẩy.

2. Anonymous Function Hàm ẩn danh, hàm không tên

2. Anonymous Function Hàm ẩn danh, hàm không tên

– Các hàm ở ví dụ 2 và 3 thực chất là các hàm ẩn danh (anonymous function – hàm không có tên).

– JavaScript cho phép chúng ta định nghĩa một hàm mà không có bất kỳ tên nào. Hàm chưa được đặt tên này được gọi là hàm ẩn danh – anonymous function. Hàm ẩn danh phải được gán cho một biến.

Ví dụ:
var showMessage = function (){
    alert("Hello World!");
};

showMessage();

var sayHello = function (firstName) {
    alert("Hello " + firstName);
};

showMessage();

sayHello("Minh Hoàng Blog!");
Try it »

Anonymous Function rất hữu ích khi passing callback function, creating closure hoặc function expression được gọi ngay lập tức.

3. Nested Function Hàm có thể lồng vào nhau

3. Nested Function Hàm có thể lồng vào nhau

– Trong JavaScript, một hàm có thể có một hoặc nhiều hàm bên trong (inner functions).

– Các hàm lồng nhau (nested functions) này nằm trong phạm vi của hàm bên ngoài (outer function).

Inner function có thể truy cập các biến (variables) và tham số (parameters) của outer function. Tuy nhiên, outer function không thể truy cập các biến được định nghĩa bên trong các inner functions.

Ví dụ:
function showMessage(firstName)
{
	// Biến x1 của outer function
	var x1 = "Minh Hoàng Blog";
    
    function sayHello() {
		document.getElementById("demo1").innerHTML = x1;	// Minh Hoàng Blog
        
        // Biến x2 của inner function
		var x2 = "www.minhhn.com";
        
		alert("Hello " + firstName);
    }

    document.getElementById("demo2").innerHTML = x2;		// Error: ReferenceError, x2 is not defined.

    return sayHello();
}

showMessage("World!");
Try it »

4. Return Value Giá trị trả về của hàm JavaScript

4. Return Value Giá trị trả về của hàm JavaScript

– Một hàm có thể trả về zero (0) hoặc một giá trị bằng cách sử dụng từ khóa return.

Ví dụ: Hàm trả về giá trị (Return value from a Function)
// Hàm có return
function sum(val1, val2) {
	return val1 + val2;
};

sum(10,20); 		// 30

// Hàm không return
function multiply(val1, val2) {
	console.log( val1 * val2);
};

multiply(10,20);	// undefined
Try it »

– Trong ví dụ trên, hàm Sum thực hiện cộng 2 giá trị val1val2return kết quả. Vì vậy, khi gọi có thể nhận được giá trị trả về là 30. Nhưng ở hàm thứ hai Multiply không trả về bất kỳ giá trị nào, do đó kết quả nhận được sẽ là undefined.

Ví dụ: Hàm trả về một hàm (Function returning from a Function)
function multiply(x) {

	function fn(y)
	{
		return x * y;
	}

	return fn;
}

var calc = multiply(3);

calc(2);	// 6
calc(3);	// 9
Try it »
5. Hàm dựng, hàm tạo Function() Constructor

5. Hàm dựng, hàm tạo Function() Constructor

– Như chúng ta đã thấy trong các ví dụ trên, các hàm JavaScript được định nghĩa với từ khóa function.

– Các hàm cũng có thể được định nghĩa bằng function constructor được xây dựng sẵn (built-in) trong JavaScript là Function().

Ví dụ:
var myFunction = new Function("a", "b", "return a * b");

var x = myFunction(4, 3);	// 12
Try it »

– Trong thực tế, bạn không cần sử dụng function constructor. Ví dụ trên giống với cách viết sau:

Ví dụ:
var myFunction = function (a, b) {return a * b};

var x = myFunction(4, 3);	// 12
Try it »

Trong hầu hết các trường hợp, tránh sử dụng từ khóa new trong JavaScript.

6. Function Hoisting

6. Function Hoisting

– Ở bài viết Khái niệm Hoisting trong JavaScript, chúng ta đã biết được là: Hoisting là hành vi mặc định của JavaScript để di chuyển một khai báo đến đầu phạm vi hiện tại.

– Hoisting áp dụng cho cả các khai báo biến và khai báo hàm.

– Do đó, các hàm JavaScript có thể được gọi trước khi chúng được khai báo:

Ví dụ:
myFunction(5);

function myFunction(y) {
    return y * y;
}

Các hàm được định nghĩa bằng cách sử dụng biểu thức (expression) thì không được hoist.

7. Cách một hàm tự gọi chính nó

7. Cách một hàm tự gọi chính nó

– Biểu thức hàm (Function expression) có thể tự gọi chính nó (self-invoking) một cách tự động mà không cần lời gọi hàm.

– Các function expressions sẽ thực thi tự động nếu biểu thức được theo sau bởi ().

– Khai báo hàm (function declaration) không thể tự gọi chính nó.

– Bạn cần thêm dấu ngoặc đơn quanh hàm để biểu thị rằng đó là một biểu thức hàm (function expression):

Ví dụ:
(function () {
    var x = "Hello!";	// I will invoke myself.
})();
Try it »

– Hàm trên thực sự là một hàm tự gọi ẩn danh (anonymous self-invoking function – hàm mà không có tên).

8. Function có thể được sử dụng làm giá trị

8. Function có thể được sử dụng làm giá trị

– Các hàm JavaScript có thể được sử dụng làm giá trị cho một biến:

Ví dụ:
function myFunction(a, b) {
    return a * b;
}

var x = myFunction(4, 3);		// 12

– Các hàm JavaScript cũng có thể được sử dụng trong các biểu thức (expressions):

Ví dụ:
function myFunction(a, b) {
    return a * b;
}

var x = myFunction(4, 3) * 2;	// 24
9. Function là một Object

9. Function là một Object

– Khi lấy type của hàm JavaScript bằng toán tử typeof sẽ trả về kết quả là function.

– Tuy nhiên, các hàm JavaScript có thể được thể hiện như là các đối tượng. Các hàm JavaScript có cả thuộc tính (properties) và phương thức (methods).

– Thuộc tính arguments.length trả về số đối số nhận được khi hàm được gọi:

Ví dụ:
function myFunction(a, b) {
    return arguments.length;	// return 2
}
Try it »

– Phương thức toString() trả về hàm dưới dạng một chuỗi.

Ví dụ:
function myFunction(a, b) {
    return a * b;
}

var txt = myFunction.toString();
Try it »

– Một function được định nghĩa như một property của đối tượng, thì nó được gọi là method của object.
– Một function được thiết kế để tạo mới một đối tượng, thì nó được gọi là object constructor.

Tham khảo w3schools.

Cảm ơn bạn đã theo dõi. Đừng ngần ngại hãy cùng thảo luận với chúng tôi!


Giới thiệu

Minh Hoàng

Xin chào, tôi là Hoàng Ngọc Minh, hiện đang làm BrSE, tại công ty Toyota, Nhật Bản. Những gì tôi viết trên blog này là những trải nghiệm thực tế tôi đã đúc rút ra được trong cuộc sống, quá trình học tập và làm việc. Các bài viết được biên tập một cách chi tiết, linh hoạt để giúp người đọc có thể tiếp cận một cách dễ dàng nhất. Hi vọng nó sẽ có ích hoặc mang lại một góc nhìn khác cho bạn[...]

1
Bình luận của bạn

avatar
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
0 Comment authors
Recent comment authors
Mới nhất Cũ nhất Thích nhiều nhất
trackback

[…] Ở bài viết Tổng quan về hàm trong JavaScript, chúng ta đã biết rằng hàm có thể có các tham số […]

Tổng quan về function trong JavaScript

by Minh Hoàng Time to read: 9 min
1