Hàm (function) là một khái niệm quan trọng trong JavaScript. Hàm cho phép bạn đóng gói một tập hợp các câu lệnh thành một đơn vị logic có thể được gọi và sử dụng lại nó trong ứng dụng của bạn. Điều này giúp giảm sự lặp lại của code, làm cho code dễ đọc hơn và quản lý hơn.
Cú pháp của một hàm JavaScript được xác định bằng từ khóa function, sau đó là tên hàm, theo sau là dấu ngoặc đơn ().
Tên hàm có thể chứa chữ cái, chữ số, dấu gạch dưới và dấu dollar (cùng các quy tắc như biến).
Dấu ngoặc đơn có thể bao gồm các tên tham số được phân cách bằng dấu phẩy: (parameter1, parameter2, …)
Code được thực thi bởi hàm được đặt bên trong dấu ngoặc nhọn {}:
function name(parameter1, parameter2, parameter3) {
// Code để thực hiện
}Các tham số của hàm được liệt kê bên trong dấu ngoặc đơn () trong định nghĩa hàm.
Các đối số của hàm là các giá trị được nhận bởi hàm khi nó được gọi.
Bên trong hàm, các đối số (các tham số) hoạt động như biến cục bộ. Điều này có nghĩa là bạn có thể sử dụng và thay đổi giá trị của các tham số trong phạm vi của hàm mà không ảnh hưởng đến các biến có cùng tên ở ngoài hàm.
JavaScript cung cấp khả năng sử dụng hàm để tổ chức code của bạn thành các phần nhỏ, dễ quản lý và bạn có thể gọi hàm này trong các tình huống khác nhau như mô tả ở trên để thực thi code bên trong chúng.
Để hiểu rõ bạn hãy xem xét các trường hợp sau:
- Khi một sự kiện xảy ra (when an event occurs): Điều này có nghĩa là bạn có thể định nghĩa một hàm và sau đó gọi nó khi một sự kiện cụ thể xảy ra trên trang web của bạn. Ví dụ, bạn có thể có một hàm để xử lý khi người dùng nhấn vào một nút và hàm này sẽ thực thi khi sự kiện nhấn nút xảy ra.
- Khi nó được gọi (invoke) từ code JavaScript (when it is invoked (called) from JavaScript code): Bạn có thể gọi một hàm bất kỳ lúc nào trong code JavaScript của bạn. Điều này cho phép bạn tái sử dụng code một cách hiệu quả bằng cách gọi hàm khi bạn cần thực hiện một tác vụ cụ thể.
- Tự động (self-invoked): Đôi khi bạn muốn hàm tự động thực thi mà không cần phải gọi nó một cách rõ ràng. Điều này thường được sử dụng trong một số trường hợp đặc biệt, và bạn sẽ tìm hiểu nhiều hơn về nó khi đi sâu vào việc sử dụng hàm trong JavaScript.
Một hàm JavaScript là một khối code được thiết kế để thực hiện một nhiệm vụ cụ thể và nó được thực thi khi nó được gọi, khi bạn sử dụng tên hàm và truyền đối số nếu cần.
Hàm trong JavaScript thường bắt đầu với function, sau đó là tên hàm (ở ví dụ dưới đây tên hàm là myFunction) và danh sách các tham số bên trong dấu ngoặc đơn. Sau đó là một khối code nằm trong dấu ngoặc nhọn {} chứa các câu lệnh để thực hiện công việc cụ thể. Trong ví dụ này hàm myFunction nhận hai tham số p1 và p2, và nó trả về tích của hai tham số đó bằng câu lệnh return p1 * p2.
<html>
<body>
<p id="demo"></p>
<script>
function myFunction(p1, p2) {
return p1 * p2;
}
let result = myFunction(4, 3);
document.getElementById("demo").innerHTML = result;
</script>
</body>
</html>Trong ví dụ trên, hàm myFunction được gọi với giá trị 4 và 3 cho p1 và p2, và nó trả về kết quả là 12.
Một khi JavaScript đạt đến một câu lệnh return trong một hàm, hàm đó sẽ dừng việc thực thi ngay lập tức. Nếu hàm được gọi từ một câu lệnh, JavaScript sẽ trả về để thực thi code sau câu lệnh gọi hàm đó.
Hàm trong JavaScript cho phép bạn tái sử dụng code.
Bạn có thể viết code một lần và sau đó sử dụng nó nhiều lần. Bạn có thể sử dụng cùng một code với các đối số khác nhau để tạo ra các kết quả khác nhau.
Toán tử () được sử dụng để gọi hàm.
<html>
<body>
<p id="demo"></p>
<script>
function toCelsius(f) {
return (5/9) * (f-32);
}
let value = toCelsius(77);
document.getElementById("demo").innerHTML = value;
</script>
</body>
</html>Trong ví dụ này, toCelsius(77) gọi hàm toCelsius với đối số 77. Hàm này tính toán giá trị tương ứng và trả về nó, sau đó giá trị đó được gán cho biến value.
Toán tử “()” được sử dụng để gọi một hàm trong lập trình. Ví dụ ở trên mô tả cách chuyển đổi nhiệt độ từ độ Fahrenheit sang độ Celsius bằng cách sử dụng một hàm có tên là “toCelsius”. Hàm này nhận một đối số là nhiệt độ độ Fahrenheit và trả về nhiệt độ độ Celsius tương ứng.
Khi chúng ta viết toCelsius(77), đoạn code này đang gọi hàm “toCelsius” và truyền giá trị 77 làm đối số. Hàm này sau đó thực hiện tính toán bằng cách sử dụng công thức chuyển đổi từ độ Fahrenheit sang độ Celsius và trả về kết quả. Kết quả này sau đó được lưu trong biến “value” là 25.
25Truy cập một hàm với tham số không đúng có thể trả về một kết quả không chính xác:
<html>
<body>
<p id="demo"></p>
<script>
function toCelsius(f) {
return (5/9) * (f-32);
}
let value = toCelsius();
document.getElementById("demo").innerHTML = value;
</script>
</body>
</html>Trong ví dụ này, hàm “toCelsius” được định nghĩa để nhận một đối số là độ Fahrenheit để chuyển đổi thành độ Celsius. Tuy nhiên, khi chúng ta gọi hàm “toCelsius()” mà không truyền bất kỳ giá trị nào làm đối số, đây là một việc làm không đúng cú pháp. Khi đó, hàm không biết phải chuyển đổi giá trị nào từ độ Fahrenheit sang độ Celsius, và nó sẽ trả về kết quả không chính xác hoặc “NaN” (Not-a-Number).
Vì vậy, quan trọng là truyền các tham số đúng cho hàm để nó có thể hoạt động đúng cách và trả về kết quả chính xác.
NaNTruy cập một hàm mà không sử dụng toán tử “()” sẽ trả về chính hàm đó, chứ không phải kết quả của hàm:
Trong ví dụ này, khi chúng ta gán hàm “toCelsius” cho biến “value” mà không sử dụng toán tử “()” để gọi hàm, thì giá trị của “value” sẽ chứa chính hàm “toCelsius” chứ không phải kết quả của hàm. Điều này có nghĩa là bạn có thể sử dụng biến “value” để truy cập và gọi hàm “toCelsius” ở sau này nếu bạn muốn.
<html>
<body>
<p id="demo"></p>
<script>
function toCelsius(f) {
return (5/9) * (f-32);
}
let value = toCelsius;
document.getElementById("demo").innerHTML = value;
</script>
</body>
</html>Kết quả.
function toCelsius(f) { return (5/9) * (f-32); }Như bạn có thể thấy từ các ví dụ ở trên, “toCelsius” đề cập đến đối tượng hàm chính nó, trong khi “toCelsius()” với dấu ngoặc đơn đề cập đến kết quả của việc gọi hàm hoặc kết quả của hàm đó. Sự phân biệt này quan trọng trong JavaScript vì nó cho phép bạn cả tham chiếu đến hàm và sử dụng nó để thực hiện các tính toán cụ thể bằng cách cung cấp đối số khi bạn bao gồm các dấu ngoặc đơn.
Hàm có thể được sử dụng tương tự như bạn sử dụng biến, trong mọi loại công thức, phép gán và tính toán.
Ví dụ Thay vì sử dụng một biến để lưu giá trị trả về của một hàm:
let x = toCelsius(77);
let text = "The temperature is " + x + " Celsius";Bạn có thể sử dụng hàm trực tiếp, như một giá trị biến:
<html>
<body>
<p id="demo"></p>
<script>
let text = "The temperature is " + toCelsius(77) + " Celsius.";
document.getElementById("demo").innerHTML = text;
function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
</script>
</body>
</html>Như bạn có thể thấy, trong ví dụ thứ hai, chúng ta truyền giá trị 77 cho hàm “toCelsius” và sử dụng kết quả trả về của nó ngay trong biểu thức chuỗi, không cần lưu trữ nó trong biến riêng biệt. Điều này làm cho code trở nên ngắn gọn và dễ đọc hơn.
The temperature is 25 Celsius.Biến được khai báo bên trong một hàm JavaScript trở thành biến local của hàm đó. Biến local chỉ có thể được truy cập từ bên trong hàm đó.
<html>
<body>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
let text = "Outside: " + typeof carName;
document.getElementById("demo1").innerHTML = text;
function myFunction() {
let carName = "Volvo";
let text = "Inside: " + typeof carName + " " + carName;
document.getElementById("demo2").innerHTML = text;
}
myFunction();
</script>
</body>
</html>Trong ví dụ này, biến “carName” được khai báo bên trong hàm “myFunction”, do đó nó chỉ có thể được truy cập và sử dụng từ bên trong hàm này. Bất kỳ code ngoài hàm “myFunction” không thể truy cập biến “carName”. Điều này giúp bảo vệ dữ liệu và giữ cho biến không bị xung đột với các phần khác của code.
Outside: undefined
Inside: string Volvo
