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

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 Got It tìm hiểu về function trong JavaScript ở bài viết này nhé. 

1. Function trong JavaScript là gì?

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))

4. Đặ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

5. 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. 

6. 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. 

Got It hy vọng rằng với bài viết trên, bạn đã hiểu hơn về function trong JavaScript. Happy Coding.

Tìm hiểu thêm:

Hiện tại, Got It đang tuyển dụng các vị trí Software Engineer sử dụng JavaScript. Bạn có thể tham khảo tại đây hoặc subscribe chúng mình để không bỏ lỡ những tin tức mới nhất nhé!

Got It Vietnam – Tham khảo: MDN, Dmitri Pavlutin, Codeburst, JavaScript.info

Đọc thêm về quy trình tuyển dụng tại đây.

https://d1iv5z3ivlqga1.cloudfront.net/wp-content/uploads/2021/04/29235048/1_QAG9RXQyyMAY7i9OYo84FA.png
Got It Vietnam
February 05, 2021
Share this post to:
Tags:
0 Comments
Inline Feedbacks
View all comments
Các bài viết liên quan
Eclipse là gì? Hướng dẫn cài đặt Eclipse chi tiết nhất

Eclipse là gì? Hướng dẫn cài đặt Eclipse chi tiết nhất

Eclipse luôn nằm trong top những IDE tốt nhất dành cho lập trình viên. Có thể các bạn quan tâm đến IT đã ít nhất một lần nghe đến cái tên này. Vì vậy, ở bài viết này, Got It sẽ giải đáp những thắc mắc của bạn đọc về Eclipse là gì? Những ưu […]
Những cách lấy giá trị checkbox bằng JavaScript đơn giản nhất

Những cách lấy giá trị checkbox bằng JavaScript đơn giản nhất

Làm sao để lấy giá trị checkbox bằng JavaScript? Nhiều bạn khi bắt đầu học lập trình web rất hay phân vân câu hỏi này. Đây là một trong những tác vụ quan trọng giúp người dùng tương tác với website. Hãy cùng tìm Got It hiểu cách lấy giá trị checkbox khi sử dụng […]
JavaScript là gì? Giải thích chi tiết về JavaScript

JavaScript là gì? Giải thích chi tiết về JavaScript

JavaScript là gì? Đây là câu hỏi phổ biến mà các nhà tuyển dụng thường dùng khi phỏng vấn bạn về Frontend. Nếu bạn đang apply cho vị trí Frontend Engineer, hãy chắc chắn rằng bạn thực sự hiểu rõ về JavaScript. Đây là ngôn ngữ phổ biến nhất các egineer hay dùng để tạo […]
MEAN Stack là gì? Cấu trúc, ưu điểm của MEAN Stack

MEAN Stack là gì? Cấu trúc, ưu điểm của MEAN Stack

MEAN Stack là gì? Với những ai đã và đang làm việc với JavaScript thì chắc hẳn đã từng nghe đến khái niệm này. Bài viết dưới đây sẽ giới thiệu cho bạn về định nghĩa, cấu trúc và ưu điểm của giải pháp phát triển ứng dụng web này.  Mục lục1. MEAN Stack là […]
Các design pattern thông dụng trong JavaScript

Các design pattern thông dụng trong JavaScript

Các design pattern thông dụng không còn là công cụ xa lạ với giới lập trình viên. Nhờ có chúng, developer tạo được các mã code có thể bảo trì, khả dụng và dễ tái sử dụng, đặc biệt đối với các ứng dụng lớn. Bài viết dưới đây sẽ giúp bạn hiểu thêm về […]
Các cách lập trình hướng đối tượng trong JavaScript

Các cách lập trình hướng đối tượng trong JavaScript

Áp dụng lập trình hướng đối tượng trong JavaScript là việc không hề đơn giản, đặc biệt là với những ai mới bắt đầu tiếp cận với kỹ thuật này. Bài viết dưới đây giới thiệu về OOP và gợi ý cho bạn 4 thủ thuật để hiện thực các đặc tính của nó với […]