Làm cách nào để sử dụng hàm trong JavaScript?

Hàm là một nhóm mã có thể tái sử dụng có thể được gọi ở bất kỳ đâu trong chương trình của bạn. Điều này giúp loại bỏ nhu cầu viết đi viết lại cùng một mã. Nó giúp các lập trình viên viết mã mô-đun. Các hàm cho phép lập trình viên chia một chương trình lớn thành một số hàm nhỏ và có thể quản lý được

Giống như bất kỳ ngôn ngữ lập trình nâng cao nào khác, JavaScript cũng hỗ trợ tất cả các tính năng cần thiết để viết mã mô-đun bằng các hàm. Chắc hẳn bạn đã thấy các hàm như alert() và write() trong các chương trước. Chúng tôi đã sử dụng đi sử dụng lại các chức năng này, nhưng chúng chỉ được viết bằng JavaScript lõi một lần

JavaScript cũng cho phép chúng ta viết các hàm của riêng mình. Phần này giải thích cách viết các hàm của riêng bạn trong JavaScript

Định nghĩa hàm

Trước khi sử dụng một hàm, chúng ta cần định nghĩa nó. Cách phổ biến nhất để xác định hàm trong JavaScript là sử dụng từ khóa hàm, theo sau là tên hàm duy nhất, danh sách tham số (có thể trống) và khối câu lệnh được bao quanh bởi dấu ngoặc nhọn

cú pháp

Cú pháp cơ bản được hiển thị ở đây

Ví dụ

Hãy thử ví dụ sau. Nó định nghĩa một hàm gọi là sayHello không có tham số nào -

Gọi một chức năng

Để gọi một hàm ở đâu đó sau này trong tập lệnh, bạn chỉ cần viết tên của hàm đó như được hiển thị trong đoạn mã sau

Click the following button to call the function

Use different text in write method and then try...

đầu ra

Thông số chức năng

Cho đến bây giờ, chúng ta đã thấy các chức năng không có tham số. Nhưng có một cơ sở để truyền các tham số khác nhau trong khi gọi một hàm. Các tham số đã truyền này có thể được ghi lại bên trong hàm và mọi thao tác có thể được thực hiện trên các tham số đó. Một hàm có thể nhận nhiều tham số được phân tách bằng dấu phẩy

Ví dụ

Hãy thử ví dụ sau. Chúng tôi đã sửa đổi chức năng sayHello của mình tại đây. Bây giờ phải mất hai tham số

Click the following button to call the function

Use different parameters inside the function and then try...

đầu ra

Tuyên bố trở lại

Hàm JavaScript có thể có câu lệnh trả về tùy chọn. Điều này là bắt buộc nếu bạn muốn trả về một giá trị từ một hàm. Câu lệnh này phải là câu lệnh cuối cùng trong một hàm

Ví dụ: bạn có thể chuyển hai số vào một hàm và sau đó bạn có thể mong đợi hàm trả về phép nhân của chúng trong chương trình gọi của bạn

Ví dụ

Hãy thử ví dụ sau. Nó định nghĩa một hàm nhận hai tham số và nối chúng trước khi trả về kết quả trong chương trình gọi

Click the following button to call the function

Use different parameters inside the function and then try...

đầu ra

Có rất nhiều điều để tìm hiểu về các hàm JavaScript, tuy nhiên chúng tôi đã đề cập đến các khái niệm quan trọng nhất trong hướng dẫn này

Các hàm JavaScript được sử dụng để thực hiện các thao tác. Chúng ta có thể gọi hàm JavaScript nhiều lần để sử dụng lại mã

Lợi thế của chức năng JavaScript

Có hai ưu điểm chính của các hàm JavaScript

1. khả năng tái sử dụng mã. Chúng ta có thể gọi một chức năng nhiều lần để nó tiết kiệm mã hóa
2. Ít mã hóa hơn. Nó làm cho chương trình của chúng tôi nhỏ gọn. Chúng ta không cần phải viết nhiều dòng mã mỗi lần để thực hiện một tác vụ chung

Cú pháp hàm JavaScript

Cú pháp khai báo hàm được đưa ra dưới đây

Hàm JavaScript có thể có 0 hoặc nhiều đối số

Ví dụ hàm JavaScript

Hãy xem ví dụ đơn giản về hàm trong JavaScript không có đối số

Kiểm tra nó ngay bây giờ

Đầu ra của ví dụ trên

Đối số chức năng JavaScript

Chúng ta có thể gọi hàm bằng cách truyền đối số. Hãy xem ví dụ về hàm có một đối số

Kiểm tra nó ngay bây giờ

Đầu ra của ví dụ trên

Hàm có giá trị trả về

Chúng ta có thể gọi hàm trả về một giá trị và sử dụng nó trong chương trình của mình. Hãy xem ví dụ về hàm trả về giá trị

Kiểm tra nó ngay bây giờ

Đầu ra của ví dụ trên

Đối tượng hàm JavaScript

Trong JavaScript, mục đích của hàm tạo Hàm là tạo một đối tượng Hàm mới. Nó thực thi mã trên toàn cầu. Tuy nhiên, nếu chúng ta gọi trực tiếp hàm tạo, hàm sẽ được tạo động nhưng theo cách không an toàn

Ví dụ: chúng tôi cần hiển thị một thông báo đẹp mắt khi khách đăng nhập, đăng xuất và có thể ở một nơi khác

Hàm là “khối xây dựng” chính của chương trình. Chúng cho phép mã được gọi nhiều lần mà không cần lặp lại

Chúng ta đã thấy các ví dụ về hàm dựng sẵn, như function showMessage() { let message = "Hello, I'm JavaScript!"; // local variable alert( message ); } showMessage(); // Hello, I'm JavaScript! alert( message ); // <-- Error! The variable is local to the function0, function showMessage() { let message = "Hello, I'm JavaScript!"; // local variable alert( message ); } showMessage(); // Hello, I'm JavaScript! alert( message ); // <-- Error! The variable is local to the function1 và function showMessage() { let message = "Hello, I'm JavaScript!"; // local variable alert( message ); } showMessage(); // Hello, I'm JavaScript! alert( message ); // <-- Error! The variable is local to the function2. Nhưng chúng ta cũng có thể tạo các chức năng của riêng mình

Khai báo hàm

Để tạo một hàm chúng ta có thể sử dụng khai báo hàm

Nó trông như thế này

________số 8

Từ khóa function showMessage() { let message = "Hello, I'm JavaScript!"; // local variable alert( message ); } showMessage(); // Hello, I'm JavaScript! alert( message ); // <-- Error! The variable is local to the function3 đi trước, sau đó đến tên của hàm, sau đó là danh sách các tham số giữa các dấu ngoặc đơn (được phân tách bằng dấu phẩy, để trống trong ví dụ trên, chúng ta sẽ xem các ví dụ sau) và cuối cùng là mã của hàm, cũng được đặt tên

0

Chức năng mới của chúng tôi có thể được gọi bằng tên của nó. function showMessage() { let message = "Hello, I'm JavaScript!"; // local variable alert( message ); } showMessage(); // Hello, I'm JavaScript! alert( message ); // <-- Error! The variable is local to the function4

Ví dụ

2

Cuộc gọi function showMessage() { let message = "Hello, I'm JavaScript!"; // local variable alert( message ); } showMessage(); // Hello, I'm JavaScript! alert( message ); // <-- Error! The variable is local to the function4 thực thi mã của chức năng. Ở đây chúng ta sẽ thấy thông báo hai lần

Ví dụ này thể hiện rõ ràng một trong những mục đích chính của hàm. để tránh sao chép mã

Nếu chúng tôi cần thay đổi thông báo hoặc cách hiển thị thông báo, chỉ cần sửa đổi mã ở một nơi là đủ. chức năng xuất ra nó

Biến cục bộ

Một biến được khai báo bên trong một hàm chỉ hiển thị bên trong hàm đó

Ví dụ

function showMessage() { let message = "Hello, I'm JavaScript!"; // local variable alert( message ); } showMessage(); // Hello, I'm JavaScript! alert( message ); // <-- Error! The variable is local to the function

biến bên ngoài

Một chức năng cũng có thể truy cập vào một biến bên ngoài, ví dụ

5

Hàm có toàn quyền truy cập vào biến bên ngoài. Nó cũng có thể sửa đổi nó

Ví dụ

6

Biến bên ngoài chỉ được sử dụng nếu không có biến cục bộ

Nếu một biến cùng tên được khai báo bên trong hàm thì nó sẽ che khuất biến bên ngoài. Chẳng hạn, trong mã bên dưới, hàm sử dụng function showMessage() { let message = "Hello, I'm JavaScript!"; // local variable alert( message ); } showMessage(); // Hello, I'm JavaScript! alert( message ); // <-- Error! The variable is local to the function6 cục bộ. Cái bên ngoài bị bỏ qua

8

biến toàn cầu

Các biến được khai báo bên ngoài bất kỳ chức năng nào, chẳng hạn như bên ngoài function showMessage() { let message = "Hello, I'm JavaScript!"; // local variable alert( message ); } showMessage(); // Hello, I'm JavaScript! alert( message ); // <-- Error! The variable is local to the function6 trong đoạn mã trên, được gọi là toàn cục

Các biến toàn cục có thể nhìn thấy từ bất kỳ chức năng nào (trừ khi bị che khuất bởi người dân địa phương)

Đó là một cách thực hành tốt để giảm thiểu việc sử dụng các biến toàn cầu. Mã hiện đại có ít hoặc không có toàn cầu. Hầu hết các biến nằm trong các hàm của chúng. Tuy nhiên, đôi khi, chúng có thể hữu ích để lưu trữ dữ liệu cấp dự án

Thông số

Chúng ta có thể truyền dữ liệu tùy ý cho các hàm bằng cách sử dụng các tham số

Trong ví dụ bên dưới, hàm có hai tham số. function showMessage() { let message = "Hello, I'm JavaScript!"; // local variable alert( message ); } showMessage(); // Hello, I'm JavaScript! alert( message ); // <-- Error! The variable is local to the function8 và function showMessage() { let message = "Hello, I'm JavaScript!"; // local variable alert( message ); } showMessage(); // Hello, I'm JavaScript! alert( message ); // <-- Error! The variable is local to the function9

Click the following button to call the function

Use different text in write method and then try...

2

Khi hàm được gọi ở các dòng 50 và 51, các giá trị đã cho sẽ được sao chép vào các biến cục bộ function showMessage() { let message = "Hello, I'm JavaScript!"; // local variable alert( message ); } showMessage(); // Hello, I'm JavaScript! alert( message ); // <-- Error! The variable is local to the function8 và function showMessage() { let message = "Hello, I'm JavaScript!"; // local variable alert( message ); } showMessage(); // Hello, I'm JavaScript! alert( message ); // <-- Error! The variable is local to the function9. Sau đó, chức năng sử dụng chúng

Đây là một ví dụ nữa. chúng ta có một biến function showMessage() { let message = "Hello, I'm JavaScript!"; // local variable alert( message ); } showMessage(); // Hello, I'm JavaScript! alert( message ); // <-- Error! The variable is local to the function8 và truyền nó cho hàm. Xin lưu ý. chức năng thay đổi function showMessage() { let message = "Hello, I'm JavaScript!"; // local variable alert( message ); } showMessage(); // Hello, I'm JavaScript! alert( message ); // <-- Error! The variable is local to the function8, nhưng sự thay đổi không được nhìn thấy bên ngoài, bởi vì một chức năng luôn nhận được một bản sao của giá trị

Click the following button to call the function

Use different text in write method and then try...

9

Khi một giá trị được truyền dưới dạng tham số hàm, nó còn được gọi là đối số

Nói cách khác, để đặt các điều khoản này thẳng

• Tham số là biến được liệt kê bên trong dấu ngoặc đơn trong phần khai báo hàm (đó là thuật ngữ thời gian khai báo)
• Đối số là giá trị được truyền cho hàm khi nó được gọi (đó là thuật ngữ thời gian gọi)

Chúng tôi khai báo các hàm liệt kê các tham số của chúng, sau đó gọi chúng là các đối số truyền

Trong ví dụ trên, người ta có thể nói. "hàm 56 được khai báo với hai tham số, sau đó được gọi với hai đối số. function showMessage() { let message = "Hello, I'm JavaScript!"; // local variable alert( message ); } showMessage(); // Hello, I'm JavaScript! alert( message ); // <-- Error! The variable is local to the function8 và 58"

Giá trị mặc định

Nếu một hàm được gọi, nhưng không cung cấp đối số, thì giá trị tương ứng sẽ trở thành 59

Chẳng hạn, hàm 60 đã nói ở trên có thể được gọi bằng một đối số duy nhất

Click the following button to call the function

Use different parameters inside the function and then try...

5

Đó không phải là lỗi. Một cuộc gọi như vậy sẽ xuất ra 61. Vì giá trị của function showMessage() { let message = "Hello, I'm JavaScript!"; // local variable alert( message ); } showMessage(); // Hello, I'm JavaScript! alert( message ); // <-- Error! The variable is local to the function9 không được chuyển, nó sẽ trở thành 59

Chúng ta có thể chỉ định cái gọi là giá trị “mặc định” (để sử dụng nếu bị bỏ qua) cho một tham số trong khai báo hàm, sử dụng 64

00

Lúc này nếu không truyền tham số function showMessage() { let message = "Hello, I'm JavaScript!"; // local variable alert( message ); } showMessage(); // Hello, I'm JavaScript! alert( message ); // <-- Error! The variable is local to the function9 thì nó sẽ nhận giá trị là 66

Giá trị mặc định cũng nhảy vào nếu tham số tồn tại, nhưng hoàn toàn bằng 59, như thế này

01

Ở đây 66 là một chuỗi, nhưng nó có thể là một biểu thức phức tạp hơn, chỉ được đánh giá và gán nếu thiếu tham số. Vì vậy, điều này cũng có thể

02

Đánh giá các tham số mặc định

Trong JavaScript, một tham số mặc định được đánh giá mỗi khi hàm được gọi mà không có tham số tương ứng

Trong ví dụ trên, 69 hoàn toàn không được gọi nếu tham số function showMessage() { let message = "Hello, I'm JavaScript!"; // local variable alert( message ); } showMessage(); // Hello, I'm JavaScript! alert( message ); // <-- Error! The variable is local to the function9 được cung cấp

Mặt khác, nó được gọi độc lập mỗi khi thiếu function showMessage() { let message = "Hello, I'm JavaScript!"; // local variable alert( message ); } showMessage(); // Hello, I'm JavaScript! alert( message ); // <-- Error! The variable is local to the function9

Tham số mặc định trong mã JavaScript cũ

Vài năm trước, JavaScript không hỗ trợ cú pháp cho các tham số mặc định. Vì vậy, mọi người đã sử dụng những cách khác để chỉ định chúng

Ngày nay, chúng ta có thể bắt gặp chúng trong các chữ viết cũ

Ví dụ: kiểm tra rõ ràng cho 59

03

…Hoặc sử dụng toán tử 83

04

Thông số mặc định thay thế

Đôi khi, việc gán các giá trị mặc định cho các tham số ở giai đoạn sau sau khi khai báo hàm là hợp lý

Chúng ta có thể kiểm tra xem tham số có được truyền vào trong quá trình thực thi hàm hay không bằng cách so sánh nó với 59

05

…Hoặc chúng ta có thể sử dụng toán tử 83

06

Các công cụ JavaScript hiện đại hỗ trợ toán tử kết hợp nullish 86, sẽ tốt hơn khi hầu hết các giá trị giả, chẳng hạn như 87, nên được coi là "bình thường"

07

Trả về một giá trị

Kết quả là một hàm có thể trả lại một giá trị vào mã gọi

Ví dụ đơn giản nhất sẽ là một hàm tính tổng hai giá trị

08

Chỉ thị 88 có thể ở bất kỳ vị trí nào của chức năng. Khi thực thi đạt đến mức đó, hàm sẽ dừng và giá trị được trả về mã gọi (được gán cho 89 ở trên)

Có thể có nhiều lần xuất hiện của 88 trong một chức năng. Ví dụ

09

Có thể sử dụng 88 mà không cần giá trị. Điều đó khiến chức năng thoát ngay lập tức

Ví dụ

20

Trong đoạn mã trên, nếu

Click the following button to call the function

Use different text in write method and then try...

22 trả về

Click the following button to call the function

Use different text in write method and then try...

23, thì

Click the following button to call the function

Use different text in write method and then try...

24 sẽ không tiếp tục với

Click the following button to call the function

Use different text in write method and then try...

25

Hàm có giá trị trống 88 hoặc không có giá trị trả về 59

Nếu một hàm không trả về giá trị, nó giống như khi nó trả về 59

21

Một 88 trống cũng giống như

Click the following button to call the function

Use different text in write method and then try...

90

22

Không bao giờ thêm một dòng mới giữa 88 và giá trị

Đối với một biểu thức dài trong 88, có thể bạn nên đặt nó trên một dòng riêng, như thế này

23

Điều đó không hiệu quả, bởi vì JavaScript giả định một dấu chấm phẩy sau 88. Điều đó sẽ hoạt động giống như

24

Vì vậy, nó thực sự trở thành một khoản hoàn trả trống

Nếu chúng ta muốn biểu thức được trả về ngắt dòng trên nhiều dòng, chúng ta nên bắt đầu nó ở cùng một dòng với 88. Hoặc ít nhất là đặt dấu ngoặc đơn mở ở đó như sau

25

Và nó sẽ hoạt động đúng như chúng ta mong đợi

Đặt tên cho một chức năng

Chức năng là hành động. Vì vậy, tên của họ thường là một động từ. Nó phải ngắn gọn, càng chính xác càng tốt và mô tả những gì chức năng làm, để ai đó đọc mã sẽ nhận được dấu hiệu về những gì chức năng làm

Đó là một thực tế phổ biến để bắt đầu một chức năng với tiền tố bằng lời mô tả một cách mơ hồ hành động. Phải có một thỏa thuận trong nhóm về ý nghĩa của các tiền tố

Chẳng hạn, các hàm bắt đầu bằng

Click the following button to call the function

Use different text in write method and then try...

95 thường hiển thị nội dung nào đó

Hàm bắt đầu bằng…

• Click the following button to call the function

  Use different text in write method and then try...

  96 – trả về một giá trị,

• Click the following button to call the function

  Use different text in write method and then try...

  97 – tính toán gì đó,

• Click the following button to call the function

  Use different text in write method and then try...

  98 – tạo ra thứ gì đó,

• Click the following button to call the function

  Use different text in write method and then try...

  99 – kiểm tra thứ gì đó và trả về giá trị boolean, v.v.

Ví dụ về những cái tên như vậy

26

Với các tiền tố sẵn có, chỉ cần nhìn lướt qua tên hàm là bạn có thể hiểu loại công việc của nó và loại giá trị mà nó trả về

Một chức năng – một hành động

Một chức năng nên thực hiện chính xác những gì được đề xuất bởi tên của nó, không hơn

Hai hành động độc lập thường xứng đáng với hai hàm, ngay cả khi chúng thường được gọi cùng nhau (trong trường hợp đó, chúng ta có thể tạo hàm thứ 3 gọi hai hàm đó)

Một vài ví dụ về việc phá vỡ quy tắc này

• Click the following button to call the function

  Use different parameters inside the function and then try...

  50 – sẽ rất tệ nếu nó hiển thị

  Click the following button to call the function

  Use different text in write method and then try...

  25 cùng với tuổi (chỉ nên lấy)

• Click the following button to call the function

  Use different parameters inside the function and then try...

  52 – sẽ rất tệ nếu nó sửa đổi tài liệu, thêm biểu mẫu vào tài liệu (chỉ nên tạo và trả lại)

• Click the following button to call the function

  Use different parameters inside the function and then try...

  53 – sẽ rất tệ nếu nó hiển thị thông báo

  Click the following button to call the function

  Use different parameters inside the function and then try...

  54 (chỉ nên thực hiện kiểm tra và trả về kết quả)

Những ví dụ này giả định ý nghĩa phổ biến của tiền tố. Bạn và nhóm của bạn có thể tự do đồng ý về các ý nghĩa khác, nhưng thường thì chúng không khác nhau nhiều. Trong bất kỳ trường hợp nào, bạn nên hiểu rõ tiền tố nghĩa là gì, chức năng tiền tố có thể và không thể làm gì. Tất cả các hàm có tiền tố giống nhau phải tuân theo các quy tắc. Và nhóm nên chia sẻ kiến ​​thức

Tên chức năng siêu ngắn

Các chức năng được sử dụng rất thường xuyên đôi khi có tên siêu ngắn

Ví dụ: khung công tác jQuery định nghĩa một hàm với

Click the following button to call the function

Use different parameters inside the function and then try...

55. Thư viện Lodash có chức năng cốt lõi tên là

Click the following button to call the function

Use different parameters inside the function and then try...

56

Đây là những trường hợp ngoại lệ. Nói chung tên chức năng phải ngắn gọn và mô tả

Chức năng == Nhận xét

Các chức năng phải ngắn gọn và thực hiện chính xác một việc. Nếu thứ đó lớn, có lẽ nên chia chức năng thành một vài chức năng nhỏ hơn. Đôi khi tuân theo quy tắc này có thể không dễ dàng, nhưng đó chắc chắn là một điều tốt

Một chức năng riêng biệt không chỉ dễ kiểm tra và gỡ lỗi hơn – chính sự tồn tại của nó là một nhận xét tuyệt vời

Chẳng hạn, so sánh hai hàm

Click the following button to call the function

Use different parameters inside the function and then try...

57 bên dưới. Mỗi cái xuất ra các số nguyên tố lên tới

Click the following button to call the function

Use different parameters inside the function and then try...

58

Biến thể đầu tiên sử dụng nhãn

27

Biến thể thứ hai sử dụng hàm bổ sung

Click the following button to call the function

Use different parameters inside the function and then try...

59 để kiểm tra tính nguyên tố

28

Biến thể thứ hai dễ hiểu hơn phải không? . Đôi khi mọi người coi mã như vậy là tự mô tả

Vì vậy, các chức năng có thể được tạo ngay cả khi chúng tôi không có ý định sử dụng lại chúng. Họ cấu trúc mã và làm cho mã có thể đọc được

Tóm lược

Một khai báo chức năng trông như thế này

29

• Các giá trị được chuyển đến một hàm dưới dạng các tham số được sao chép vào các biến cục bộ của nó
• Một chức năng có thể truy cập các biến bên ngoài. Nhưng nó chỉ hoạt động từ trong ra ngoài. Mã bên ngoài chức năng không nhìn thấy các biến cục bộ của nó
• Một hàm có thể trả về một giá trị. Nếu không, thì kết quả của nó là 59

Để làm cho mã rõ ràng và dễ hiểu, bạn nên sử dụng chủ yếu các biến cục bộ và tham số trong hàm, không phải các biến bên ngoài

Việc hiểu một hàm nhận tham số, làm việc với chúng và trả về kết quả luôn dễ dàng hơn một hàm không nhận tham số, nhưng sửa đổi các biến bên ngoài như một tác dụng phụ

đặt tên hàm

• Một cái tên nên mô tả rõ ràng những gì chức năng làm. Khi chúng ta thấy một lời gọi hàm trong mã, một cái tên hay sẽ ngay lập tức cho chúng ta hiểu nó làm gì và trả về
• Một chức năng là một hành động, vì vậy tên chức năng thường bằng lời nói
• Có nhiều tiền tố chức năng nổi tiếng như 002, 003, 004, 005, v.v. Sử dụng chúng để gợi ý những gì một chức năng làm

Hàm là khối xây dựng chính của tập lệnh. Bây giờ chúng tôi đã đề cập đến những điều cơ bản, vì vậy chúng tôi thực sự có thể bắt đầu tạo và sử dụng chúng. Nhưng đó mới chỉ là khởi đầu của con đường. Chúng tôi sẽ quay lại với chúng nhiều lần, đi sâu hơn vào các tính năng nâng cao của chúng

Làm cách nào để chạy một hàm trong JavaScript?

Hàm () )() trong JavaScript là gì?

Làm cách nào để đặt một hàm trong một hàm JavaScript?

Chức năng trong JavaScript với ví dụ là gì?