⚙️12-Hàm trong Javascript

Hàm là gì?

• Hàm (function) là một hoặc nhiều đoạn mã nguồn được viết ra để thực thi một hoặc nhiều hành động khi nó hàm này được gọi. Hàm có khả năng gọi lại được nhiều lần và bất kỳ đâu trong chương trình của bạn.

• Hàm là một thành phần không thể thiếu trong cấu trúc của chương trình.

• Hàm giúp chương trình trở nên rõ rang, dễ hiểu bằng cách gộp những đoạn code lặp lại. Nhờ đó việc bảo trì phần mềm cũng dễ dàng hơn.

Định nghĩa hàm trong Javascript

Để định nghĩa hàm trong JavaScript, bạn sử dụng từ khoá function với cú pháp là:

Trong đó:

• function: là từ khóa bắt buộc khi khởi tạo hàm

• functionName: là tên hàm sử dụng để gọi hàm sau khi định nghĩa và cần sử dung.

• param1, param2… là các tham số truyền vào để sử dụng. Tham số và số lượng tham số không bắt buộc và tùy thuộc vào nhu cầu cũng như mục đích của hàm được tạo ra.

Ví dụ:

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

Để gọi hàm chúng ta sử dụng tên hàm.

sayHello();  

Quy tắc đặt tên hàm trong Javascript

Quy tắc đặt tên hàm trong JavaScript cũng giống như quy tắc đặt tên biến hay hằng trong JavaScript:

• Bắt đầu bằng chữ cái, dấu gạch dưới (_) hoặc kí tự "đô la" ($).

• Sau kí tự đầu tiên, ngoài những kí tự trên, bạn có thể sử dụng thêm số (0-9).

• Không sử dụng từ khoá và từ dự trữ.

Gợi ý một số cách đặt trên hàm:

Vì hàm ứng với một hành động, nên tên hàm chuẩn thường bắt đầu bằng một động từ.

Ví dụ:

• get… trả về một giá trị

• set… gán giá trị

• check… kiểm tra điều kiện nào đó trả về True hoặc False

• display… hiển thị dữ liệu nào đó

Dĩ nhiên, JavaScript không quy định bạn phải đặt tên như vậy. Bạn chỉ cần đặt tên đúng theo quy tắc phía trên là đủ nhưng nếu có thói quen đặt tên đúng chuẩn sẽ giúp ích trong quá trình học tập và làm việc.

Các loại biến trong javascript

Biến cục bộ trong hàm

Một biến được khai báo bên trong hàm, chỉ sử dụng được bên trong thân hàm đó. Biến này gọi là biến cục bộ (hay biến địa phương).

Ví dụ:

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

Trong ví dụ trên, biến message là biến cục bộ bên trong hàm sayHello. Tức là biến message chỉ dùng được ở trong thân hàm sayHello. Khi bạn cố gắng truy cập vào biến message ở ngoài hàm, bạn sẽ bị lỗi Uncaught ReferenceError: message is not defined.

Biến ngoài hàm trong javascript

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

Ví dụ:

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

Một biến được khai báo ở ngoài tất cả các hàm, gọi là biến toàn cục.

Biến toàn cục có thể được sử dụng và thay đổi giá trị ở mọi nơi trong chương trình. Vì vậy, bạn nên hạn chế sử dụng biến toàn cục.

Truyền tham số vào hàm

Trong trường hợp bạn muốn sử dụng giá trị của biến bên ngoài vào trong thân hàm, bạn có thể truyền tham số vào hàm (thay vì sử dụng biến toàn cục).

Ví dụ:

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

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

Có thể truyền nhiều tham số và tham số mặc định cho hàm.

Ví dụ:

function sayHello(message, site = "FITA") {  
  console.log(message + " from " + site);  
}  
  
sayHello("Hello"); // Hello from FITA

Lúc này, nếu bạn không truyền giá trị vào tham số site thì giá trị của nó mặc định là FITA

Hàm trả về và không trả về dữ liệu

Hàm trong JavaScript có thể trả về giá trị khi gọi hàm.

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

function sum(a, b) {  
  return a + b;  
}  
  
const result = sum(1, 2);  
console.log(result); // 3 

Từ khóa return trong JavaScript có thể đặt ở bất kỳ đâu trong thân hàm. Khi gặp từ khóa return, hàm sẽ dừng lại và trả về giá trị sau return.

Có thể dùng nhiều từ khóa return trong hàm như ví dụ dưới đây:

function sum(a, b) {  
  if (a === null || a === undefined) {  
    console.log("Tham số không hợp lệ!");  
    return;  
  }  
  
  if (b === null || b === undefined) {  
    console.log("Tham số không hợp lệ!");  
    return;  
  }  
  
  return a + b;  
}  
  
const result1 = sum(); // Tham số không hợp lệ!