Functions JavaScript: Hướng Dẫn Toàn Diện Từ A-Z (Kèm Ví Dụ)

Nếu bạn đang bắt đầu với lập trình, functions JavaScript có thể là một trong những khái niệm đầu tiên bạn gặp. Chúng giống như những ‘cỗ máy’ nhỏ, thực hiện một nhiệm vụ cụ thể mỗi khi được gọi. Bài viết này sẽ cùng bạn tìm hiểu từ định nghĩa cơ bản đến các cách viết và sử dụng chúng hiệu quả nhất. Hãy sẵn sàng để biến những dòng code lặp đi lặp lại thành các khối lệnh gọn gàng và mạnh mẽ nhé!

Giới thiệu về Functions trong JavaScript

Function trong JavaScript là gì?

Trong JavaScript, một function (hàm) là một khối mã được thiết kế để thực hiện một tác vụ cụ thể. Hãy tưởng tượng nó như một chiếc máy xay sinh tố. Bạn cho nguyên liệu (dữ liệu) vào, nó thực hiện một hành động (xay), và trả về kết quả (một ly sinh tố thơm ngon).

Một function được định nghĩa một lần nhưng có thể được gọi và tái sử dụng nhiều lần. Điều này giúp code của bạn trở nên gọn gàng và dễ quản lý hơn rất nhiều.

Tại sao phải sử dụng Function?

Sử dụng function không chỉ là một lựa chọn, mà là một phương pháp lập trình thông minh. Lý do chính là vì chúng giúp chúng ta:

• Tái sử dụng code: Thay vì viết đi viết lại cùng một đoạn mã ở nhiều nơi, bạn chỉ cần viết nó một lần trong một function và gọi tên nó khi cần. Điều này tiết kiệm thời gian và công sức.
• Tổ chức code tốt hơn: Functions giúp chia nhỏ một chương trình lớn thành các phần nhỏ hơn, dễ quản lý hơn. Mỗi function có một nhiệm vụ riêng, giúp bạn dễ dàng đọc hiểu và bảo trì code.
• Dễ dàng sửa lỗi: Khi một chức năng nào đó bị lỗi, bạn chỉ cần tìm đến function tương ứng để sửa. Bạn không cần phải rà soát lại toàn bộ chương trình.

Các cách viết một Function trong JavaScript

JavaScript cung cấp nhiều cách để bạn có thể define function in javascript. Mỗi cách có ưu điểm và trường hợp sử dụng riêng. Hãy cùng WiWeb tìm hiểu 4 cách phổ biến nhất nhé.

Function Declaration (Khai báo hàm)

Đây là cách khai báo hàm truyền thống và phổ biến nhất. Bạn sử dụng từ khóa function, theo sau là tên hàm, cặp dấu ngoặc đơn (), và khối mã trong dấu ngoặc nhọn {}.

Một đặc điểm quan trọng của javascript function declaration là hoisting. Nghĩa là bạn có thể gọi hàm trước khi nó được định nghĩa trong code.

// Có thể gọi hàm trước khi khai báo
sayHello();

function sayHello() {
  console.log('Xin chào từ WiWeb!');
}

Function Expression (Biểu thức hàm)

Với javascript function expression, hàm được gán cho một biến. Hàm này có thể có tên (named) hoặc không có tên (anonymous). Cách này không có cơ chế hoisting, nghĩa là bạn phải định nghĩa nó trước khi gọi.

// Gán một hàm ẩn danh cho biến 'greet'
const greet = function() {
  console.log('Chào bạn, đây là Function Expression!');
};

// Chỉ có thể gọi sau khi đã khai báo
greet();

Arrow Functions (Hàm mũi tên – ES6)

Arrow functions javascript được giới thiệu trong phiên bản ES6. Chúng cung cấp một cú pháp ngắn gọn hơn để viết hàm. Đây là lựa chọn tuyệt vời cho các hàm đơn giản, đặc biệt là các hàm callback.

// Cú pháp ngắn gọn của Arrow Function
const add = (a, b) => a + b;

// Gọi hàm
console.log(add(5, 3)); // Kết quả: 8

Lưu ý rằng arrow function có một số khác biệt về cách xử lý this so với các hàm thông thường.

Immediately Invoked Function Expressions (IIFE)

IIFE là một hàm được định nghĩa và thực thi ngay lập tức. Cú pháp của nó hơi lạ một chút. Hàm được bao bọc trong dấu ngoặc đơn, và theo sau là một cặp ngoặc đơn khác để gọi nó.

Cách này rất hữu ích để tạo ra một scope riêng, tránh làm ô nhiễm scope toàn cục.

(function() {
  let message = 'Tôi chạy ngay lập tức!';
  console.log(message);
})();
// Biến 'message' không thể truy cập từ bên ngoài

Cách gọi và thực thi một Function

Viết một function chỉ là một nửa câu chuyện. Để nó thực sự làm việc, bạn cần phải gọi nó. Việc này trong JavaScript rất đơn giản.

Cú pháp gọi hàm cơ bản với toán tử ()

Để thực thi một hàm, bạn chỉ cần viết tên hàm và theo sau là cặp dấu ngoặc đơn ().

function showMessage() {
  console.log('Function đã được gọi!');
}

// Thực thi hàm
showMessage(); // In ra: 'Function đã được gọi!'

Nếu hàm có tham số, bạn sẽ truyền các đối số vào bên trong cặp dấu ngoặc đơn này. Chúng ta sẽ tìm hiểu kỹ hơn ở phần sau.

Lưu ý về việc gọi hàm và tham chiếu hàm

Đây là một điểm rất quan trọng mà nhiều người mới học hay nhầm lẫn. Bạn có thấy sự khác biệt giữa showMessage và showMessage() không?

• showMessage (không có dấu ()): Đây là một tham chiếu đến chính function đó. Bạn đang nói về cái hàm, chứ không phải chạy nó.
• showMessage() (có dấu ()): Đây là một lời gọi hàm. Bạn đang yêu cầu JavaScript thực thi đoạn mã bên trong hàm.

Thử xem ví dụ này để thấy rõ hơn nhé!

// Tham chiếu đến hàm
console.log(showMessage);
// Kết quả: ƒ showMessage() { ... }

// Gọi hàm và nhận kết quả
console.log(showMessage());
// Kết quả: In ra 'Function đã được gọi!' và sau đó là 'undefined' (vì hàm không có giá trị trả về)

Làm việc với Tham số và Đối số (Parameters & Arguments)

Hầu hết các hàm đều cần nhận dữ liệu đầu vào để xử lý. Đây là lúc chúng ta cần đến tham số và đối số.

Phân biệt Parameters (tham số) và Arguments (đối số)

Hai thuật ngữ này thường được dùng thay thế cho nhau, nhưng chúng có ý nghĩa khác nhau:

• Parameters (Tham số): Là các biến được liệt kê trong phần định nghĩa hàm. Chúng hoạt động như những cái tên giữ chỗ cho dữ liệu sẽ được truyền vào.
• Arguments (Đối số): Là các giá trị thực tế mà bạn truyền vào hàm khi gọi nó.

Nói đơn giản: Parameter là cái tên trong công thức, Argument là nguyên liệu thật bạn bỏ vào.

// 'name' và 'age' là các parameters
function displayInfo(name, age) {
  console.log(`Tên: ${name}, Tuổi: ${age}`);
}

// 'WiWeb' và 2 là các arguments
displayInfo('WiWeb', 2);

Tham số mặc định (Default Parameters)

Đôi khi, bạn muốn một tham số có giá trị mặc định nếu người dùng không truyền đối số cho nó. ES6 giúp việc này trở nên cực kỳ dễ dàng.

function greet(name = 'bạn') {
  console.log(`Xin chào, ${name}!`);
}

greet('WiWeb'); // Kết quả: Xin chào, WiWeb!
greet();      // Kết quả: Xin chào, bạn!

Đối tượng arguments

Bên trong mỗi hàm (trừ arrow function), có một đối tượng đặc biệt giống-mảng tên là arguments. Nó chứa tất cả các đối số được truyền vào hàm, bất kể hàm có định nghĩa tham số hay không.

function sumAll() {
  let total = 0;
  for (let i = 0; i < arguments.length; i++) {
    total += arguments[i];
  }
  return total;
}

console.log(sumAll(1, 2, 3)); // Kết quả: 6
console.log(sumAll(10, 20));  // Kết quả: 30

Tuy nhiên, với cú pháp ES6 hiện đại, chúng ta thường dùng rest parameters (...args) thay thế cho đối tượng arguments.

Giá trị trả về với câu lệnh return

Không phải lúc nào hàm cũng chỉ thực hiện hành động rồi thôi. Thường thì chúng ta muốn hàm tính toán và trả về một kết quả nào đó. Đó là nhiệm vụ của câu lệnh return.

Cách một hàm trả về giá trị

Khi JavaScript gặp câu lệnh return bên trong một hàm, nó sẽ ngay lập tức dừng việc thực thi hàm và trả về giá trị theo sau return.

function calculateArea(width, height) {
  const area = width * height;
  return area; // Trả về giá trị của biến area
}

// Gọi hàm và lưu kết quả vào một biến khác
let rectangleArea = calculateArea(10, 5);
console.log(rectangleArea); // Kết quả: 50

Một hàm chỉ có thể có một giá trị trả về duy nhất. Nếu bạn muốn trả về nhiều giá trị, bạn có thể gói chúng vào một object hoặc một array.

Hàm không có return

Vậy điều gì sẽ xảy ra nếu một hàm không có câu lệnh return? Hoặc có return nhưng không đi kèm giá trị nào?

Trong những trường hợp đó, hàm sẽ tự động trả về undefined.

function doSomething() {
  console.log('Tôi đang làm gì đó...');
  // Không có câu lệnh return
}

let result = doSomething();
console.log(result); // Kết quả: undefined

Đây là một hành vi mặc định quan trọng cần ghi nhớ khi bạn làm việc với functions JavaScript.

Tìm hiểu về Phạm vi (Scope) của Function

Scope (phạm vi) là một khái niệm cốt lõi trong JavaScript. Nó quyết định khả năng truy cập của các biến và hàm ở những nơi khác nhau trong code. Có hai loại scope chính bạn cần nắm.

Global Scope (Phạm vi toàn cục)

Bất kỳ biến hoặc hàm nào được khai báo bên ngoài tất cả các hàm đều thuộc về global scope. Chúng có thể được truy cập từ bất kỳ đâu trong chương trình của bạn.

// Biến này thuộc Global Scope
const globalMessage = 'Tôi ở khắp mọi nơi!';

function showGlobalMessage() {
  console.log(globalMessage); // Có thể truy cập ở đây
}

showGlobalMessage();
console.log(globalMessage); // Và cả ở đây

Lạm dụng biến toàn cục có thể dẫn đến các lỗi khó lường, vì vậy hãy cẩn thận nhé.

Local Scope / Function Scope (Phạm vi cục bộ)

Các biến được khai báo bên trong một hàm thuộc về local scope (hay function scope). Chúng chỉ có thể được truy cập từ bên trong chính hàm đó. Mọi nỗ lực truy cập từ bên ngoài sẽ gây ra lỗi.

function createLocalScope() {
  // Biến này thuộc Local Scope
  const localMessage = 'Bạn chỉ thấy tôi ở trong này thôi!';
  console.log(localMessage);
}

createLocalScope(); // Hoạt động bình thường

// Dòng này sẽ gây ra lỗi ReferenceError!
// console.log(localMessage);

Điều này giúp tạo ra sự đóng gói, đảm bảo các biến của một hàm không vô tình can thiệp vào các phần khác của chương trình.

Kết luận

Vậy là chúng ta đã cùng nhau đi qua những kiến thức nền tảng nhất về functions JavaScript. Đây là một chủ đề lớn, nhưng hy vọng bạn đã nắm được những ý chính.

Để giúp bạn dễ nhớ hơn, WiWeb tóm tắt nhanh nhé:

• Function Declaration: Dùng cho các hàm chính, quan trọng trong chương trình của bạn. Hữu ích khi bạn cần sự linh hoạt của hoisting.
• Function Expression: Dùng khi bạn cần gán hàm cho một biến, ví dụ như truyền nó làm đối số cho một hàm khác (callback).
• Arrow Function: Ưu tiên hàng đầu cho các hàm ngắn, đơn giản, và các hàm callback. Cú pháp gọn gàng và dễ đọc.
• IIFE: Dùng khi bạn cần thực thi một đoạn mã ngay lập tức và tạo một scope riêng để tránh xung đột biến.

Bây giờ, hãy kết hợp những gì đã học để tạo một hàm thực tế hơn. Hàm này sẽ nhận một mảng các điểm số, tính điểm trung bình, và trả về kết quả xếp loại.

// Sử dụng arrow function cho ngắn gọn
const getGrade = (scores) => {
  // Tính tổng điểm
  let total = 0;
  for (let score of scores) {
    total += score;
  }

  // Tính điểm trung bình
  const avg = total / scores.length;

  // Trả về xếp loại dựa trên điểm trung bình
  if (avg >= 8) {
    return 'Giỏi';
  } else if (avg >= 6.5) {
    return 'Khá';
  } else {
    return 'Trung bình';
  }
};

// Gọi hàm với một mảng điểm số (đối số)
const myScores = [8, 9, 7, 10];
const myGrade = getGrade(myScores);

console.log(`Xếp loại của bạn là: ${myGrade}`); // Kết quả: Xếp loại của bạn là: Giỏi

Thực hành với các javascript function examples như trên là cách tốt nhất để bạn thành thạo chúng. Bạn còn thắc mắc nào về chủ đề này không? Hãy để lại ý kiến của bạn nhé!

Nếu bạn cần một website chuyên nghiệp để phát triển thương hiệu, WiWeb luôn sẵn sàng tư vấn. Liên hệ với chúng tôi nhé!