Nội dung
- Xác định một chức năng - Tham số chức năng - Trả lại giá trị - Biểu thức hàm - Hàm mũi tên - Kết luận

Thứ hai, 09/10/2017 | 00:00 GMT+7

Cách xác định các hàm trong JavaScript

Hàm là một khối mã thực hiện một hành động hoặc trả về một giá trị. Các hàm là mã tùy chỉnh được xác định bởi các lập trình viên có thể sử dụng lại và do đó có thể làm cho các chương trình của bạn trở nên module và hiệu quả hơn.

Trong hướng dẫn này, ta sẽ tìm hiểu một số cách để định nghĩa một hàm, gọi một hàm và sử dụng các tham số hàm trong JavaScript.

Xác định một chức năng

Các hàm được định nghĩa hoặc khai báo bằng từ khóa function . Dưới đây là cú pháp cho một hàm trong JavaScript.

function nameOfFunction() {     // Code to be executed }

Phần khai báo bắt đầu bằng từ khóa function , theo sau là tên của hàm. Tên hàm tuân theo các luật tương tự như biến - chúng có thể chứa các chữ cái, số, dấu gạch dưới và dấu đô la, và thường được viết bằng chữ hoa camel . Tên được theo sau bởi một tập hợp các dấu ngoặc đơn, được dùng cho các tham số tùy chọn. Mã của hàm được chứa trong dấu ngoặc nhọn, giống nhưcâu lệnh for hoặc câu lệnh if .

Trong ví dụ đầu tiên của ta , ta sẽ thực hiện một khai báo hàm để in câu chào mừng vào console .

// Initialize greeting function function greet() {     console.log("Hello, World!"); }

Ở đây ta có mã để in Hello, World! vào console có bên trong hàm greet() . Tuy nhiên, sẽ không có gì xảy ra và không có mã nào thực thi cho đến khi ta gọi hoặc gọi hàm. Bạn có thể gọi một hàm bằng cách viết tên của hàm theo sau bởi dấu ngoặc đơn.

// Invoke the function greet();

Bây giờ ta sẽ đặt chúng lại với nhau, xác định chức năng của ta và gọi nó.

hello.js

// Initialize greeting function function greet() {     console.log("Hello, World!"); }  // Invoke the function greet();

Với lời gọi greet(); , hàm sẽ chạy và ta sẽ nhận được Hello, World! là kết quả của chương trình.

Output
Hello, World!

Bây giờ ta có mã greet() chứa trong một hàm và có thể sử dụng lại nó nhiều lần nếu ta muốn.

Sử dụng các tham số, ta có thể làm cho mã năng động hơn.

Tham số chức năng

Trong file greet.js của ta , ta đã tạo một hàm cơ bản in Hello, World ra console . Sử dụng các tham số, ta có thể thêm chức năng bổ sung để làm cho mã linh hoạt hơn. Tham số là đầu vào được chuyển vào các hàm dưới dạng tên và hoạt động như các biến local .

Khi user đăng nhập vào một ứng dụng, ta có thể cần chương trình chào đón họ bằng tên, thay vì chỉ nói, “Xin chào, Thế giới!”.

Ta sẽ thêm một tham số vào hàm của ta , được gọi là name , để đại diện cho tên của người được chào.

// Initialize custom greeting function function greet(name) {     console.log(`Hello, ${name}!`); }

Tên của hàm là greet , và bây giờ ta có một tham số duy nhất bên trong dấu ngoặc đơn. Tên của tham số tuân theo các luật tương tự như đặt tên một biến. Bên trong hàm, thay vì một chuỗi tĩnh bao gồm Hello, World , ta có một chuỗi ký tự mẫu chứa tham số của ta , hiện đang hoạt động như một biến local .

Bạn sẽ nhận thấy ta chưa xác định thông số name của name bất kỳ đâu. Ta gán cho nó một giá trị khi ta gọi hàm của bạn . Giả sử user của ta có tên là Sammy, ta sẽ gọi hàm và đặt tên user làm đối số . Đối số là giá trị thực được truyền vào hàm, trong trường hợp này nó là chuỗi "Sammy" .

// Invoke greet function with "Sammy" as the argument greet("Sammy");

Giá trị của "Sammy" đang được truyền vào hàm thông qua tham số name . Bây giờ mỗi khi name được sử dụng trong toàn bộ hàm, nó sẽ đại diện cho giá trị "Sammy" . Đây là toàn bộ mã.

helloSammy.js

// Initialize custom greeting function function greet(name) {     console.log(`Hello, ${name}!`); }  // Invoke greet function with "Sammy" as the argument greet("Sammy");

Khi ta chạy chương trình trên, ta sẽ nhận được kết quả sau.

Output
Hello, Sammy!

Bây giờ ta có một ví dụ về cách một hàm được dùng lại. Trong một ví dụ thực tế, hàm sẽ lấy tên user từ database thay vì cung cấp trực tiếp tên dưới dạng giá trị đối số.

Ngoài các tham số, các biến có thể được khai báo bên trong các hàm. Các biến này được gọi là biến local và sẽ chỉ tồn tại bên trong phạm vi của khối chức năng của riêng chúng. Phạm vi biến xác định khả năng truy cập của biến; Các biến được định nghĩa bên trong một hàm không thể truy cập được từ bên ngoài hàm, nhưng chúng được dùng nhiều lần khi hàm của chúng được sử dụng trong suốt một chương trình.

Trả lại giá trị

Có thể sử dụng nhiều hơn một tham số trong một hàm. Ta có thể chuyển nhiều giá trị vào một hàm và trả về một giá trị. Ta sẽ tạo một hàm để tìm tổng của hai giá trị, được biểu diễn bởi x và y .

sum.js

// Initialize add function function add(x, y) {     return x + y; }  // Invoke function to find the sum add(9, 7);

Trong chương trình trên, ta đã định nghĩa một hàm với các tham số x và y , sau đó chuyển các giá trị của 9 và 7 cho hàm. Khi ta chạy chương trình, ta sẽ nhận được tổng các số đó làm kết quả .

Output
16

Trong trường hợp này, với 9 và 7 được chuyển đến hàm sum() , chương trình trả về 16 .

Khi từ khóa return được sử dụng, hàm sẽ ngừng thực thi và giá trị của biểu thức được trả về. Mặc dù trong trường hợp này, trình duyệt sẽ hiển thị giá trị trong console , nhưng nó không giống như việc sử dụng console.log() để in ra console . Việc gọi hàm sẽ xuất ra giá trị chính xác mà hàm đã được gọi. Giá trị này được dùng ngay lập tức hoặc được đặt vào một biến.

Biểu thức hàm

Trong phần trước, ta đã sử dụng một khai báo hàm để lấy tổng của hai số và trả về giá trị đó. Ta cũng có thể tạo một biểu thức hàm bằng cách gán một hàm cho một biến.

Sử dụng cùng một ví dụ về hàm add , ta có thể áp dụng trực tiếp giá trị trả về cho một biến, trong trường hợp này là sum .

functionExpression.js

// Assign add function to sum constant const sum = function add(x, y) {     return x + y; }  // Invoke function to find the sum sum(20, 5);

Output
25

Bây giờ hằng sum là một hàm. Ta có thể làm cho biểu thức này ngắn gọn hơn bằng cách chuyển nó thành một hàm ẩn danh , đó là một hàm không tên. Hiện tại, hàm của ta có add tên, nhưng với các biểu thức hàm thì không cần đặt tên cho hàm và tên thường được bỏ qua.

nặc danhExpression.js

// Assign function to sum constant const sum = function(x, y) {     return x + y; }  // Invoke function to find the sum sum(100, 3);

Output
103

Trong ví dụ này, ta đã xóa tên của hàm, đã được add và biến nó thành một hàm ẩn danh. Một biểu thức hàm được đặt tên được dùng để hỗ trợ gỡ lỗi, nhưng nó thường bị bỏ qua.

Hàm mũi tên

Lúc này, ta đã xem qua cách xác định hàm bằng từ khóa function . Tuy nhiên, có một phương pháp mới hơn, ngắn gọn hơn để xác định một hàm được gọi là các biểu thức hàm mũi tên kể từ ECMAScript 6 . Các hàm mũi tên, như chúng thường được biết đến, được biểu diễn bằng dấu bằng theo sau là dấu lớn hơn: => .

Hàm mũi tên luôn là hàm ẩn danh và là một loại biểu thức hàm. Ta có thể tạo một ví dụ cơ bản để tìm tích của hai số.

arrowFunction.js

// Define multiply function const multiply = (x, y) => {     return x * y; }  // Invoke function to find product multiply(30, 4);

Output
120

Thay vì viết ra từ khóa function , ta sử dụng mũi tên => để chỉ ra một chức năng. Mặt khác, nó hoạt động tương tự như một biểu thức hàm thông thường, với một số khác biệt nâng cao mà bạn có thể đọc trong Hàm mũi tên trên Mạng nhà phát triển Mozilla .

Trong trường hợp chỉ có một tham số, dấu ngoặc đơn có thể bị loại trừ. Trong ví dụ này, ta bình phương x , chỉ yêu cầu một số được chuyển làm đối số. Các dấu ngoặc đơn đã được bỏ qua.

// Define square function const square = x => {     return x * x; }  // Invoke function to find product square(8);

Output
64

Lưu ý: Trong trường hợp không có tham số, một tập hợp rỗng của dấu ngoặc đơn () là bắt buộc trong các hàm mũi tên.

Với những ví dụ cụ thể chỉ bao gồm một câu lệnh return , các hàm mũi tên cho phép giảm bớt cú pháp hơn nữa. Nếu hàm chỉ return một dòng, cả dấu ngoặc nhọn và câu lệnh return đều có thể bị bỏ qua, như trong ví dụ bên dưới.

// Define square function const square = x => x * x;  // Invoke function to find product square(10);

Output
100

Cả ba loại cú pháp này đều cho kết quả kết quả giống nhau. Nói chung, vấn đề ưu tiên hoặc các tiêu chuẩn mã hóa của công ty để quyết định cách bạn sẽ cấu trúc các chức năng của riêng mình.

Kết luận

Trong hướng dẫn này, ta đã đề cập đến các khai báo hàm và biểu thức hàm, trả về giá trị từ các hàm, gán giá trị hàm cho các biến và các hàm mũi tên ES6.

Hàm là các khối mã trả về một giá trị hoặc thực hiện một hành động, làm cho các chương trình có thể mở rộng và theo module .

Tags:

Các tin liên quan