Cách sử dụng Functions (Hàm) trong JavaScript: Hướng dẫn từng bước

JavaScript functions (hàm) là khối mã tùy chỉnh có thể tái sử dụng. Functions cho phép mã mô-đun (modular) hơn và thiết yếu cho lập trình hướng đối tượng. Functions có thể định nghĩa qua declarations (khai báo) hoặc expressions (biểu thức).

Nếu bạn học JavaScript tìm hiểu cơ bản, JS functions chắc chắn cần biết. Nếu dành thời gian làm việc với ngôn ngữ lập trình, bạn biết functions là building blocks (khối xây dựng) của chương trình phức tạp, nhưng có thể không biết cách chúng hoạt động. Functions cho phép viết mã một lần cho quy trình chung, thay vì lặp lại nhiều lần.

Functions là khối mã thực hiện hành động và có thể trả về giá trị. Functions có thể tùy chỉnh theo nhu cầu và dùng để làm mã hiệu quả, mô-đun hơn.

Trong tutorial này, khám phá cơ bản functions: cách định nghĩa function, cách gọi function, và khi nào chúng hữu ích.

Cách dùng JavaScript Define Function

Có hai cách định nghĩa function trong JavaScript: declarations và expressions. Bắt đầu với declaration.

JavaScript Function Declarations

Function Declarations định nghĩa hàm có tên. Để định nghĩa loại này, bắt đầu mã với từ khóa function, theo sau tên hàm. Ví dụ:

function nameOfYourFunction() { 
  // Function code 
}

Tên hàm tuân theo quy tắc biến – dùng chữ cái, underscore, số, thường viết camelCase. Sau tên biến, cặp ngoặc đơn chứa optional parameters. Sẽ nói sau.

Sau đó, như for hoặc if, mã hàm trong dấu ngoặc nhọn. Ví dụ hàm in Google ra console:

function printGoogle() { 
  console.log("Google"); 
}

Trong hàm printGoogle() là câu lệnh console.log() chạy khi hàm được gọi. Nhưng không gì xảy ra cho đến khi gọi hàm. Muốn gọi, dùng:

printGoogle();

Gộp mã thành một hàm, rồi invoke (gọi):

// Khai báo printGoogle()
function printGoogle() { 
  console.log("Google"); 
} 
// Gọi printGoogle()
printGoogle();

Đầu ra: Google. Hàm printGoogle() trả về kết quả khi invoked, ở dòng cuối.

Giờ code in trong hàm, có thể thực thi bao nhiêu lần tùy thích bằng cách gọi printGoogle().

JavaScript Function Expression

Cách khác khai báo function: tạo function expression. Làm bằng cách gán function cho biến.

Dùng ví dụ trên. Thay vì khai báo hàm riêng, gán cho biến. Ví dụ:

const google = function printGoogle() { 
  console.log("Google"); 
}

Để gọi expression, thêm dòng google() nơi muốn chạy.

Function Parameters (Tham số hàm)

Biết 2 cách khai báo function, khám phá cách tùy chỉnh tính năng này. Trong code trên, tạo hàm in Google ra console.

Để in tên khác như Facebook, phải đổi code. Nếu muốn user nhập tên công ty yêu thích in ra console, hàm trên không chạy.

Cần dùng parameters (tham số). Thêm tham số name vào hàm JS, có thể in bất kỳ tên nào qua hàm. Ví dụ:

function printCompany(name) { 
  console.log(`My favorite company is ${name}!`); 
}

Tên hàm printCompany(), tham số name. Tham số gọi trong hàm. Ví dụ dùng name parameter đổi nội dung console.log().

Chưa định nghĩa name. Để định nghĩa tham số, gán giá trị khi gọi hàm. Giả sử công ty yêu thích Snapchat. Gọi hàm đặt tên công ty làm argument trong ngoặc đơn.

Ví dụ:

// Gọi printCompany() với "Snapchat" làm "name"
printCompany("Snapchat");

Chạy mã, in ra:

My favorite company is Snapchat!

Trong ví dụ, gọi hàm printCompany(), gán name trong ngoặc. Giờ tái dùng hàm nhiều lần với tên khác.

Lưu ý: dùng bao nhiêu tham số tùy ý, tham chiếu theo thứ tự. Sẽ dùng ví dụ dưới đây.

Return Values (Giá trị trả về)

Trong ví dụ trước, chưa return giá trị. Chỉ in text ra console. Nhưng với function, cho tham số xử lý, trả về giá trị dựa trên câu lệnh return.

Ví dụ hàm cộng hai số trả tổng:

function addNumbers(first, second) { 
  return first + second; 
} 
addNumbers(1, 2);

Chương trình này, hàm gọi và 2 số truyền qua. Khi thực thi – dòng cuối ví dụ – ta được 3 trả về. Danh sách tham số cách nhau bởi dấu phẩy.

Chương trình cộng 1 và 2, tên tham số first và second trả về mã. Muốn thấy giá trị, thêm console.log() quanh dòng gọi addNumbers(1, 2).

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

Từ ECMAScript 6, có cách ngắn gọn hơn định nghĩa function gọi là arrow function. Dùng biểu thức: =>.

Đây là loại function expression. Ví dụ arrow function:

const addNumbers = (first, second) => { 
  return first + second; 
} 
addNumbers(10, 15);

Thay vì viết function, dùng mũi tên chỉ định khai báo function. Có vài khác biệt nhỏ giữa arrow function và regular function, nhưng không cần biết cho hầu hết use cases.

Khi chỉ làm việc một biến, không cần ngoặc đơn quanh. Nếu không làm việc biến nào, cần cặp ngoặc đơn rỗng () nơi khai báo biến.

Kết luận

Đó là tất cả cơ bản về functions. Tutorial bao gồm: function declarations, function expressions, return values, arrow functions.

Tóm lại, function là khối mã thực hiện hành động và trả về biến. Functions hữu ích nếu có nhiều dòng mã cần thực thi nhiều lần trong chương trình.

Thay vì viết nhiều dòng mỗi lần cần, thêm vào function và gọi function khi cần chạy code, truyền giá trị cần dùng vào function.

Các điểm chính từ bài viết:

• Functions là subprograms (chương trình con) thiết kế chạy những dòng code nhất định.
• Functions chỉ thực thi khi được gọi. Gọi là invoking a function.
• Giá trị có thể truyền vào function, dùng bên trong function.
• Functions có thể trả về giá trị.