JavaScript là một trong những ngôn ngữ lập trình phổ biến nhất trên thế giới. Nó được sử dụng rộng rãi trong việc phát triển các ứng dụng web, từ các trang web tĩnh đơn giản đến các ứng dụng web phức tạp và động. Hàm trong JavaScript rất quan trọng và đóng vai trò cốt lõi trong việc xây dựng ứng dụng JavaScript. Trong bài viết này Stringee sẽ cùng bạn tìm hiểu về Hàm trong JavaScript.

1. Hàm là gì?

Hàm (function) là một khối câu lệnh có thể tái sử dụng để thực hiện một tác vụ cụ thể. Hàm giúp tạo cấu trúc chương trình, tách riêng các phần mã khác nhau và cho phép tái sử dụng chúng.

2. Các loại hàm trong JavaScript

Hàm không có tham số Đây là hàm cơ bản nhất trong JavaScript, cú pháp của nó có dạng như sau:

function hamKhongCoThamSo() {
   //Thân hàm
  console.log(‘Hàm không có tham số’);
}

Hàm có tham số Đây là hàm thường xuyên được sử dụng, cú pháp của nó có dạng như sau:

function hamCoThamSo(thamSo1, thamSo2) {
   //Thân hàm
  console.log(“Chúng ta truyền vào tham số “ +thamSo1 +”và” +thamSo2);
}

Ví dụ: Chúng ta có hàm tính tổng 2 số

function getSum (a, b) {
  console.log(“Tổng: “+ a+b;
}

Hàm có tham số mặc định Đây thực ra là dạng hàm có truyền tham số và đồng thời xét luôn giá trị mặc định cho các tham số đó. Cú pháp:

function hamCoThamSoMacDinh (param_1 = value_1, ..., pram_n = value_2) {
 //code 
}

Trong đó: hamCoThamSo là tên của hàm các bạn muốn đặt. param_1,..., pram_n là các tham số mà các bạn muốn truyền vào hàm(không giới hạn số lượng). value_1,...,value_n là các giá trị tương ứng với các pram. VD: với hàm getSum ở trên mình sẽ xét tham số mặc định cho nó:

function getSum(a = 5, b = 10) { 
    console.log("Tổng: " + (a + b)); 
}

Hàm có và không trả về giá trị Trong javascript có hai loại hàm,đó là hàm có giá trị trả về và hàm không có giá trị trả về. Đối với hàm có giá trị trả về thì phải sử dụng từ khóa return Và ngược lại đối với hàm không có giá trị trả về thì không có từ khóa return VD: khai báo hàm getSum ở trên là hàm có giá trị trả về.

function getSum (a, b) {
  return a+b;
}

3. Cách sử dụng hàm?

Cú pháp để khai báo và định nghĩa một hàm trong JavaScript:

function tenHam(thamSo1, thamSo2, ...) {
  // Thân hàm 
  // Các câu lệnh và logic ở đây
  return val; // (tuỳ chọn) Trả về giá trị từ hàm
}

Một số điểm cần lưu ý khi khai báo hàm: tenHam là tên của hàm, có thể đặt tên bất kỳ tuân theo các quy tắc về đặt tên biến trong JavaScript. thamSo1, thamSo2, ... là các tham số (đầu vào) của hàm. Bạn có thể truyền hoặc không truyền các tham số. Nếu có nhiều hơn một tham số, chúng được phân tách bằng dấu phẩy. Thân hàm là nơi viết mã thực hiện tác vụ cần thiết. Đây là nơi có thể thực hiện các câu lệnh, điều kiện, vòng lặp, và các tác vụ khác return val; là một câu lệnh tùy chọn trong hàm, được sử dụng để trả về giá trị từ hàm. Nếu không có câu lệnh return hoặc không có giá trị trả về, hàm sẽ trả về undefined.

Dưới đây là một ví dụ đơn giản về khai báo và sử dụng một hàm trong JavaScript:

// Khai báo và định nghĩa hàm 

function sayHello(name) {
 var message = "Xin chào, " + name + "!";
 return message;
 } 

// Gọi hàm và in ra kết quả 

var result = sayHello("John"); 
console.log(result); // Output: Xin chào, John!

Trong ví dụ trên, chúng ta đã khai báo và định nghĩa một hàm sayHello nhận một tham số name. Hàm này tạo ra một chuỗi chào mừng và trả về chuỗi đó. Sau đó, chúng ta gọi hàm sayHello với tham số là "John" và gán giá trị trả về vào biến. Ngoài ra chúng ta có thể có các cách gọi hàm khác như: Gọi hàm không đối số: Ví dụ, nếu bạn có một hàm tên là helloWorld không có đối số, có thể gọi nó như sau:

helloWorld();

Gọi hàm với đối số: Ví dụ, nếu bạn có một hàm tên là sum có hai đối số, có thể gọi nó như sau:

sum(3,5);

Gán giá trị trả về của hàm cho một biến:

var result = calculate();

Ngoài ra, bạn cũng có thể gọi các hàm được khai báo trong các đối tượng hoặc module bằng cách sử dụng dấu chấm (dot notation) hoặc dấu ngoặc vuông (square brackets). Ví dụ:

// Gọi hàm trong đối tượng
var obj = {
  methodName: function() {
    // Thân hàm
  }
};

obj.methodName(); // Gọi hàm trong đối tượng

// Gọi hàm trong module
var module = {
  exportFunction: function() {
    // Thân hàm
  }
};

module.exportFunction(); // Gọi hàm trong module

Hàm có thể gọi lại chính nó Ví dụ, đây là một hàm tính giai thừa đệ quy:

function factorial (n){
if ((n == 0) || (n == 1)) {
    return 1;
}
else {
    return (n * factorial(n - 1));
}

4. Phạm vi của hàm

Các biến được định nghĩa bên trong một hàm không thể được truy cập từ nơi nào khác bên ngoài hàm, bởi vì biến đó được định nghĩa chỉ trong phạm vi của hàm. Tuy nhiên, một hàm có thể truy cập đến mọi biến và mọi hàm khác trong cùng phạm vi mà nó được định nghĩa. Nói cách khác, một hàm được định nghĩa trong phạm vi global có thể truy cập tới tất cả các biến đã được định nghĩa trong phạm vi global. Một hàm được định nghĩa bên trong một hàm khác có thể truy cập đến tất cả biến được định nghĩa bên trong hàm cha của nó, và bất cứ biến nào khác mà hàm cha của nó có quyền truy cập đến. Các bạn có thể tham khảo ví dụ dưới đây:

// Các biến sau được định nghĩa trong phạm vi global scope 
var num1 = 20, num2 = 3, name = "Dung";
 // Hàm này được định nghĩa trong phạm vi global scope 
function multiply() {
 return num1 * num2;
 } 
multiply(); // Returns 60
 // Một ví dụ hàm lồng nhau function getScore () {
 var num1 = 50, num2 = 50;
 function add() { 
return name + " scored " + (num1 + num2);
 }
 return add();
 } 
getScore(); // Returns "Dung scored 100"

5. Lời kết

Như vậy, chúng ta đã tìm hiểu những vấn đề cơ bản của Function trong JavaScript. Các bạn hãy thực hành và làm những ví dụ khác để hiểu hơn về chúng nhé. Hẹn gặp các bạn ở những bài viết tiếp theo.

Stringee hiện là đơn vị cung cấp bộ giải pháp giao tiếp Communication APIs giúp doanh nghiệp dễ dàng tích hợp các tính năng giao tiếp như gọi thoại/gọi video/chat vào ứng dụng hoặc website sẵn trong thời gian ngắn với chi phí tối ưu nhất. Giải pháp này cũng được hỗ trợ cho nền tảng React Native, chi tiết xin mời quý bạn đọc xem thêm tại đây.