HomeLập trìnhJavaScriptHàm trong JavaScript...

Hàm trong JavaScript là gì? Hướng dẫn cho người mới bắt đầu


Hàm là một trong những khái niệm cơ bản trong lập trình. Chúng cho phép chúng tôi viết mã ngắn gọn, mô-đun, có thể tái sử dụng và bảo trì. Chúng cũng giúp chúng ta tuân theo nguyên tắc DRY khi viết mã.

Trong bài viết này, bạn sẽ tìm hiểu các hàm trong JavaScript là gì, cách viết các hàm tùy chỉnh của riêng bạn và cách triển khai chúng.

Như một điều kiện tiên quyết, bạn nên làm quen với một số khái niệm JavaScript cơ bản như biến, biểu thức và câu lệnh điều kiện để theo dõi bài viết này.

Hàm trong JavaScript là gì?

Hàm là một khối mã có thể tái sử dụng được viết để thực hiện một tác vụ cụ thể.

Bạn có thể coi một hàm như một chương trình con trong chương trình chính. Một chức năng bao gồm một tập hợp các câu lệnh nhưng thực thi như một đơn vị.

Trong JavaScript, chúng tôi có một số chức năng tích hợp sẵn của trình duyệt như cảnh báo (), nhắc () và xác nhận (). Bạn có thể đã sử dụng những thứ này trong dự án của mình trước đây phải không? Nhưng bạn vẫn có thể tạo các chức năng tùy chỉnh của riêng mình.

Có một số cách để xác định một chức năng. Thông thường nhất, chúng ta có khai báo hàm và biểu thức hàm.

Cách xác định hàm bằng khai báo hàm

Bạn viết một khai báo hàm như thế này:

function nameOfFunction() {
	//some code here....
}

Về cơ bản, nó bao gồm những điều sau đây:

  • chức năng từ khóa
  • Tên của chức năng
  • Dấu ngoặc đơn (có thể chứa tham số hoặc cũng có thể để trống)
  • Phần thân của hàm (được đặt trong dấu ngoặc nhọn).

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

function sayHello() {
	console.log("Hello world"); 
}

Chức năng này sẽ không làm gì cả – trong trường hợp này, đầu ra Chào thế giới – trừ khi bạn gọi nó. Thuật ngữ cho điều này là gọi hàm.

Đây là cách gọi hàm:

sayHello();

//output: Hello world

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

function sum(num1, num2){
	return num1 + num2;
}

Để gọi chức năng này, chúng tôi gọi nó như thế này:

sum(1, 2);

//output: 3

Bạn có thể thấy một chút khác biệt giữa ví dụ chức năng đầu tiên của chúng tôi và ví dụ thứ hai.

Nếu bạn đoán rằng đó là nội dung trong dấu ngoặc đơn của hàm thứ hai, thì bạn đã đúng!

Chức năng sum() lấy hai tham số khi chúng tôi xác định nó – num1num2. Và khi chúng tôi gọi nó, chúng tôi đã chuyển vào hai giá trị – đối số, 12. Hãy để tôi giải thích ý nghĩa của hai thuật ngữ này (tham số và đối số).

Đọc thêm  Ví dụ JavaScript String.Replace() với RegEx

Một tham số là một biến bạn chuyển đến một hàm khi bạn khai báo nó.

Giả sử bạn muốn hàm của mình ở dạng động, để hàm áp dụng logic của hàm cho các bộ dữ liệu khác nhau tại các thời điểm khác nhau. Đó là nơi các tham số có ích. Bằng cách này, chức năng của bạn không chỉ lặp đi lặp lại cùng một kết quả. Thay vào đó, kết quả của nó phụ thuộc vào dữ liệu bạn truyền vào.

Một tranh luậnmặt khác, là giá trị tương đương với tham số mà bạn truyền vào hàm khi bạn gọi nó.

Vậy cú pháp khai báo hàm có tham số sẽ như sau:

function nameOfFunction(parameters){
	//function body.....
}

Và để gọi nó:

nameOfFunction(arguments)

Cách xác định hàm bằng cách sử dụng biểu thức hàm

Biểu thức hàm là một ký hiệu khác để xác định hàm. Về cú pháp, nó tương tự như khai báo hàm. Nhưng các biểu thức hàm cho phép bạn xác định một hàm được đặt tên hoặc bỏ qua tên hàm để tạo một hàm ẩn danh.

Hãy xem biểu thức hàm trông như thế nào:

let namedFunction = function myFunction(){
	//some code here...
}

Lưu ý rằng trong ví dụ này, hàm có tên, myFunction. Đây không phải là trường hợp với chức năng ẩn danh. Khi xác định một hàm ẩn danh, bạn bỏ qua tên hàm giống như trong ví dụ dưới đây:

let anonymousFunction = function(){
	//some code here...
}

Bạn có thể thấy rằng cả hai ví dụ hàm đều được gán cho một biến phải không?

Từ khóa hàm tạo ra một giá trị hàm có thể được gán cho một biến khi nó được sử dụng làm biểu thức.

Vì vậy, để gọi hàm này, chúng ta gọi nó bằng cách sử dụng tên biến đóng vai trò là tên hàm mới.

Một điểm khác biệt chính giữa khai báo hàm và biểu thức hàm là, với khai báo hàm, bạn có thể gọi hàm ngay cả trước khi định nghĩa nó. Điều này là không thể với các biểu thức chức năng.

Ví dụ:

console.log(greeting());

function greeting(){
  console.log("Hope you're are good?");

}
//output: Hope you're good?

Điều này sẽ không hoạt động nếu hàm được định nghĩa là biểu thức hàm vì biểu thức hàm tuân theo trình tự luồng điều khiển từ trên xuống dưới.

Cách sử dụng các hàm mũi tên trong JavaScript

Hàm mũi tên là một ký hiệu khác của biểu thức hàm nhưng chúng có cú pháp ngắn hơn. Chúng được giới thiệu trong ES6 và giúp chúng tôi viết mã sạch hơn.

Ở đây, từ khóa chức năng bị loại trừ và chúng tôi sử dụng ký hiệu mũi tên (=>) để thay thế. Cú pháp trông như thế này:

let nameOfFunction = (parameters) => {
	//function body
}

Nếu thân hàm trong dấu ngoặc nhọn chỉ chứa một câu lệnh duy nhất thì có thể bỏ qua dấu ngoặc nhọn. Hàm mũi tên có dấu ngoặc nhọn phải bao gồm từ khóa trả về.

Đọc thêm  5 cách xây dựng ứng dụng thời gian thực với JavaScript

IIFE là một ký hiệu biểu thức hàm khác (rõ ràng là một hàm ẩn danh) hoạt động độc lập và độc lập với bất kỳ mã nào khác. Nó được gọi ngay tại nơi nó được xác định.

Cú pháp như sau:

(function (){
	//function body
})();

Trường hợp sử dụng của IIFE sẽ bao gồm một biến mà bạn có thể không sử dụng lại bên trong mã của mình. Vì vậy, ngay sau khi hàm được thực thi, biến đó sẽ không còn tồn tại.

Cách sử dụng từ khóa trả về trong một hàm

Để tạo một hàm sẽ phân giải thành một giá trị sau khi hàm được gọi, bạn sử dụng từ khóa return. Bạn viết cái này trong phần thân của hàm.

return là một lệnh trả về một giá trị cho hàm sau khi mã bên trong nó đã được thực thi.

Đây là một ví dụ về hàm trả về một giá trị, trong trường hợp này là tổng của hai số:

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

sum(10, 20);

//output will be 30

sử dụng return bên trong một hàm giúp dễ dàng thao tác với dữ liệu mà hàm trả về, bằng cách chuyển nó dưới dạng giá trị cho một hàm khác, hoặc thực hiện các thao tác bổ sung trên nó.

Làm thế nào để Chức năng Sđối phó và đóng cửa Làm việc trong JavaScript?

Phạm vi là một không gian tên lồng nhau giúp bản địa hóa các tên được tạo bên trong nó sao cho các tên này không can thiệp vào các tên tương tự được tạo bên ngoài phạm vi đó. Có một số quy tắc phạm vi áp dụng trong một chức năng.

Mỗi chức năng mới mà bạn xác định sẽ tạo ra một phạm vi mới được gọi là phạm vi chức năng. Các biến được tạo trong phạm vi chức năng sẽ không hiển thị hoặc truy cập được bên ngoài phạm vi đó.

Tuy nhiên, các biến được tạo bên ngoài phạm vi hàm nhưng trong phạm vi mà hàm được xác định có thể được truy cập bên trong hàm. Do đó, nếu bạn định nghĩa một hàm trong phạm vi toàn cục, thì nó có thể truy cập tất cả các biến được khai báo trong phạm vi toàn cục đó.

Ngoài ra, giả sử bạn có một hàm con (nghĩa là hàm bên trong) được lồng bên trong hàm cha (là hàm bên ngoài). Hàm con có thể truy cập tất cả các biến và hàm được khai báo trong hàm cha của nó cũng như tất cả các biến và hàm mà hàm cha có quyền truy cập – ngay cả khi hàm cha của nó đã thực thi xong và các biến của nó không thể truy cập được bên ngoài hàm đó nữa. Khái niệm này được gọi là bao đóng trong JavaScript.

Tuy nhiên, hàm cha không thể truy cập các biến được tạo bên trong hàm con. Theo cách này, các biến và hàm bên trong hàm con được giới hạn trong phạm vi của chính chúng.

Đọc thêm  Cách lặp qua các đối tượng trong JavaScript

Hãy xem một ví dụ mã về điều này:

//variables defined in the global scope

let  a = 40;
let b = 20;

//this function is also defined in the global scope

function parentFunc(){
	//access variables a and b inside this function

	console.log(a + b); 
}

//output: 60

Giả sử tôi lồng một hàm bên trong bên trong hàm cha, như thế này:

//variables defined in the global scope

let a = 40;
let b = 20;

//this function is also defined in the global scope

function parentFunc(){
	let  name = “Doe”;
    
    //this inner function is defined inside the parent function scope
    
	function childFunc(){
		console.log(`${name} is ${a - b} years old`); 
      }
    return childFunc();
}

parentFunc(); //ouput: Doe is 20 years old

Bây giờ, nếu tôi tạo một biến bên trong một hàm và cố gắng truy cập nó từ phạm vi toàn cục, chúng ta sẽ gặp lỗi tham chiếu. Điều này là do biến đó là cục bộ trong phạm vi chức năng và không hiển thị với phạm vi toàn cục.

console.log(c);

function parentFunc(){
	let c = 30
} 

//output: reference error - c is not defined

Hãy thử truy cập một biến được tạo bên trong một hàm lồng trong hàm cha:

function parentFunc(){
	console.log(age);
	function childFunc(){
		let  age = 20;
	} 
    return childFunc();
}

parentFunc(); //output: reference error - age is not defined.

Các tham số mặc định hoạt động như thế nào trong JavaScript?

Ban đầu, các tham số chức năng được gán không xác định khi không có giá trị nào được truyền rõ ràng cho chúng. Tham số mặc định cho phép bạn gán giá trị mặc định cho tham số khi bạn xác định hàm. Ví dụ:

function greeting(name, message = ”Hello”){
	console. log(`${messgae}  ${name}`)
}

greeting(‘John’); //output: Hello John

//you can also assign a new value to the default parameter 
//when you call the function

greeting(‘Doe’, ‘Hi’); //output: Hi Doe

Điều quan trọng cần lưu ý là khi khai báo một tham số mặc định, nó phải đứng sau tham số thông thường.

Các tham số còn lại hoạt động như thế nào trong JavaScript?

Với các tham số còn lại, bạn có thể xác định một hàm để lưu trữ nhiều đối số trong một mảng. Điều này đặc biệt hữu ích khi bạn gọi hàm của mình bằng nhiều đối số. Đây là một ví dụ:

function sayHello(message, ...names){
  names.forEach(name => console.log(`${message} ${name}`));
}

sayHello('Hello', "John", "Smith", "Doe");

/*
output:

Hello John

Hello Smith

Hello Doe 

*/


Các ... là những gì làm cho names một tham số nghỉ ngơi.

Giống như các tham số mặc định, các tham số còn lại sẽ xuất hiện sau bất kỳ tham số thông thường nào trong hàm của bạn.

Phần kết luận

Trong bài viết này, bạn đã tìm hiểu hàm trong JavaScript là gì và cách bạn có thể viết các hàm của riêng mình.

Với các hàm, bạn có thể sắp xếp mã của mình bằng cách nhóm mọi thứ thành các khối riêng biệt thực hiện các tác vụ khác nhau.

Tôi hy vọng bạn thích đọc bài viết này. Để tìm hiểu thêm về các chức năng, đây là một số tài nguyên bạn có thể xem:

Đó là tất cả cho phần này. Chúc mừng mã hóa 🙂



Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status