• Trang chủ
• Học JavaScript
• Hàm JS

Hàm JS

Trong hướng dẫn này, bạn sẽ học cách định nghĩa và gọi một hàm trong JavaScript.

Hàm là gì?

Hàm là một nhóm các câu lệnh thực hiện các nhiệm vụ cụ thể và có thể được lưu giữ và duy trì riêng biệt dưới dạng chương trình chính. Các Hàm cung cấp một cách để tạo các gói mã có thể tái sử dụng, dễ mang theo hơn và dễ gỡ lỗi hơn. Dưới đây là một số ưu điểm của việc sử dụng hàm:

• Hàm giảm sự lặp lại của mã trong một chương trình — Hàm cho phép bạn trích xuất khối mã thường được sử dụng thành một thành phần duy nhất. Giờ đây, bạn có thể thực hiện cùng một tác vụ bằng cách gọi hàm này ở bất kỳ đâu bạn muốn trong tập lệnh của mình mà không cần phải sao chép và dán lại cùng một khối mã.
• Các Hàm làm cho mã dễ bảo trì hơn nhiều — Vì một Hàm được tạo một lần có thể được sử dụng nhiều lần, nên mọi thay đổi được thực hiện bên trong một Hàm được thực hiện tự động ở mọi nơi mà không cần chạm vào một số tệp.
• Hàm giúp loại bỏ lỗi dễ dàng hơn — Khi chương trình được chia nhỏ thành các hàm, nếu có bất kỳ lỗi nào xảy ra, bạn sẽ biết chính xác hàm nào gây ra lỗi và tìm nó ở đâu. Do đó, việc sửa lỗi trở nên dễ dàng hơn rất nhiều.

Phần sau đây sẽ chỉ cho bạn cách xác định và gọi các hàm trong tập lệnh của bạn.

Định nghĩa và gọi một hàm

Việc khai báo một hàm bắt đầu bằng từ khóafunction, theo sau là tên của hàm bạn muốn tạo, tiếp theo là dấu ngoặc đơn ()và cuối cùng đặt mã hàm của bạn giữa các dấu ngoặc nhọn {}. Đây là cú pháp cơ bản để khai báo một hàm:

Đây là một ví dụ đơn giản về Hàm, Hàm này sẽ hiển thị thông báo xin chào:

// Defining function
function sayHello() {
    alert("Hello, welcome to this website!");
}
 
// Calling function
sayHello(); // 0utputs: Hello, welcome to this website!

Khi một Hàm được xác định, nó có thể được gọi (được gọi) từ bất kỳ đâu trong tài liệu, bằng cách nhập tên của nó theo sau là một tập hợp các dấu ngoặc đơn, như sayHello()trong ví dụ trên.

Thêm tham số vào Hàm

Bạn có thể chỉ định các tham số khi bạn xác định Hàm của mình để chấp nhận các giá trị đầu vào trong thời gian chạy. Các tham số hoạt động giống như các biến giữ chỗ trong một hàm; chúng được thay thế trong thời gian chạy bằng các giá trị (được gọi là đối số) được cung cấp cho hàm tại thời điểm gọi.

Các tham số được đặt trên dòng đầu tiên của hàm bên trong tập hợp các dấu ngoặc đơn, như sau:

Hàm displaySum() trong ví dụ sau lấy hai số làm đối số, chỉ cần cộng chúng lại với nhau rồi hiển thị kết quả trong trình duyệt.

// Defining function
function displaySum(num1, num2) {
    var total = num1 + num2;
    alert(total);
}
 
// Calling function
displaySum(6, 20); // 0utputs: 26
displaySum(-5, 17); // 0utputs: 12

Bạn có thể xác định bao nhiêu tham số tùy thích. Tuy nhiên, đối với mỗi tham số bạn chỉ định, một đối số tương ứng cần được chuyển đến hàm khi nó được gọi, nếu không giá trị của nó sẽ trở thành undefined. Hãy xem xét ví dụ sau:

// Defining function
function showFullname(firstName, lastName) {
    alert(firstName + " " + lastName);
}
 
// Calling function
showFullname("Clark", "Kent"); // 0utputs: Clark Kent
showFullname("John"); // 0utputs: John undefined

Giá trị mặc định cho tham số HàmES6

Với ES6, giờ đây bạn có thể chỉ định các giá trị mặc định cho tham số Hàm. Điều này có nghĩa là nếu không có đối số nào được cung cấp để hoạt động khi nó được gọi thì các giá trị tham số mặc định này sẽ được sử dụng. Đây là một trong những tính năng được chờ đợi nhất trong JavaScript. Đây là một ví dụ:

function sayHello(name = 'Guest') {
    alert('Hello, ' + name);
}

sayHello(); // 0utputs: Hello, Guest
sayHello('John'); // 0utputs: Hello, John

Trong khi trước ES6, để đạt được điều tương tự, chúng tôi phải viết một cái gì đó như thế này:

function sayHello(name) {
    var name = name || 'Guest'; 
    alert('Hello, ' + name);
}

sayHello(); // 0utputs: Hello, Guest
sayHello('John'); // 0utputs: Hello, John

Để tìm hiểu về các tính năng khác của ES6, vui lòng xem chương về các tính năng của JavaScript ES6 .

Trả về các giá trị từ một hàm

Kết quả là một hàm có thể trả lại một giá trị cho tập lệnh đã gọi hàm đó bằng cách sử dụng câu lệnhreturn. Giá trị có thể thuộc bất kỳ kiểu nào, kể cả mảng và đối tượng.

Câu lệnh return thường được đặt ở dòng cuối cùng của hàm trước dấu ngoặc nhọn đóng và kết thúc bằng dấu chấm phẩy, như minh họa trong ví dụ sau.

// Defining function
function getSum(num1, num2) {
    var total = num1 + num2;
    return total;
}
 
// Displaying returned value
alert(getSum(6, 20)); // 0utputs: 26
alert(getSum(-5, 17)); // 0utputs: 12

Một hàm không thể trả về nhiều giá trị. Tuy nhiên, bạn có thể nhận được kết quả tương tự bằng cách trả về một mảng giá trị, như minh họa trong ví dụ sau.

// Defining function
function divideNumbers(dividend, divisor){
    var quotient = dividend / divisor;
    var arr = [dividend, divisor, quotient];
    return arr;
}
 
// Store returned value in a variable
var all = divideNumbers(10, 2);
 
// Displaying individual values
alert(all[0]); // 0utputs: 10
alert(all[1]); // 0utputs: 2
alert(all[2]); // 0utputs: 5

Làm việc với biểu thức hàm

Cú pháp mà chúng ta đã sử dụng trước đây để tạo hàm được gọi là khai báo hàm. Có một cú pháp khác để tạo hàm được gọi là biểu thức hàm.

// Function Declaration
function getSum(num1, num2) {
    var total = num1 + num2;
    return total;
}
 
// Function Expression
var getSum = function(num1, num2) {
    var total = num1 + num2;
    return total;
};

Khi biểu thức hàm đã được lưu trữ trong một biến, biến đó có thể được sử dụng như một hàm:

var getSum = function(num1, num2) {
    var total = num1 + num2;
    return total;
};
 
alert(getSum(5, 10)); // 0utputs: 15
 
var sum = getSum(7, 25);
alert(sum); // 0utputs: 32

Cú pháp của khai báo hàm (function declaration) và biểu thức hàm (function ) trông rất giống nhau, nhưng chúng khác nhau ở cách đánh giá, hãy xem ví dụ sau:

declaration(); // Outputs: Hi, I'm a function declaration!
function declaration() {
    alert("Hi, I'm a function declaration!");
}
 
expression(); // Uncaught TypeError: undefined is not a function
var expression = function() {
    alert("Hi, I'm a function expression!");
};

Như bạn có thể thấy trong ví dụ trên, biểu thức hàm đã đưa ra một ngoại lệ khi nó được gọi trước khi nó được xác định, nhưng khai báo hàm đã thực thi thành công.

Hàm khai báo cú pháp JavaScript trước khi chương trình thực thi. Do đó, sẽ không có vấn đề gì nếu chương trình gọi hàm trước khi nó được xác định bởi vì JavaScript đã nâng hàm lên đầu phạm vi hiện tại đằng sau hậu trường. Biểu thức hàm không được đánh giá cho đến khi nó được gán cho một biến; do đó, nó vẫn chưa được xác định khi được gọi.

ES6 đã giới thiệu cú pháp thậm chí còn ngắn hơn để viết biểu thức hàm được gọi là hàm mũi tên , vui lòng xem chương các tính năng của JavaScript ES6 để tìm hiểu thêm về nó.

Hiểu phạm vi biến

Tuy nhiên, bạn có thể khai báo các biến ở bất kỳ đâu trong JavaScript. Tuy nhiên, vị trí khai báo xác định mức độ sẵn có của biến trong chương trình JavaScript, tức là nơi biến có thể được sử dụng hoặc truy cập. Khả năng truy cập này được gọi là phạm vi biến (variable scope).

Theo mặc định, các biến được khai báo trong một hàm có phạm vi cục bộ (local scope), nghĩa là chúng không thể được xem hoặc thao tác từ bên ngoài hàm đó, như minh họa trong ví dụ bên dưới:

// Defining function
function greetWorld() {
    var greet = "Hello World!";
    alert(greet);
}
 
greetWorld(); // Outputs: Hello World!
 
alert(greet); // Uncaught ReferenceError: greet is not defined

Tuy nhiên, bất kỳ biến nào được khai báo trong một chương trình bên ngoài một hàm đều có phạm vi toàn cầu (global scope), nghĩa là nó sẽ có sẵn cho tất cả tập lệnh, cho dù tập lệnh đó nằm trong một hàm hay bên ngoài. Đây là một ví dụ:

var greet = "Hello World!";
 
// Defining function
function greetWorld() {
    alert(greet);
}
 
greetWorld();  // Outputs: Hello World!
 
alert(greet); // Outputs: Hello World!