Các hàm trong Javascript

Chắc hẳn khi làm các dự án , các bạn sẽ sử dụng for-loop để duyệt các phần tử trong mảng, tuy nhiên điều này sẽ làm cho code của bạn sẽ trở nên dài dòng, khó đọc. Hầu hết khi đã sử dụng hay học lập trình Javascript để làm dự án thì các bạn sẽ dùng các hàm khác để thay thế for-loop là map , filter , reduce , … điều này làm cho code trở nên tường minh hơn và dễ đọc hơn. Sau đây mình xin giới thiệu một số cách sử dụng những hàm này:

1. Hàm map : Phương thức map[] giúp tạo ra một mảng mới với các phần tử là kết quả từ việc thực thi một hàm lên từng phần tử của mảng được gọi.

Xem thêm tại đây:
//developer.mozilla.org/vi/docs/Web/JavaScript/Reference/Global_Objects/Array/map

Hàm map[] sẽ nhận vào 3 tham số theo thứ tự sau:

Phần tử hiện tại của mảng [ bắt buộc ]
Chỉ số của phần tử [ optional ]
Mảng ban đầu [ optional ]

Sau đây là cách cài đặt hàm map[] và một số cách sử dụng.
– Bước 1: tạo arrayStored để lưu các giá trị của mảng mới
– Bước 2: loop qua các phần tử của mảng
* 2.1 : dùng callback
* 2.2 : push phần tử vào mảng
– Bước 3: trả về mảng

Một số ứng dụng:
Sau đây là 1 số ví dụ của hàm này :

1. Cho một mảng cars, chúng ta cần loop qua và tạo một message như sau: Xe Ford có giá 200 …

2. Cho một mảng persons , chúng ta cần loop qua và kiểm tra nếu age > 18 thì sẽ tạo thêm một thuộc tính isAdult =  true, và ngược lại isAdult = false

2. Hàm filter: Phương thức filter[] dùng để tạo một mảng mới với tất cả các phần tử thỏa điều kiện
Xem thêm tại đây:
//developer.mozilla.org/vi/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

Hàm filter[] sẽ nhận vào 3 tham số giống như hàm map[]
Sau đây là cách cài đặt và một số ví dụ của hàm filter[]
– Bước 1: tạo arrayStored để lưu các giá trị của mảng mới
– Bước 2: loop qua các phần tử của mảng
2.1 : dùng callback và kiểm tra điều kiện
2.2 : push phần tử vào mảng
– Bước 3: trả về mảng

Sau đây là một số ứng dụng của hàm filter :

1. Cho một mảng persons và loại bỏ phần tử thoả mãn điều kiện id = 2

2. Cho mảng numbers và loại bỏ các phần tử trùng trong mảng

3. Hàm reduce: Phương thức reduce[] dùng để thực thi một hàm lên từng phần tử của mảng [từ trái sang phải] với một biến tích lũy để thu về một giá trị duy nhất.
Xem thêm tại đây:
//developer.mozilla.org/vi/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

-Implement hàm reduce

Hàm reduce[], các tham số truyền vào sẽ khác 1 chút so với 2 hàm kể trên [Cụ thể các bạn hãy đọc document của MDN nhé !]
Sau đây là một số ví dụ của hàm reduce[]

1. Cho một mảng trips ta cần tính tổng price của các phần tử có trong mảng trips

2. Cho một mảng persons, hãy tính số lượng male và female trong mảng

KẾT LUẬN:
Trong dự án Javascript thực tế , các hàm trên đặc biệt được sử dụng nhiều. Ở trên mình đã đưa ra một số ví dụ để các bạn tham khảo, tránh bỡ ngỡ khi gặp các hàm map[], filter[], reduce[]. Đây là bài viết đầu tiên của mình mong , chắc hẳn còn nhiều sai sót mong các bạn đóng góp . Happy Coding 😀

Các bạn cũng cần lưu ý là ngôn ngữ lập trình JavaScript là nền tảng để mình có thể phát triển thêm kỹ năng trên các framework như ReactJS, NodeJS, VueJS,…vì vậy nếu bạn đã có kiến thức nền tảng Javascript rồi thì bạn có thể tự tin apply vào 2 khóa học ReactJS & NodeJS của Nordic Coder để nâng cao kỹ năng cũng như CV của bạn:

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