Function Trong Javascript

Posted on by mtoplistChuyên mục:Top List

Hôm nay bạn hãy cùng mình sẽ đi tìm hiểu khái niệm cũng như cách sử dụng function trong ngôn ngữ lập trình Javascript cho trang web nhé.

Function Javascript Là Gì?

Function(hàm) là một yếu tố cực kỳ quan trọng trong việc xây dựng chương trình cho trang web của chúng ta. Nó giúp bạn có thể tái sử dụng những đoạn code để thực thi ở những nơi khác nhau trong chương trình. Ví dụ khi bạn muốn tính toán tổng của hai số bất kỳ thì ta phải lặp đi lặp lại phép tính cộng với các số chúng ta muốn như console.log(2+2), console.log(5+9)… Ở đây function sẽ có nhiệm vụ giúp chúng ta thực thi một cách tổng quan hơn bằng cách sẽ cho người dùng nhập vào hai số rồi tự động xuất ra màn hình giá trị của tổng hai số mỗi khi function được gọi.

Trong các bài học trước thì chúng ta đã sử dụng một số function(hàm) trong Javascript như là alert(), console.log()… Trong bài hôm nay chúng ta sẽ đi vào tìm hiểu cách tạo và sử dụng function(hàm) trong Javascript nhé.

Syntax Function Trong Javascript

Để khai báo một hàm thì chúng ta sẽ dùng từ khóa là function, tiếp theo là tên hàm, danh sách các tham số(Có thể để trống nha) và đoạn mã mà chúng ta muốn thực thi. Để hiểu rõ hơn bạn xem cú pháp ở bên dưới nhé:

function Tên Hàm (Danh Sách Tham Số)
 {
     Đoạn mã chúng ta muốn thực thi
 }

Mình có một số lưu ý nhỏ về function (hàm) ở bên dưới nhé:

  • Mỗi function (hàm) nên bắt đầu bằng từ khóa function.
  • Nên sử dụng tên hàm duy nhất và có thể mô tả khái quát chức năng của hàm đó.
  • Danh sách tham số sẽ được đặt trong dấu ngoặc () và mỗi tham số sẽ được ngăn cách bằng dấu phẩy .
  • Đoạn mã thực thi sẽ được đặt trong dấu {}.

Ví dụ Function trong Javascript

Để bạn hiểu rõ hơn thì mình sẽ ví dụ sơ qua về cách kết hợp các tham số với function(hàm) trong Javascript ở dưới đây nhé:

Không có tham số:
 function xinChao() {
 /*Thực thi đoạn mã*/
 }
Có 1 tham số:
 function dienTichHinhVuong(a) {
 /*Thực thi đoạn mã*/
 }
Có từ 2 tham số trở lên:
 function tinhTong(a, b) {
 /*Thực thi đoạn mã*/
 }

Bây giờ chúng ta thử viết một hàm xin chào hoàn chỉnh nhé:

 function xinChao() {
 console.log("Xin Chào Các Bạn")
 }

Call Function trong Javascript

Sau khi đã khai báo hàm, việc tiếp theo là chúng ta cần gọi function để sử dụng hàm trong chương trình. Để hiểu rõ hơn bạn xem cú pháp gọi hàm bên dưới nhé:

 Tên Hàm(Tham Số);

Thì để thực tế hơn thì chúng ta sẽ đi vào ví dụ kết hợp khai báo hàm xinChao và gọi hàm để sử dụng trong chương trình của chúng ta ở bên dưới nhé:

 function xinChao() {
 console.log("Xin Chào Các Bạn")
 } 
 xinChao();

Kết quả ở bên dưới nhé:

Sử dụng hàm và gọi hàm trong Javascript

Mục đích chính của hàm là giúp chúng ta thực thi những đoạn mã nhiều lần mà không cần phải viết lại đoạn mã đó. Bây giờ chúng ta thử gọi hàm nhiều lần để hiểu hơn về cách tái sử dụng code ở ví dụ bên dưới nhé:

 function xinChao() {
 console.log("Xin Chào Các Bạn")
 } 
 xinChao();
 xinChao();
 xinChao();
 xinChao();

Bạn xem kết quả ở bên dưới nhé:

Gọi hàm nhiều lần trong Javascript

Sử Dụng Biến(Variable) Trong Javascript Function

Mỗi cách khai báo và vị trí của biến sẽ ảnh hưởng đến kết quả mà function(hàm) của chúng ta khi xuất ra màn hình. Thì để hiểu rõ hơn bạn xem bên dưới nhé:

Biến cục bộ

Khai báo bên trong function(hàm) và chỉ được thấy và sử dụng bởi hàm đó. Để nắm rõ hơn bạn xem ví dụ sau nhé:

 function xinChao() {
    let thongDiep= "Xin Chào Các Bạn";/*Biến Cục Bộ*/
    console.log( thongDiep);
  }
  xinChao();
  console.log(thongDiep);

Bạn xem kết quả bên dưới nhé:

Sử dụng biến cục bộ trong hàm Javascript

Như bạn thấy thì khi khai báo biến thongDiep bằng từ khóa let trong hàm xinChao thì chỉ nó mới có thể sử dụng được còn ngoài phạm vi hàm thì sẽ xảy ra lỗi biến thongDiep chưa được khai báo.

Biến toàn cục

Giá trị của biến thì có thể khai báo bên ngoài function(hàm) và được sử dụng trong đoạn mã thực thi của hàm. Để hiểu rõ hơn bạn xem ví dụ sau đây nhé:

 let ten = 'Hong';
 function xinChao() {
    let thongDiep= 'Xin Chào, ' + ten;
    console.log(thongDiep);
  }
  xinChao();

Bạn xem kết quả ở bên dưới nhé:

Sử dụng biến toàn cục trong hàm Javascript

Qua đây bạn có thể thấy là function(hàm) có thể truy cập và sử dụng những biến nằm ở bên ngoài. Ngày nay thì người ta ít sử dụng biến toàn cục mà thay vào đó là khai báo các biến nằm bên trong hàm(biến cục bộ) vì nó thuận tiện trong việc tìm kiếm, sửa đổi, phù hợp với các dự án lớn.

Sử Dụng Tham Số Trong Javascript Function

Bây giờ chúng ta sẽ cùng nhau đi vào tìm hiểu về cách kết hợp tham số với function(hàm) trong Javascript. Để hiểu rõ hơn bạn xem đoạn code sau nhé:

 function xinChao(ten) {
    let thongDiep= 'Xin Chào, ' + ten;
    console.log(thongDiep);
  }
  xinChao("An");

Bạn xem kết quả ở bên dưới nhé:

Sử dụng tham số trong hàm Javascript

Như bạn thấy là chúng ta truyền một đối số có giá trị là chuỗi ‘An’ vào hàm xinChao. Lúc này thì tham số ten của hàm sẽ có giá trị bằng ‘An’. Sau đó chúng ta sử dụng tham số ten để tạo ra giá trị chuỗi cho biến thongDiep và xuất kết quả ra màn hình.

Mình có lưu ý là khi các tham số không được khai báo thì giá trị của nó sẽ là undefined. Để hiểu rõ hơn bạn xem ví dụ sau đây nhé:

 function xinChao(thongDiep, ten) {
     console.log(thongDiep + ten);
   }
  xinChao("Xin Chào ");

Bạn xem kết quả ở bên dưới nhé:

Tham số undefined trong hàm Javascript

Như bạn thấy thì khi ta quên không khai báo đủ tham số cho hàm xinChao thì nó sẽ mặc định hiểu là tham số thongDiep sẽ bằng với chuỗi “Xin Chào “ và tham số ten không được thông báo nên mặc định sẽ được hiểu là undefined nên chúng ta có kết quả ngoài màn hình là Xin Chao undefined.

Để tránh trường hợp như trên thì chúng ta có thể để gán giá trị mặc định cho tham số ở trong hàm bằng đoạn code sau đây nhé:

 function xinChao(thongDiep, ten = "An") {
     console.log(thongDiep + ten);
   }
  xinChao("Xin Chào ");

Bạn xem kết quả ở bên dưới nhé:

Gán giá trị mặc định trong hàm Javascript

Sử Dụng Return Trong Javascript Function

Tất cả những function(hàm) trong Javascript đều trả về giá trị undefined nếu ta không xác định kết quả trả về cho nó. Để hiểu rõ hơn bạn xem đoạn code sau đây nhé:

 function xinChao(thongDiep) {
      console.log(thongDiep);
  }
 let ketQua= xinChao('Xin Chào Các Bạn');
 console.log('Kết quả:', ketQua);

Bạn xem kết quả ở bên dưới nhé:

Giá trị trả về undefined trong hàm Javascript

Ở đây chúng ta gán kết quả của hàm vào biến ketQua để kiểm tra giá trị trả về của hàm, như bạn thấy thì nó trả về là Kết quả: undefined. Vậy làm sao chúng ta có thể xác định được kết quả trả về cho hàm?

Thì trong Javascript có cung cấp cho chúng ta một lệnh là return, nó có thể đặt ở bất kỳ vị trí nào trong hàm và khi thực hiện đến câu lệnh return thì nó sẽ dừng hàm lại và trả về kết quả của hàm. Bây giờ chúng ta thử đi vào ví dụ tính tổng ở bên dưới đây nhé:

 function tinhTong(a, b) {
    return a + b;
  }
  let ketQua= tinhTong(2, 4);
  console.log(ketQua);

Bạn xem kết quả ở bên dưới nhé:

Tính Tổng trong hàm Javascript

Đầu tiên chúng ta sẽ gọi hàm tinhTong với hai tham số được truyền vào. Khi đó bên trong hàm chúng ta muốn trả về tổng giá trị của hai tham số thì chỉ cần gọi lệnh return và kết quả thì như bạn đã thấy ở hình trên. Ngoài ra trong Javascript chúng ta có thể sử dụng nhiều câu lệnh return ở trong hàm như ở ví dụ bên dưới đây nhé:

 function soSanh(a, b) {
      if (a > b) {
          return -1;
      } else if (a < b) {
          return 1;
      }
      return 0;
  }
  let ketQua = soSanh(4, 10);
  console.log(ketQua);

Bạn xem kết quả ở bên dưới nhé:

Nhiều câu lệnh return trong hàm Javascript

Trong hàm soSanh thì chúng ta sẽ so sánh giá trị của hai tham số:

  • Trả về -1 nếu tham số 1 lớn hơn tham số 2.
  • Trả về 1 nếu tham số 1 nhỏ hơn tham số 2.
  • Trả về 0 nếu tham số 1 bằng tham số 2.

Chúng ta cũng có thể sử dụng lệnh return để dừng thực thi hàm khi kiểm tra điều kiện nào đó không hợp lệ. Ví dụ bạn có một hàm xinChao với một tham số là ten dùng để xuất lời chào ra ngoài màn hình. Nhưng bạn muốn kiểm tra là khi tham số ten là chuỗi rỗng thì sẽ dừng thực thi hàm. Trường hợp này chúng ta có thể sử dụng lệnh return để làm việc đó. Để hiểu rõ hơn bạn xem đoạn code sau nhé:

 function xinChao(ten) {
     /*Kiểm tra có phải là chuỗi rỗng không?*/
     if (ten.length == 0) {
         return;
     }
     console.log("Xin Chào" + ten);
  }

Gọi Function Trước Khai Báo Javascript

Trong Javascript cho phép chúng ta gọi hàm trước khi khai báo, định nghĩa hàm trong chương trình. Để nắm rõ hơn bạn xem đoạn code sau nhé:

 xinChao();
 function xinChao() {
 console.log("Xin Chào Các Bạn")
 }

Bạn xem kết quả ở bên dưới nhé:

Gọi hàm trước khi khai báo trong Javascript

Tổng kết:

Mình có một số đúc kết khi sử dụng function(hàm) trong Javascript như sau:

  • Một hàm có thể trả về giá trị. Nếu không thì giá trị trả về của hàm sẽ là undefined.
  • Để cho đoạn code dễ nhìn và sạch sẽ hơn thì bạn nên khai báo các biến nằm ở bên trong function(hàm).
  • Khi khai báo hàm thì nên sử dụng từ khóa function.
  • Nên đặt tên rõ ràng, dễ hiểu và liên quan đến chức năng của function(hàm).
  • Để thực thi hàm thì chúng ta phải gọi tên hàm trong chương trình.

Qua đây mình mong bài viết sẽ giúp bạn hiểu được khái niệm cũng như cách sử dụng function (hàm) trong ngôn ngữ Javascript và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!

mtoplist