Hướng dẫn dùng myforst JavaScript

Cá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, các hàm JS chắc chắn là thứ bạn cần biết. Nếu bạn đã dành thời gian 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ã của bạn hiệu quả hơn và theo mô-đun.

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ó 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.

Khai báo hàm JavaScript

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 functiontừ khóa, 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, 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 chứa các tham số tùy chọn. Chúng ta sẽ nói đến những điều đó sau trong 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 Googlera bảng điều khiển:

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

Bên 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 lại 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. Các printGoogle()chức năng sẽ trả về kết quả khi nó được gọi, trên dòng cuối cùng trong trường hợp này.

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

Biểu thức hàm JavaScript

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 ta thêm google()dòng mã vào 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 Googlera 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 tôi thêm một nametham số vào hàm JS của mình, thì 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 ta được gọi 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ố tên để 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 được 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 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 ta 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 gán 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.

Cần lưu ý rằng 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ụ hiển thị điều này trong hành động bên dưới.

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ì trong returncâu lệnh.

Dưới đây là một ví dụ về một 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. 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 này đã được thêm vào 1 và 2, với những cái tên tham số firstvà secondvà trở chúng vào mã. Nếu chúng ta muốn xem các giá trị này, chúng ta có thể thêm một console.log()hàm xung quanh dòng nơi chúng ta gọi 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 . Đây là những đại diện bằng cách sử dụng các biểu thức sau đây: =>.

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 hàm mũi tên đang hoạt động:

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

Thay vì viết 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.

Tham khảo khóa học Lập trình web PHP Fullstack tại NIIT-ICT Hà Nội ngay hôm nay