Function trong JavaScript: Những kiến thức cơ bản

King Mountain -

Mở đầu

JavaScript là một ngôn ngữ lập trình phổ biến, được sử dụng rộng rãi cho trang web và máy chủ. Hãy cùng tôi tìm hiểu về function trong JavaScript ở bài viết này nhé.

1. Function trong JavaScript là gì?

Function (hàm) trong JavaScript giống với hầu hết các ngôn ngữ lập trình và ngôn ngữ script khác.

JavaScript Function cũng giống với hàm của hầu hết ngôn ngữ lập trình và ngôn ngữ script (ngôn ngữ kịch bản) khác. Trong JavaScript, một hàm cho phép bạn định nghĩa, đặt tên và thực thi một khối code, không giới hạn số lần. Một JavaScript được định nghĩa bằng cách sử dụng từ khóa ‘function’.

Function (hàm) là một trong những khối hợp nhất quan trọng nhất của JavaScript. Một hàm trong JavaScript giống với một phương thức – một loạt các câu lệnh để thực hiện một task (nhiệm vụ) hay tính toán một giá trị. Nhưng để một phương thức trở thành một function, phương thức đó phải nhận input (giá trị vào) và trả lại output (giá trị ra). Tồn tại một mối quan hệ nào đó giữa input và output. Để sử dụng một function, bạn phải định nghĩa nó trong phạm vi bạn muốn gọi nó.

2. Các yếu tố ảnh hưởng đến function

Trong JavaScript, một function được cấu thành và chịu ảnh hưởng của những yếu tố sau:

  • Code JavaScript hình thành nên function body
  • Danh sách các tham số
  • Biến số tiếp cận được từ lexical scope (phạm vi cục bộ)
  • Giá trị trả về
  • Bối cảnh this mà function được invoke
  • Function có tên hoặc ẩn danh
  • Biến số nắm giữ đối tượng function
  • Đối tượng đối số (hoặc không có trong arrow function)

3. Các tính chất của hàm trong JavaScript

Bạn đã biết tính chất của hàm trong JavaScript chưa?

  • Hàm là một chương trình con được thiết kế để thực hiện một task nhất định
  • Các hàm chỉ được thực hiện khi chúng được gọi. Điều này được gọi là invoke (mời) một function.
  • Các giá trị có thể được truyền vào hàm và sử dụng bên trong hàm.
  • Hàm luôn return (trả lại) một giá trị. Trong JavaScript, nếu không có giá trị return, hàm sẽ trả lại “undefined”.
  • Hàm là đối tượng.

4. Xác định một function trong JavaScript

Function Definition

Định nghĩa function, hay khai báo function, bao gồm từ khóa function. Theo sau từ khóa này là:

  • Tên function. Tên function có thể chứa các chữ cái, chữ số, gạch dưới hay ký hiệu đô-la (quy luật giống với biến số)
  • Danh sách các tham số của function, đặt trong dấu ngoặc tròn và phân cách nhau bởi dấu phẩy.
  • Câu lệnh JavaScript định nghĩa function đặt trong dấu ngoặc nhọn.

Sau đây là cú pháp khai báo function:

// defining a function
function <function-name>()
{
    // code to be executed;
}

Function Expression

Ngoài cách trên, còn có một cách khác để tạo function trong JavaScript. Đó là thông qua Function Expression, hay biểu thức hàm. Một function như vậy có thể là hàm ẩn danh: Nó không nhất thiết phải có tên. Dưới đây là một ví dụ về một biểu thức function:

const square = function(number) {
    return number * number;
}
var x = square(4); // x gets the value 16

Tuy nhiên, cũng có thể cung cấp tên cho một biểu thức hàm. Tên sẽ cho phép function nhắc đến chính nó và cũng giúp dễ dàng nhận dạng một function trong strack trace (dấu vết ngăn xếp).

const factorial = function fac(n) {
    return n < 2 ? 1 : n * fac(n - 1);
}
console.log(factorial(3));

5. Đặt tên function

Function là hàm, hay còn gọi là chức năng. Vì thế tên function thường là một động từ. Tên function nên ngắn gọn và chính xác nhất có thể. Quan trọng hơn, nó phải miêu tả rõ function thực hiện việc gì. Như vậy, người đọc code sẽ hiểu được chính xác nhiệm vụ của function đó.

Thông thường, một function sẽ được bắt đầu bằng một tiền tố động từ. Tiền tố này không miêu tả cụ thể công việc của function là gì. Vì vậy cần có sự đồng thuận trong một nhóm về ý nghĩa của các tiền tố này. Ví dụ, hàm bắt đầu với “show” thường sẽ cho xem thứ gì đó.

Function bắt đầu với:

  • "get…": trả về một giá trị
  • "create…": tạo
  • "calc…": tính toán
  • "check…": kiểm tra

Cụ thể hơn, trong thực tế, có thể có những tên function như sau:

showMessage(..)     // cho xem một message
getAge(..)          // trả lại số tuổi
calcSum(..)         // tính tổng và trả lại giá trị
createForm(..)      // tạo một form
checkPermission(..) // kiểm tra một permission, trả lại true/false

6. Cách gọi function

Xác định một function không có nghĩa là thực hiện nó. Việc xác định chỉ đặt tên cho function và cụ thể hóa function sẽ làm gì khi được gọi. Gọi function mới là bước thực hành những hành động đã được nhắc đến với tham số được trình bày trước.

Function phải nằm trong phạm vi chúng được gọi. Nhưng khai báo hàm có thể được hoist (chuyển lên trước), như trong ví dụ dưới đây:

console.log(square(5));
/* ... */
function square(n) { return n * n; }

Lưu ý rằng hoisting chỉ có thể được thực hiện với khai báo hàm. Chúng ta không thể thực hiện hoisting với biểu thức hàm.

7. Phạm vi function

Các biến số được định nghĩa trong một hàm không thể truy cập được từ bên ngoài vì biến chỉ xác định trong phạm vi hàm đó. Tuy nhiên, một hàm có thể truy cập tất cả các biến và hàm được xác định bên trong phạm vi nó được định nghĩa.

Nói cách khác, một hàm được định nghĩa trong global scope (phạm vi toàn bộ) có thể truy cập toàn bộ biến được định nghĩa trong global scope. Một hàm được định nghĩa bên trong một hàm khác cũng có thể truy cập tất cả các biến được định nghĩa trong hàm cha, hay bất cứ biến nào mà hàm cha được truy cập.

Kết luận

Trên đây là 1 số điều cơ bản về Function trong JavaScript. Sẽ còn những kiến thức chuyên sâu hơn rất nhiều khi áp dụng vào từng dự án, trường hợp cụ thể. Vì vậy, việc đầu tiên thì tiên quyết phải là nắm vững cơ bản cái đã hehe.

Hapo-Logs luôn hy vọng với mỗi bài viết của mình, sẽ thực sự đem lại cho bạn những kiến thức có giá trị. Cảm ơn, happy coding !