Computer >> Máy Tính >  >> Lập trình >> Javascript

Cách sử dụng các hàm JavaScript:Hướng dẫn từng bước

Hàm JavaScript là các khối mã tùy chỉnh có thể được sử dụng lại. Các hàm cho phép mã mô-đun hơn và rất cần thiết cho lập trình hướng đối tượng. Các hàm có thể được định nghĩa thông qua các khai báo hoặc biểu thức.

Nếu bạn đang cố gắng học JavaScript và muốn biết những điều cơ bản, thì các hàm JS chắc chắn là điều bạn cần biết. Nếu bạn đã dành bất kỳ thời gian nào để làm việc với một ngôn ngữ lập trình, bạn sẽ biết rằng các hàm là cơ sở xây dựng của các chương trình phức tạp, nhưng bạn có thể không biết chúng hoạt động như thế nào. Các hàm cho phép bạn viết mã một lần cho các quy trình chung, thay vì lặp lại nhiều lần.

Hàm là các khối mã thực hiện một hành động và có thể trả về một giá trị. Các chức năng có thể được tùy chỉnh dựa trên nhu cầu của bạn và có thể được sử dụng để làm cho mã mô-đun và hiệu quả hơn.

Trong hướng dẫn này, chúng ta sẽ khám phá những điều cơ bản về hàm:cách xác định một hàm, cách gọi một hàm và khi nào chúng có thể hữu ích.

Cách sử dụng hàm xác định JavaScript

Có hai cách để định nghĩa một hàm trong JavaScript:thông qua khai báo và biểu thức. Hãy bắt đầu với phương pháp khai báo để xác định một hàm.

JavaScript Khai báo hàm

Khai báo hàm xác định một hàm được đặt tên. Để xác định loại hàm này, bạn nên bắt đầu mã của mình bằng hàm function từ khóa, theo sau là tên của hàm. Đây là một ví dụ:

function nameOfYourFunction() {
	// Function code
}

Tên hàm tuân theo các quy tắc tương tự như biến — chúng có thể sử dụng dấu gạch ngang, dấu gạch dưới, số và thường được viết bằng cách sử dụng chữ hoa camel. Sau đó, sau tên biến, bạn sẽ bao gồm một tập hợp các dấu ngoặc đơn, nơi có thể chứa các tham số tùy chọn. Chúng ta sẽ nói đến những điều đó ở phần sau của bài viết.

Sau đó, giống như câu lệnh for hoặc if, mã của hàm sẽ nằm trong dấu ngoặc nhọn. Đây là ví dụ về một hàm sẽ in Google vào bảng điều khiển:

81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.

Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ. 

function printGoogle() {
	console.log(“Google”);
}

Trong printGoogle() Hàm JS là một console.log() câu lệnh sẽ được thực thi khi hàm được gọi. Nhưng, sẽ không có gì xảy ra cho đến khi chúng ta gọi hàm. Nếu chúng ta muốn gọi hàm, chúng ta có thể sử dụng mã này:

printGoogle();

Bây giờ, hãy hợp nhất mã của chúng ta với nhau thành một hàm, sau đó gọi nó:

// Declare the printGoogle() function
function printGoogle() {
	console.log(“Google”);
}

// Invoke the printGoogle() function
printGoogle();

Đầu ra cho chức năng này sẽ là Google . printGoogle() hàm sẽ trả về kết quả khi nó được gọi, ở dòng cuối cùng trong trường hợp này.

Bây giờ mã in của chúng tôi đã ở trong một hàm, chúng tôi có thể thực thi nó nhiều lần tùy thích bằng cách gọi printGoogle() chức năng.

JavaScript Biểu thức hàm

Một cách khác để khai báo một hàm là tạo một biểu thức hàm. Chúng ta có thể làm như vậy bằng cách gán một hàm cho một biến.

Hãy sử dụng ví dụ tương tự như trên. Thay vì tự khai báo hàm, chúng ta có thể gán nó cho một biến. Đây là một ví dụ:

const google = function printGoogle() {
	console.log(“Google”);
}

Để gọi biểu thức này, chúng tôi thêm google() dòng mã đến bất cứ nơi nào chúng ta muốn biểu thức được chạy.

Tham số chức năng

Bây giờ chúng ta đã biết hai cách mà chúng ta có thể khai báo một hàm, chúng ta có thể khám phá cách tùy chỉnh tính năng này của lập trình. Trong đoạn mã trên, chúng tôi đã tạo một hàm in Google vào bảng điều khiển.

Để in một tên khác, chẳng hạn như Facebook, chúng tôi cần thay đổi mã. Nếu chúng tôi muốn người dùng truy cập trang web của chúng tôi nhập tên của công ty yêu thích của họ và in nó ra bảng điều khiển, chức năng của chúng tôi sẽ không hoạt động.

Vì vậy, chúng ta cần tận dụng các tham số. Nếu chúng ta thêm name tham số cho hàm JS của chúng tôi, sau đó chúng tôi có thể in bất kỳ tên nào vào bảng điều khiển thông qua hàm của chúng tôi. Đây là một ví dụ:

function printCompany(name) {
	console.log(`My favorite company is ${name}!`);
}

Tên của hàm là printCompany() và tham số của chúng tôi được gọi là name . Sau đó, tham số có thể được gọi trong hàm JavaScript. Trong ví dụ trên, chúng tôi sử dụng tham số name để thay đổi những gì sẽ được in trên console.log() dòng mã.

Nhưng chúng tôi vẫn chưa xác định tên của mình. Để xác định tham số, chúng ta cần gán cho nó một giá trị khi chúng ta gọi hàm JavaScript của mình. Giả sử công ty yêu thích của bạn là Snapchat. Chúng tôi sẽ gọi hàm và đặt tên công ty làm đối số trong lệnh gọi hàm.

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

// Call printCompany() function with “Snapchat” as “name”
printCompany(“Snapchat”);

Khi chúng tôi chạy mã này, thông tin sau sẽ được in:

My favorite company is Snapchat!

Trong ví dụ của chúng tôi, chúng tôi gọi hàm bằng cách sử dụng printCompany() , sau đó chúng tôi chỉ định tên trong ngoặc đơn. Vì vậy, bây giờ chúng ta có thể sử dụng lại hàm của mình nhiều lần với các tên khác nhau.

Điều đáng chú ý là bạn có thể sử dụng bao nhiêu tham số tùy thích và bạn sẽ tham chiếu chúng theo thứ tự. Chúng tôi sẽ sử dụng một ví dụ cho thấy điều này đang hoạt động dưới đây.

Giá trị trả lại

Trong các ví dụ của chúng tôi cho đến nay, chúng tôi đã không trả về bất kỳ giá trị nào. Thay vào đó, chúng tôi đã in một số văn bản vào bảng điều khiển. Tuy nhiên, với một hàm, chúng ta có thể cung cấp cho nó một số tham số để xử lý, sau đó trả về một giá trị dựa trên những gì có trong return tuyên bố.

Dưới đây là một ví dụ về hàm cộng hai số và cho chúng ta tổng:

function addNumbers(first, second) {
	return first + second;
}

addNumbers(1, 2);

Trong chương trình này, hàm của chúng ta được gọi và hai số được chuyển qua hàm. Khi hàm này được thực thi — ở dòng cuối cùng trong ví dụ trên — chúng tôi sẽ nhận được câu trả lời 3 đổi lại. Danh sách các tham số của chúng tôi được phân tách bằng dấu phẩy.

Chương trình đã thêm 1 và 2, với tên tham số first và second và trả chúng về mã. Nếu muốn xem các giá trị này, chúng ta có thể thêm console.log() chức năng xung quanh dòng mà chúng ta gọi là addNumbers(1, 2) .

Hàm mũi tên

Đối với ECMAScript 6, có một cách ngắn gọn hơn để định nghĩa các hàm được gọi là hàm mũi tên. Chúng được thể hiện bằng cách sử dụng biểu thức sau:=> .

Các hàm này là một loại biểu thức hàm. Hãy sử dụng một ví dụ để giới thiệu các chức năng mũi tên đang hoạt động:

const addNumbers = (first, second) => {
	return first + second;
}

addNumbers(10, 15);

Thay vì viết hàm function , chúng ta có thể sử dụng dấu mũi tên để biểu thị rằng chúng ta đang khai báo một hàm. Có một vài điểm khác biệt nhỏ giữa các hàm mũi tên và các hàm thông thường, nhưng bạn không cần biết về chúng cho hầu hết các trường hợp sử dụng.

Khi bạn chỉ làm việc với một biến, bạn không cần dấu ngoặc đơn xung quanh chúng. Và, nếu bạn không làm việc với bất kỳ biến nào, bạn cần bao gồm một tập hợp các dấu ngoặc đơn trống () nơi các biến của bạn sẽ được khai báo.



Kết luận

Cách sử dụng các hàm JavaScript:Hướng dẫn từng bước

Đó là tất cả những gì bạn cần biết về những điều cơ bản của các hàm. Trong hướng dẫn này, chúng tôi đã đề cập đến các khai báo hàm, biểu thức hàm, trả về giá trị từ các hàm và các hàm mũi tên.

Nhìn chung, một hàm là một khối mã có thể thực hiện một hành động và trả về một biến. Các hàm rất hữu ích nếu bạn có nhiều dòng mã mà bạn có thể cần phải thực thi nhiều lần trong suốt một chương trình.

Thay vì viết nhiều dòng mã đó mỗi khi cần sử dụng, bạn có thể thêm chúng vào một hàm và gọi hàm khi bạn cần chạy mã và chuyển các giá trị bạn cần sử dụng vào hàm của mình.

Dưới đây là một số rút ra chính từ bài viết này:

  • Hàm là các chương trình con được thiết kế để chạy các dòng mã nhất định.
  • Các hàm chỉ được thực thi khi chúng được gọi. Chúng tôi gọi đây là cách gọi một hàm.
  • Các giá trị có thể được chuyển vào các hàm, sau đó được sử dụng trong hàm.
  • Các hàm có thể trả về giá trị.