JavaScript và những khái niệm cần nắm vững - Phần 4

21 tháng 7, 2021 By DEVERA ACADEMY

Cùng Devera tiếp tục cuộc hành trình học Javascript nhé! Trong những bài viết trước, các khái niệm cơ bản, không kém quan trọng về mặt lý thuyết của Javascript đều đã được điểm qua. Còn bây giờ, chúng ta sẽ cùng nhau đi sâu vào các khái niệm thuộc phần coding, bạn có thể áp dụng các hướng dẫn dưới đây vào việc thực hành với ngôn ngữ JavaScript.

Trước khi đi sâu vào nội dung tiếp theo của series này, bạn có thể xem lại các bài viết trước tại đây:

Còn bây giờ, cùng tiếp tục hành trình thôi nào!

Cú pháp khai báo cơ bản

Cùng xem đoạn code dưới đây:


Đoạn code khai báo một hàm tên "simpleCaculation" để tính toán và hiện kết quả của phép tính 2+1. Và kết quả là ... là 3!

Khai báo hàm như một thuộc tính của đối tượng

Dưới đây là đoạn code dùng để hiện họ và tên của DJ producer phổ biến lên màn hình console:

Ở đây chúng ta thực hiện định nghĩa một object tên là "Person" với ba thuộc tính bao gồm: firstName, lastNameprintFullName. Trong đó printFullName là hàm sử dụng để hiện họ và tên được lưu trong object lên console.

Để gọi hàm bên trong object Person ta sử dụng cú pháp với ngoặc đơn như dòng 20.

Sử dụng hàm dưới dạng một biểu thức

Chúng ta có thể lưu hàm vào một biến như một biểu thức à không cần phải khai báo.


Ở đây, chúng ta gán một hàm có tên là "startDJ" vào một biến const là "start", dưới dạng một biểu thức.

Chúng ta có thể gọi hàm bằng cách sử dụng tên biến "start" với dấu ngoặc đơn như dòng số 23.

Chúng ta không gọi hàm từ tên của nó là "startDJ", chỉ có thể gọi hàm thông qua tên biến và đó chính là cú pháp khi sử dụng hàm như một biểu thức. Bạnhoàn toàn có thể bỏ qua khai báo tên hàm "startDJ" vì nó cũng không sử dụng đến.

 

So sánh khai báo hàm và sử dụng hàm dưới dạng biểu thức

Bây giờ bạn có thể đang nghĩ không biết rằng nên sử dụng cách nào? Thế thì bây giờ  chúng ta cùng làm một phép so sánh nhỏ nhé!

Khi khai báo hàm,  chúng ta khai báo một hàm ở bất kỳ vị trí nào trong tệp, Javascript luôn xác định nó là nó nằm ở đầu tệp của chúng ta (Hoisting), thậm chí là có thể gọi hàm trước khi khởi tạo hàm.

Gọi hàm "simpleCalculation" trước khi khai báo nó thử xem nhé.


Và  ngay đây là câu trả lời:


Còn đối với hàm dưới dạng một biểu thức, tuy rằng Javascript cũng khởi tạo biến giống như trong khai báo (Hoisting), nhưng chúng ta không thể gọi hàm đó trước khi khởi tạo.

Javascript sẽ xác định biến thuộc kiểu const  - nơi chúng ta lưu trữ biểu thức hàm - là không xác định (undefined) khi chúng ta gọi hàm trước khi khởi tạo nó.

Đó là sự đặc biệt của JavaScript. Bây giờ, cùng thử gọi hàm "startDJ" trước khi khai báo.


Và đây là kết quả:


Đây chính là sự khác biệt giữa hai cách tiếp cận khác nhau này!

Hàm ẩn danh (Anonymous Function)

Nếu bạn đang làm việc trên một dự án phát triển web sử dụng javascript và nghĩ đến việc kích hoạt một hàm khi nhấp chuột vào một nút hoặc cho bất kỳ phần tử nào, bạn có thể khai báo trực tiếp một hàm làm đối số cho hàm addEventListner.

Hãy xem đoạn code phía dưới đây:

 "StartGameBtn" là một biến kiểu const cho một phần tử nút, sử dụng hàm addEventListener và đang nhận một hàm ẩn danh làm đối số. 

Nếu chúng ta gọi một hàm đã được khai báo vào bên trong addEventListener, bất kỳ ai muốn xem hoạt động của event này sẽ phải kiểm tra xem hàm được gọi đó thực sự đã được khai báo ở đâu. Còn với cách này, chúng ta đang truyền trực tiếp một hàm dưới dạng đối số nên không cần phải tìm trên các tệp code để tìm nơi mà hàm được khai báo. Đó là cách để sử dụng các hàm ẩn danh.

Tác giả Rusira Liyanage

Dịch bởi Devera Academy