Hàm trong JavaScript < Ironhack Việt Nam

Nội dung

Hàm trong JS là 1 đoạn code được thiết kế để thực hiện một công việc cụ thể.

Hàm được thực thi khi được gọi tới.

// Hàm tính tích của hai biến
function myFunction(a, b) {
  return a * b;
}

Cú pháp của hàm (syntax)

Hàm được định nghĩa với từ khóa function, nối tiếp bởi tên hàm và dấu ngoặc tròn “()”.

Tên hàm có thể gồm chữ, số, dấu gạch dưới “_” và dấu “$”.

Phần trong ngoặc có thể chứa tên các tham số tách biệt bởi dấu phẩy ” , “:
(parameter1, parameter2)

Đoạn code hàm thực hiện sẽ được đặt trong dấu ngoặc kép “{ }”.

function name(parameter1, parameter2, parameter3) {
  // code được thực hiện
}

Parameter (tham số) được liệt kê ở bên trong dấu ngoặc tròn khi function được định nghĩa.

Argument (đối số) là giá trị truyền vào khi hàm được gọi.

Trong function, argument (parameter) sẽ được sử dụng như biến local.

Function Invocation (Gọi hàm)

Đoạn code bên trong function sẽ được thực thi khi hàm được gọi tới:

Khi một sự kiện xảy ra (người dùng bấm nút)
Khi hàm được gọi tới trong code
Tự động (hàm tự gọi chính nó)

Bạn sẽ hiểu rõ hơn về việc sử dụng hàm ở trong bài viết này.

Function Return (Giá trị trả về của hàm)

Khi JS chạy tới câu lệnh return bên trong hàm, hàm sẽ ngừng thực thi.

Nếu hàm được gọi từ một câu lệnh, JavaScript sẽ “return” để tiếp tục thực hiện các câu lệnh ngay tiếp theo nơi hàm được gọi.

Hàm thường được sử dụng để tính toán một giá trị trả về. Giá trị trả về được gán cho “caller”:

Tính tích của hai số và trả về giá trị:

let x = myFunction(6, 3);   // Hàm được gọi và sẽ trả về giá trị cho x
function myFunction(a, b) {
  return a * b;             // Hàm trả về tích của tham số a và b
}

Kết quả x sẽ bằng : 18

Tại sao sử dụng function?

Để bạn có thể tái sử dụng code: Định nghĩa một lần, dùng nhiều lần.

Bạn có thể dùng lại một đoạn code với đối số khác, trả về kết quả khác.

Dấu () khi gọi hàm

Trong ví dụ sau, toCelsius trỏ tới đối tượng function, còn toCelsius() trỏ tới kết quả của function.

Khi truy vấn tới một hàm mà không sử dụng dấu “()” sẽ trả về đối tượng function thay vì kết quả trả về của hàm.

function toCelsius(fahrenheit) {
  return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = toCelsius;

Hãy test thử đoạn code trên sẽ giúp bạn dễ hiểu hơn.

Hàm được sử dụng như một biến

Hàm cũng có thể được sử dụng như cách bạn sử dụng biến trong JS, trong mọi biểu thức, gán giá trị hay tính toán.

Thay vì gán giá trị trả về của function cho biến:

let x = toCelsius(77);
let text = "The temperature is " + x + " Celsius";

Bạn có thể gọi function trực tiếp như một biến trong biểu thức:

let text = "The temperature is " + toCelsius(77) + " Celsius";

Biến Cục Bộ (Local Variable)

Những biến được khởi tạo bên trong function, sẽ là biến cục bộ của function đó.

Biến cục bộ chỉ có thể được sử dụng bên trong function.

// code ở đây không thể dùng biến firstName

function myFunction() {
  let firstName = "Dexter";
  // code ở đây có thể dùng biến firstName
}

// code ở đây không thể dùng biến firstName

Vì biến cục bộ chỉ có thể được nhận dạng bên trong function của chúng, nên biến trùng tên có thể sử dụng hoặc khai báo ở những function khác.

Biến cục bộ được tạo ra khi function bắt đầu chạy và bị xóa khi chạy hết function đó.

@ Duy Dương – Cựu học viên Ironhack Việt Nam