JavaScript là một yếu tố không thể thiếu trong cấu trúc chương trình.
Các hàm làm cho chương trình rõ ràng và dễ hiểu hơn bằng cách bao gồm mã lặp lại. Điều này làm cho việc bảo trì phần mềm dễ dàng hơn.
Hơn nữa, một chức năng tốt (độc lập và thực hiện một chức năng cụ thể) có thể được sử dụng lại trong nhiều dự án khác nhau. Điều này giúp cải thiện năng suất của lập trình viên.
Trong bài viết về tương tác với người dùng: alert, xác nhận và nhắc Bạn đã tìm hiểu về các hàm có sẵn, chẳng hạn như: alert (), xác nhận () và prompt ().
Dưới đây, tôi sẽ giới thiệu các khối xây dựng cơ bản của các hàm trong javascript. Thông qua đó, bạn sẽ hiểu chức năng là gì, cách xây dựng nó và áp dụng nó vào dự án của bạn.
Hàm là gì?
Một hàm trong javascript là một chương trình con thực hiện một công việc cụ thể. Để xác định một hàm trong javascript, hãy sử dụng từ khóa hàm với cú pháp sau:
Vị trí:
Hàm
- : là từ khóa dùng để định nghĩa một hàm trong javascript.
- tên hàm : là tên của hàm (tên tùy chỉnh).
- ([tham số1], [tham số2], …): Danh sách các tham số của hàm (tùy chọn).
- Cuối cùng là phần thân hàm , chứa một hoặc nhiều câu lệnh trong dấu ngoặc vuông {}.
Ví dụ về hàm sayhello ():
Để gọi một hàm, hãy sử dụng tên hàm:
Khi một hàm được gọi, mã bên trong thân hàm sẽ được thực thi. Trong ví dụ trên, mã console.log được thực thi hai lần (cho hai lệnh gọi hàm).
Bạn có thể thấy rằng chức năng này giúp tránh trùng lặp mã. Giả sử bạn cần thay đổi điều gì đó bằng cách sử dụng console.log ở trên, bạn chỉ cần ở một nơi (bên trong thân hàm) để thực hiện thay đổi.
Đến đây, chắc hẳn bạn đã biết hàm là gì rồi phải không? Sau đây, mình sẽ giới thiệu chi tiết về đặc điểm của các hàm trong javascript.
Biến cục bộ trong hàm
Các biến được khai báo bên trong một hàm chỉ có thể được sử dụng trong thân hàm. Biến này được gọi là biến cục bộ (hoặc biến cục bộ ).
Ví dụ về các biến cục bộ trong javascript:
Trong ví dụ trên, biến thông báo là một biến cục bộ bên trong hàm sayhello. Nghĩa là, biến thông báo chỉ có thể được sử dụng trong phần thân của hàm sayhello.
Khi bạn cố gắng truy cập vào biến thông báo bên ngoài hàm, bạn sẽ gặp lỗi uncaught referenceerror: message is not xác định .
Các biến bên ngoài trong javascript
Các hàm trong javascript có thể truy cập các biến được khai báo bên ngoài hàm, ví dụ:
Ngoài ra, bạn có thể thay đổi giá trị của các biến bên ngoài hàm bên trong thân hàm:
Tuy nhiên, nếu một biến trùng tên với một biến bên ngoài hàm được khai báo bên trong thân hàm thì biến bên ngoài hàm sẽ bị “bỏ qua”:
📝 Biến toàn cục
Các biến được khai báo bên ngoài tất cả các hàm được gọi là biến toàn cục .
Các biến toàn cục có thể được sử dụng và thay đổi ở bất kỳ đâu trong chương trình. Vì vậy bạn nên hạn chế sử dụng biến toàn cục.
Điều này làm cho hàm đẹp hơn và dễ sử dụng lại (vì nó độc lập với các biến bên ngoài).
Chuyển các tham số cho các hàm
Nếu bạn muốn sử dụng giá trị của một biến bên ngoài trong nội dung hàm, bạn có thể truyền tham số cho hàm (thay vì sử dụng một biến toàn cục).
Ví dụ về cách chuyển các tham số cho các hàm:
Khi sayhello được gọi, giá trị chuỗi được sao chép vào thông báo biến cục bộ. Biến cục bộ này sẽ được sử dụng trong thân hàm.
Lưu ý : Khi truyền tham số cho hàm (ngoại trừ đối tượng là kiểu dữ liệu tham chiếu), các hàm trong javascript luôn sao chép dữ liệu mà không thay đổi giá trị của biến bên trong.
Ví dụ:
Bạn thấy rằng hàm đã gán hi! cho biến thông báo. Nhưng giá trị của biến thông báo bên ngoài vẫn không thay đổi.
📝Số lượng tham số hàm là không giới hạn.
Ví dụ về hàm có nhiều tham số:
Giá trị tham số mặc định
Đối với một hàm có tham số, không có giá trị nào được truyền khi gọi hàm, giá trị của tham số không được xác định, ví dụ:
Trong trường hợp này, bạn có thể sử dụng toán tử gán = để xác định “giá trị mặc định” cho tham số, như sau:
Bây giờ, nếu bạn không chuyển một giá trị cho tham số trang web, thì giá trị của nó sẽ được mặc định là completejavascript.com.
Trong ví dụ trên, giá trị mặc định chỉ là một giá trị chuỗi. Tuy nhiên, giá trị mặc định có thể là biểu thức hoặc thậm chí là hàm khác, ví dụ:
Trong ví dụ trên, hàm () chỉ được gọi khi bạn không chuyển một giá trị cho tham số site.
Có thể bạn quan tâm: Làm thế nào để buộc một tham số được truyền cho một hàm?
trả về trong javascript
Một hàm trong javascript có thể trả về giá trị khi hàm được gọi.
Ví dụ về hàm để cộng hai số:
Từ khóa return trong javascript có thể được đặt ở bất kỳ vị trí nào trong thân hàm. Khi gặp từ khóa return, hàm sẽ dừng và trả về giá trị sau khi return.
Nhiều từ khóa trả lại có thể được sử dụng trong một hàm:
Đối với ví dụ trên, tôi đã kiểm tra các điều kiện của a và b. Nếu chúng là null hoặc không xác định, nó sẽ trả về mà không cần thực hiện phép tính tổng.
Bạn cũng thấy rằng không có giá trị nào sau hai vị trí trả về đầu tiên. Khi đó giá trị trả về mặc định là không xác định:
Ngoài ra, nếu hàm không có giá trị trả về, thì giá trị trả về cũng không được xác định:
Lưu ý : Không có dòng mới sau khi quay lại. Vì javascript sẽ hiểu rằng bạn không trả về bất kỳ giá trị nào.
Ví dụ:
Trình thông dịch javascript sẽ tự động thêm; khi trả lại. Do đó, giá trị trả về của hàm trên là không xác định. Và thành phần a + b bên dưới sẽ không bao giờ chạy tới.
Nếu bắt buộc phải có dòng mới, giá trị trả về phải được đặt trong dấu ngoặc đơn (), như sau:
Cách đặt tên các hàm trong javascript
Các quy tắc đặt tên cho các hàm trong javascript cũng giống như các biến hoặc hằng số trong javascript:
- Bắt đầu bằng một chữ cái, dấu gạch dưới (_) hoặc “đô la” ($).
- Sau ký tự đầu tiên, ngoài các ký tự trên, có thể sử dụng thêm các số (0-9).
- Không sử dụng từ khóa và các từ dành riêng.
Đặt tên hàm được chuẩn hóa
Vì một hàm tương ứng với một hành động, tên hàm chuẩn thường bắt đầu bằng động từ .
Một số ví dụ về các động từ phổ biến được sử dụng để đặt tên cho các chức năng:
- get … – Trả về một giá trị.
- set … – gán giá trị cho một biến.
- kiểm tra … – Kiểm tra và trả về giá trị boolean.
- display … – hiển thị thứ gì đó.
- …
Tất nhiên, javascript không yêu cầu bạn đặt tên theo cách đó. Bạn chỉ cần đặt tên cho nó một cách chính xác theo các quy tắc trên.
Nhưng rõ ràng nếu bạn đặt tên chính xác, đồng nghiệp hoặc chính bạn sẽ dễ dàng hiểu ý nghĩa của từng chức năng khi đọc mã.
Tạo hàm trong chương trình
Khi lập trình, thường có hai trường hợp bạn cần viết hàm:
- Một phân đoạn chương trình được lặp đi lặp lại. Nhóm chúng thành một hàm sẽ làm cho chương trình ngắn hơn và dễ hiểu hơn. Và khi cần thay đổi, bạn chỉ cần chỉnh sửa một lần trong phần thân hàm thay vì chỉnh sửa nhiều nơi.
- Bạn cần chia toàn bộ chương trình thành các phần nhỏ hơn. Còn được gọi là mô-đun . Bây giờ bạn có thể xây dựng logic cho toàn bộ chương trình trước khi thực sự xác định nội dung của từng hàm. Cách tiếp cận này được gọi là “từ trên xuống”.
Đối với các dự án lớn, mỗi thành viên thường chỉ được phép làm các mô-đun nhỏ trong toàn bộ dự án lớn.
Sau đó, khi các mô-đun nhỏ được hoàn thành, một người nào đó sẽ lắp ráp các mô-đun nhỏ này thành một chương trình hoàn chỉnh.
Do đó, việc phân chia chương trình thành các hàm tốt là cực kỳ quan trọng.
Tính năng tốt là gì?
Đây là một câu hỏi khó trả lời. Theo tôi, một chức năng tốt là một chức năng thỏa mãn các điều kiện sau:
- Một hàm chỉ thực hiện một chức năng
- Không phụ thuộc vào các yếu tố bên ngoài (biến toàn cục, môi trường thực thi …)
- Dễ sử dụng lại
- ul>
Tuy nhiên, không phải lúc nào bạn cũng đáp ứng được các yêu cầu trên. hoặc có thể không nhất thiết phải đáp ứng tất cả các yêu cầu trên.
Chức năng thuần túy và không tinh khiết
Nói chung, có hai loại hàm trong javascript: hàm pure và hàm impure (hàm không tinh khiết).
Hàm thuần túy là hàm không phụ thuộc vào các yếu tố bên ngoài (biến toàn cục, môi trường thực thi …). Bất cứ khi nào bạn gọi một hàm thuần túy với các đối số giống nhau, kết quả luôn giống nhau.
Vì vậy, các hàm thuần túy rất dễ sử dụng, tái sử dụng hoặc bảo trì, … theo tôi, các hàm thuần túy là một hàm tốt.
Ví dụ về hàm thuần túy:
Bạn thấy đấy, đối với các giá trị đầu vào giống nhau là 2 và 10, kết quả luôn là 20. Vì vậy, hàm trên là một hàm thuần túy .
Ngược lại với các hàm thuần túy, hàm không tinh khiết là các hàm phụ thuộc vào các biến toàn cục hoặc môi trường thực thi.
Vì vậy, khi bạn gọi cùng một hàm với các tham số giống nhau, kết quả có thể khác nhau.
Rõ ràng, các hàm nonpurefunc không phải là các hàm thuần túy. Vì hàm này phụ thuộc vào một yếu tố biến ngoài hàm.
có nghĩa là khi giá trị của biến nhân tố thay đổi, giá trị trả về của hàm cũng thay đổi (ngay cả khi cùng một giá trị được truyền là 2).
Tóm tắt
Vậy một hàm là gì?
Một hàm trong javascript là một chương trình con thực hiện một công việc cụ thể bằng cách sử dụng cú pháp sau:
Vị trí:
- Các đối số được truyền cho hàm được sao chép vào một biến cục bộ bên trong hàm.
- Nếu không có giá trị nào được chuyển, giá trị của tham số là không xác định. Giá trị mặc định có thể được khai báo cho các tham số trong một hàm bằng cách sử dụng toán tử =.
- Các biến cục bộ được khai báo bên trong một hàm chỉ có thể được sử dụng trong phần thân của hàm. Mã bên ngoài không thể truy cập các biến cục bộ bên trong một hàm.
- Các hàm có thể đọc và cập nhật giá trị của các biến bên ngoài hàm. Nhưng khi một biến trùng tên với một biến bên ngoài hàm được khai báo bên trong hàm thì biến bên ngoài hàm sẽ bị “bỏ qua”.
- Một hàm có thể sử dụng từ khóa trả về để trả về giá trị. Có thể có nhiều từ khóa trả về trong thân hàm. Khi gặp từ khóa return, hàm sẽ dừng ngay lập tức và trả về giá trị sau khi return.
- Nếu trả về không có giá trị, biểu thức, … hoặc không có từ khóa trả về, thì hàm giá trị trả về không được xác định.
Các quy tắc đặt tên cho các hàm cũng giống như các biến và hằng số. Và tên hàm nên bắt đầu bằng một động từ.
Thích viết các hàm thuần túy để dễ sử dụng lại, dễ kiểm tra và tránh lỗi.
Bài tập
Bản nhạc 1
Viết một hàm trả về số nhỏ nhất trong hai số (giả sử rằng luôn luôn là một số được chuyển qua).
Bản nhạc 2
Viết một hàm để kiểm tra xem một số có phải là số nguyên tố hay không. Trả về true nếu số nguyên tố. Nếu không, trả về false.