Hướng dẫn đối số trong javascript

Hàm là một khối mã lệnh được viết nhằm một múc đích nào đó. Xây dựng hàm mang lại một số lợi ích như sử dụng lại mã đã viết, một khối mã lệnh với các tham số khác nhau mang lại các kết quả khác nhau. Một hàm thi hành khi hàm đó được gọi.

Định nghĩa hàm

Hàm trong JavaScript sử dụng từ khóa

functionName(param1, param2, param3 = default) {
   // các dòng code trong hàm
}
1 tiếp theo là
functionName(param1, param2, param3 = default) {
   // các dòng code trong hàm
}
2 và các tham số nếu có trong ngoặc
functionName(param1, param2, param3 = default) {
   // các dòng code trong hàm
}
3. Khối mã của hàm nằm trong khối ngoặc nhọn
functionName(param1, param2, param3 = default) {
   // các dòng code trong hàm
}
4

function name_funtion() {
  //các mã của hàm
}

Tên hàm có thể chứa các ký tự, số, gạch dưới ... (tương tự quy tắc tên biến).

Gọi hàm

Để thi hành hàm bạn cần gọi nó. Để gọi hàm viết lại tên hàm và các tham số truyền vào hàm, nhớ kết thúc bằng dấu

functionName(param1, param2, param3 = default) {
   // các dòng code trong hàm
}
5 Một hàm có thể được gọi bao nhiêu lần là tùy bạn. Ví dụ:

function myFunction() {
  alert("Calling a Function!");
}

myFunction();
//Hiện thông báo:  "Calling a Function!"

Tham số hàm

Các tham số của hàm bạn cần liệt kê sau tên hàm, mỗi tham số cách nhau bởi dấu

functionName(param1, param2, param3 = default) {
   // các dòng code trong hàm
}
6

functionName(param1, param2, param3 = default) {
   // các dòng code trong hàm
}

Tham số nào muốn gán giá trị mặc định (khi gọi hàm mà không chỉ ra tham số đó thì tự động lấy mặc định) thì gán ngay ở khái báo hàm, ở trên

functionName(param1, param2, param3 = default) {
   // các dòng code trong hàm
}
7

Khi gọi hàm có tham số, bạn cần truyền tham số là giá trị thực tế để hàm thi hành

function sayHello(name) {
   alert("Hi, " + name);
}

sayHello("David"); //Hiện thị thông báo "Hi, David"

sayHello("Sarah"); //Hiện thị thông báo "Hi, Sarah"

Hàm có nhiều tham số được sử dụng một cách tương tự, nhớ là khi gọi hàm các tham số cần truyền đúng theo tứ tự qua tên hàm

function sayHello(name, age) {
  document.write( name + " is " + age + " years old.");
}

sayHello("John", 20)
//Hiện thị "John is 20 years old."

Nếu hàm được gọi mà truyền thiếu tham số, thì tham giá trị thiếu đó của tham số được thiết lập là

functionName(param1, param2, param3 = default) {
   // các dòng code trong hàm
}
8 nếu không có khai báo giá trị mặc định, còn ngược lại sẽ lấy giá trị mặc định

Giá trị trả về của hàm

Hàm có thể tùy chọn có giá trị trả về hay không. Nếu có giá trị trả về hàm sử dụng lệnh

functionName(param1, param2, param3 = default) {
   // các dòng code trong hàm
}
9

Khối lệnh của hàm mà gặp đoạn lệnh

functionName(param1, param2, param3 = default) {
   // các dòng code trong hàm
}
9 hàm sẽ dừng thi hành và trả về biểu thức của giá trị của
functionName(param1, param2, param3 = default) {
   // các dòng code trong hàm
}
9

function myFunction(a, b) {
   return a * b;
}

var x = myFunction(5, 6);
// Giá trị trả về được gán vào x
// x bằng 30

Hàm không có

functionName(param1, param2, param3 = default) {
   // các dòng code trong hàm
}
9 một giá trị cụ thể nào, thì giá trị trả về của hàm là
functionName(param1, param2, param3 = default) {
   // các dòng code trong hàm
}
8

function addNumbers(a, b) {
   var c = a+b;
   return c;
}
document.write(addNumbers(40, 2));
//In ra : 42

Biểu thức hàm

Đây là khái niệm quan trọng, nắm vững ngay giúp cho việc học JS dễ hơn rất nhiều. Cú pháp tạo ra một biểu thức hàm giống với khai báo hàm thông thường ở trên chỉ có điều nó khai báo bằng biểu thức (nó là một số hạng của biểu thức). Biểu thức hàm hàm này có thể có tên hoặc là không có tên, nếu không có tên thì biểu thức hàm này gọi là hàm

function sayHello(name) {
   alert("Hi, " + name);
}

sayHello("David"); //Hiện thị thông báo "Hi, David"

sayHello("Sarah"); //Hiện thị thông báo "Hi, Sarah"
4.

Để tường minh ta xem xét ví dụ chi tiết như sau, giả sử có một biểu thức quen thuộc

var a = b;

Biểu thức trên có hai số hạng, số hạng

function sayHello(name) {
   alert("Hi, " + name);
}

sayHello("David"); //Hiện thị thông báo "Hi, David"

sayHello("Sarah"); //Hiện thị thông báo "Hi, Sarah"
5 có thể là một biến, một giá trị ... Giờ nếu thay số hạng
function sayHello(name) {
   alert("Hi, " + name);
}

sayHello("David"); //Hiện thị thông báo "Hi, David"

sayHello("Sarah"); //Hiện thị thông báo "Hi, Sarah"
5 bằng một khai báo hàm đã biết ở trên, thì lúc này ta gọi nó là một biểu thức hàm.

var a = function xinchao(guestname) {
    alert('Xin chào ' + guestname);
}

Có biểu thức hàm rồi (biểu thức hàm này có tên

function sayHello(name) {
   alert("Hi, " + name);
}

sayHello("David"); //Hiện thị thông báo "Hi, David"

sayHello("Sarah"); //Hiện thị thông báo "Hi, Sarah"
7), giá trị của biểu thức này đã gán vào biến
function sayHello(name) {
   alert("Hi, " + name);
}

sayHello("David"); //Hiện thị thông báo "Hi, David"

sayHello("Sarah"); //Hiện thị thông báo "Hi, Sarah"
8 nếu muốn gọi biểu thức ta dùng biến
function sayHello(name) {
   alert("Hi, " + name);
}

sayHello("David"); //Hiện thị thông báo "Hi, David"

sayHello("Sarah"); //Hiện thị thông báo "Hi, Sarah"
8 tương tự như tên hàm để thực hiện biểu thức.

a("Expression");            //Xuất hiện hộp thoại có dòng chữ: Xin chào Expression

Bạn để ý gọi biểu thức hàm ta dùng đến số hạng biến

function sayHello(name) {
   alert("Hi, " + name);
}

sayHello("David"); //Hiện thị thông báo "Hi, David"

sayHello("Sarah"); //Hiện thị thông báo "Hi, Sarah"
8 chứ không thể dùng tên
function sayHello(name) {
   alert("Hi, " + name);
}

sayHello("David"); //Hiện thị thông báo "Hi, David"

sayHello("Sarah"); //Hiện thị thông báo "Hi, Sarah"
7. Nếu bạn gọi sẽ có lỗi

function myFunction() {
  alert("Calling a Function!");
}

myFunction();
//Hiện thông báo:  "Calling a Function!"
0

Như vậy, tên này khai nhưng không thể dùng nó để gọi biểu thức, tên này xuất hiện trong bộ nhớ call stack giúp cho việc debug, giám sát ...Ví dụ bạn xem

function sayHello(name) {
   alert("Hi, " + name);
}

sayHello("David"); //Hiện thị thông báo "Hi, David"

sayHello("Sarah"); //Hiện thị thông báo "Hi, Sarah"
8 là gì?

function myFunction() {
  alert("Calling a Function!");
}

myFunction();
//Hiện thông báo:  "Calling a Function!"
1

Hàm ẩn danh anonymous

Chính là biểu thức hàm ở trên, nhưng trong phần khai báo bỏ tên đi (không tên). Ở ví dụ trên biểu thức hàm bỏ đi tên

function sayHello(name) {
   alert("Hi, " + name);
}

sayHello("David"); //Hiện thị thông báo "Hi, David"

sayHello("Sarah"); //Hiện thị thông báo "Hi, Sarah"
7 thì lúc này nó trở thành hàm ẩn danh, cách gọi biểu thức vẫn tương tự

function myFunction() {
  alert("Calling a Function!");
}

myFunction();
//Hiện thông báo:  "Calling a Function!"
2

Biểu thức hàm chạy ngay lập tức IIFE

Trong nhiều trường hợp, bạn khai báo biểu thức hàm rồi dùng chỉ một lần. Trong những trường hợp như vậy, bạn có thể áp dụng mô hình lập trình có tên

function sayHello(name, age) {
  document.write( name + " is " + age + " years old.");
}

sayHello("John", 20)
//Hiện thị "John is 20 years old."
4 (biểu thức hàm chạy luôn - Immediately Invokable Function Expression), để code sáng sửa và ngắn gọn hơn (nếu không thích thì cứ việc khai báo rồi gọi biểu thức cũng không sao). Ví dụ biểu thức sau sẽ chạy luôn!

function myFunction() {
  alert("Calling a Function!");
}

myFunction();
//Hiện thông báo:  "Calling a Function!"
3

Trên đây tìm hiểu cơ bản về hàm, sau khi tìm hiểu về các đối tượng trong JS, chúng ta tiếp tục với một số loại hàm đặc biệt như closures, biểu thức hàm mũi tên.

Hàm rút gọn function sayHello(name, age) { document.write( name + " is " + age + " years old."); } sayHello("John", 20) //Hiện thị "John is 20 years old." 5

ECMAScript 6 đưa ra thêm cách định nghĩa biểu thức hàm một cách ngắn gọn, dùng kỹ hiệu mũi tên

function sayHello(name, age) {
  document.write( name + " is " + age + " years old.");
}

sayHello("John", 20)
//Hiện thị "John is 20 years old."
5