Cách định nghĩa và cấu trúc các hàm trong JavaScript

Cùng FUNiX tìm hiểu Các hàm trong JavaScript được định nghĩa như thế nào? Cấu trúc của các hàm đó trong bài viết dưới đây.

• Khung JavaScript là gì và một số khung JavaScript phổ biến
• Hỏi đáp về ngôn ngữ JavaScript cùng lập trình viên
• Học lập trình web nên học ngôn ngữ nào có tính ứng dụng cao?
• Học lập trình web bắt đầu từ đâu sẽ mang lại hiệu quả tốt?
• Cách chuyển hướng trang web với JavaScript

>> Khóa học Kỹ thuật lập trình với JavaScript

>> Sự khác biệt giữa PHP và JavaScript: Ngôn ngữ lập trình nào phù hợp với bạn?

Một hàm tốt có thể được tái sử dụng trong nhiều dự án khác nhau, giúp nâng cao năng suất công việc cho lập trình viên.

Sử dụng hàm trong JavaScrip

Định nghĩa các hàm trong JavaScript

Các hàm trong javascript là tập hợp những xử lý để nhằm thực hiện một chức năng trong chương trình. Hàm cho phép chúng ta có thể kết hợp các xử lý thành một. Sau khi tạo và đặt tên cho hàm, thì mỗi khi cần sử dụng cho chương trình, chúng ta chỉ cần gọi tên hàm ra.

Khi kết hợp các xử lý khác nhau lại thành một hàm, chúng ta không cần viết lại nhiều lần, điều này giúp làm giảm sai sót khi viết code và có thể tái sử dụng hàm trong một chương trình khác.

Một hàm có thể nhận một giá trị và trả về giá trị đã qua xử lý, cho nên nó có khả năng tạo ra công suất tối đa mà chỉ cần lượng mã chương trình tối thiểu.

Cấu trúc của các loại hàm trong JavaScript

Cấu trúc hàm cơ bản

Cấu trúc hàm cơ bản trong JavaScript

Cấu trúc của các hàm ở trong JavaScript bắt đầu bằng từ khoá function với cú pháp cơ bản:

function functionName([parameter1], [parameter2],...) {
  statement1;
  statement2;
  ...
}

Trong đó:

• function là từ khóa bắt buộc
• functionName là tên của hàm mà mình muốn đặt.
• ([parameter1], [parameter2],…) là danh sách các tham số của hàm (không giới hạn số lượng)
• Thân hàm bao gồm các câu lệnh nằm trong cặp dấu ngoặc {}.

Ví dụ: hàm sayHello():

function sayHello() {
  console.log("Hello from completejavascript.com");
}

Khi gọi hàm chúng ta sẽ sử dụng tên hàm:

function sayHello() {
  console.log("Hello from completejavascript.com");
}
sayHello();sayHello();
// Hello from completejavascript.com
// Hello from completejavascript.com

Trong ví dụ trên có hai lần gọi hàm, và đoạn code console.log bên trong thân hàm được thực hiện hai lần tương ứng số lần gọi hàm.

Hàm sẽ giúp tránh lặp lại code. Giả sử chúng ta cần thay đổi nội dung đoạn code console.log trên, thì chỉ cần thay đổi một chỗ.

Hàm chứa biến cục bộ

Biến cục bộ là biến được khai báo bên trong hàm và chỉ được sử dụng ở bên trong thân hàm đó.

Ví dụ: 

function sayHello() {
  const message = "Hello from completejavascript.com";  console.log(message);
}
sayHello(); // Hello from completejavascript.com

console.log(message); // Uncaught ReferenceError: message is not defined

Trong ví dụ trên thì hàm sayHello có chứa biến cục bộ message và biến này chỉ dùng được ở trong thân hàm sayHello.

Khi truy cập vào biến message ở ngoài hàm sẽ bị báo lỗi Uncaught ReferenceError: message is not defined.

Hàm chứa biến ngoài 

Các hàm trong JavaScript có thể truy cập vào các biến được khai báo ở bên ngoài hàm.

Ví dụ:

let message = "Hello from completejavascript.com";
function sayHello() {
  console.log(message);
}
sayHello(); // Hello from completejavascript.com

Và trong thân hàm có thể thay đổi giá trị của biến ngoài hàm:

let message = "Hello from completejavascript.com";
function sayHello() {
  message = "Hi!";  console.log(message);
}
sayHello(); // Hi!
console.log(message); // Hi!

Tuy nhiên nếu biến ngoài hàm bị trùng tên với một biến trong thân hàm thì sẽ bị bỏ qua.

let message = "Hello from completejavascript.com";
function sayHello() {
  let message = "Hi!";  console.log(message);
}
sayHello(); // Hi!
console.log(message); // Hello from completejavascript.com

Hàm có tham số truyền vào

Nếu chúng ta muốn sử dụng giá trị của biến ngoài vào trong thân hàm, thì có thể dùng cách truyền tham số vào hàm. Số lượng tham số có thể truyền vào hàm là không giới hạn.

Ví dụ: 

function sayHello(message) {
  console.log(message);
}
sayHello("Hello!"); // Hello!
sayHello("Hi!"); // Hi!

Khi gọi hàm sayHello, giá trị được sao chép vào biến cục bộ message trong thân hàm và sẽ sử dụng nó.

Các hàm ở trong JavaScript khi có tham số truyền vào sẽ thực hiện sao chép dữ liệu mà không làm thay đổi giá trị của biến ngoài hàm.

Ví dụ:

let message = "Hello from completejavascript.com";
function sayHello(message) {
  message = "Hi!";  console.log(message);
}
sayHello(); // Hi!
console.log(message); // Hello from completejavascript.com

Biến message được gán giá trị Hi! bên trong hàm. Nhưng giá trị bên ngoài hàm của biến message không hề thay đổi.

Hàm có giá trị tham số mặc định

Khi gọi hàm đối với các hàm có tham số, nếu chúng ta không truyền tham số vào thì tham số đó có giá trị undefined.

Ví dụ: Giá trị tham số mặc định trong trường hợp này được sử dụng toán tử gán = như sau:

Nếu ta không truyền giá trị vào tham số site thì giá trị của nó mặc định là completejavascript.com.

Giá trị tham số mặc định còn có thể là một biểu thức hoặc là một hàm khác.

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

Các hàm trong JavaScript có thể có hoặc không có giá trị trả về khi gọi hàm. Hàm có giá trị trả về thì sẽ sử dụng từ khóa return.

Ví dụ về hàm tính tổng hai số:

Từ khóa return trong JavaScript có thể được đặt ở vị trí bất kỳ trong thân hàm, và hàm sẽ trả về giá trị sau từ khóa.

Trong một hàm có thể sử dụng nhiều từ khóa return:

Cách đặt tên các hàm trong JavaScript

Cách đặt tên hàm trong JavaScript

Một số các ràng buộc về đặt tên các hàm trong JavaScript như sau:

• Tên hàm phải bắt đầu bằng chữ cái (a-z, A-Z), hoặc dấu gạch dưới (_) hoặc kí tự “đô la” ($).
• Sau ký tự bắt đầu thì có thể sử dụng thêm số (0-9) ngoài những ký tự trên.
• Không được sử dụng các từ khoá và từ dự trữ.

Bài viết này của Funix.edu.vn vừa giới thiệu về các hàm trong JavaScript và cấu trúc của từng loại hàm, các quy tắc đặt tên hàm. Hy vọng bài viết sẽ mang đến nhiều kiến thức và có ích cho các bạn.

Phạm Thị Thanh Ngọc