Tôi nên học những điều gì trong JavaScript?

Theo Khảo sát nhà phát triển Stack Overflow 2019, JavaScript là ngôn ngữ lập trình số 1. Ngôn ngữ này được sử dụng rộng rãi bởi 95% tất cả các trang web Cho dù đó là một công ty mới thành lập nhỏ hay một công ty lớn, hầu hết trong số họ đang làm việc trên một số loại trang web hoặc ứng dụng yêu cầu kiến ​​thức tốt về ngôn ngữ này. Có rất nhiều khung và thư viện dành cho javascript. Có thể dễ dàng tìm hiểu các khung và thư viện này nếu các nguyên tắc cơ bản về javascript của bạn rõ ràng. Rất nhiều khái niệm gây nhầm lẫn và choáng ngợp đối với các nhà phát triển nhưng kiến ​​thức tốt về các khái niệm này sẽ giúp ích cho bạn về lâu dài. Các khung và thư viện đến rồi đi nhưng các nguyên tắc cơ bản luôn giữ nguyên. Thật dễ dàng để xây dựng bất kỳ loại ứng dụng nào và tìm hiểu bất kỳ khung và thư viện nào nếu các nguyên tắc cơ bản rõ ràng. Ngoài ra, nó cũng sẽ giúp bạn trong các cuộc phỏng vấn. Hãy thảo luận về một số khái niệm cơ bản về javascript, điều quan trọng cần tìm hiểu đối với bất kỳ nhà phát triển JavaScript nào. Trở thành một nhà phát triển front-end giỏi với Geeksforgeeks JavaScript Foundation – Self Paced và tìm hiểu tất cả các khía cạnh của phát triển web một cách dễ dàng.  

1. Phạm vi

Phạm vi có nghĩa là quyền truy cập thay đổi. Tôi có quyền truy cập vào biến nào khi mã đang chạy? . e. phạm vi cửa sổ. Phạm vi chỉ đơn giản là một hộp có ranh giới cho các biến, hàm và đối tượng. Các ranh giới này đặt ra các hạn chế đối với các biến và xác định xem bạn có quyền truy cập vào biến đó hay không. Nó giới hạn khả năng hiển thị hoặc tính khả dụng của một biến đối với các phần khác của mã. Bạn phải hiểu rõ về khái niệm này vì nó giúp bạn tách logic trong mã của mình và cũng cải thiện khả năng đọc. Phạm vi có thể được xác định theo hai cách –
 

• Phạm vi cục bộ cho phép truy cập vào mọi thứ trong ranh giới (bên trong hộp)
• Phạm vi toàn cầu là mọi thứ bên ngoài ranh giới (bên ngoài hộp). Phạm vi toàn cầu không thể truy cập một biến được xác định trong phạm vi cục bộ vì nó được bao bọc từ thế giới bên ngoài, trừ khi bạn trả lại nó

Ví dụ. Đoạn mã đưa ra dưới đây sẽ báo lỗi cho bạn vì “tên” được xác định trong ranh giới (phạm vi cục bộ) của hàm showName(). Bạn không thể có quyền truy cập vào biến này bên ngoài chức năng.  

GHI CHÚ. MÃ DƯỚI ĐÂY LÀ LỖI DO MỘT LOẠI TRONG GỌI CHỨC NĂNG, gây ra lỗi trước khi lỗi phạm vi dự định được đưa ra bởi bảng điều khiển. đăng nhập cuộc gọi

Bây giờ, hãy xem mã được cung cấp bên dưới và xem cách bạn có thể truy cập biến “tên” được xác định trong phạm vi cục bộ.  

2. IIFE (Biểu thức hàm được gọi ngay lập tức)

Như cái tên gợi ý IIFE là một hàm trong Javascript được gọi và thực thi ngay lập tức ngay khi nó được xác định. Thế giới bên ngoài không thể truy cập các biến được khai báo trong IIFE và bằng cách này, bạn có thể tránh phạm vi toàn cầu bị ô nhiễm. Vì vậy, lý do chính để sử dụng IIFE là thực thi mã ngay lập tức và có được quyền riêng tư dữ liệu.
 

3. cẩu

Rất nhiều lập trình viên nhận được những kết quả không mong muốn khi họ không hiểu rõ về khái niệm hoisting trong Javascript. Trong Javascript, bạn có thể gọi một hàm trước khi nó được xác định và bạn sẽ không gặp lỗi 'Uncaught ReferenceError'. Lý do đằng sau điều này là cẩu trong đó trình thông dịch Javascript luôn di chuyển các biến và khai báo hàm lên đầu phạm vi hiện tại (phạm vi chức năng hoặc phạm vi toàn cầu) trước khi thực thi mã. Hãy hiểu điều này với một ví dụ.  

Ví dụ. Hãy xem đoạn mã được đưa ra dưới đây.  

Bây giờ điều gì sẽ xảy ra nếu chúng ta gọi hàm của mình trước khi khai báo (với cẩu)

Đoạn mã trên không báo lỗi và bạn nhận được kết quả 'moo' trong bảng điều khiển của mình. Đây là cẩu trong javascript.  

ví dụ 2.  

var a = 5;
console.log(5);
output: // 5

Đoạn mã trên với cẩu sẽ cung cấp cho bạn cùng một đầu ra.  

a = 5;
console.log(5);
var a;
output // 5

4. đóng cửa

Bao đóng chỉ đơn giản là một hàm bên trong một hàm khác có quyền truy cập vào biến hàm bên ngoài. Bây giờ, định nghĩa này nghe khá đơn giản nhưng điều kỳ diệu thực sự được tạo ra với phạm vi. Hàm bên trong (bao đóng) có thể truy cập biến được xác định trong phạm vi của nó (các biến được xác định giữa các dấu ngoặc nhọn của nó), trong phạm vi của hàm cha và các biến toàn cục. Bây giờ ở đây bạn cần nhớ rằng hàm bên ngoài không thể có quyền truy cập vào biến hàm bên trong (chúng ta đã thảo luận điều này trong khái niệm phạm vi). Hãy lấy một ví dụ và hiểu nó theo cách tốt hơn.  

Ví dụ.  

Trong ví dụ trên, hàm bên trong ‘second()’ là một Closure. Hàm bên trong này sẽ có quyền truy cập vào biến 'lời chào', đây là một phần của phạm vi hàm bên ngoài 'first()'. Ở đây, phạm vi cha sẽ không có quyền truy cập vào biến phạm vi con 'tên'.  

Bây giờ câu hỏi đặt ra là tại sao chúng ta cần học bao đóng? . Trong ví dụ trên, second() mở rộng hành vi của hàm first() và cũng có quyền truy cập vào biến ‘greet’.
Javascript không phải là ngôn ngữ hướng đối tượng thuần túy nhưng bạn có thể đạt được hành vi hướng đối tượng thông qua các bao đóng. Trong ví dụ trên, bạn có thể coi const 'newFunc' là một Đối tượng có các thuộc tính 'chào' và 'thứ hai ()' là một phương thức như trong ngôn ngữ OOP.

Ở đây, bạn cần lưu ý rằng sau khi câu lệnh first() được thực thi, các biến bên trong hàm first() sẽ không bị hủy (ngay cả khi nó có câu lệnh 'return') do các đóng vì phạm vi được giữ nguyên ở đây và hàm con . Vì vậy, bao đóng có thể được định nghĩa một cách đơn giản là “một chức năng chạy, chức năng được thực thi. Nó sẽ không bao giờ thực thi lại nhưng nó sẽ ghi nhớ rằng có các tham chiếu đến các biến đó để phạm vi con luôn có quyền truy cập vào phạm vi cha. ”

5. gọi lại

Trong javascript, gọi lại chỉ đơn giản là một chức năng được truyền cho một chức năng khác dưới dạng tham số và được gọi hoặc thực thi bên trong chức năng khác. Ở đây, một chức năng cần đợi một chức năng khác thực thi hoặc trả về một giá trị và điều này tạo thành chuỗi các chức năng (khi X hoàn thành, thì Y được thực thi và nó tiếp tục. ). Đây là lý do gọi lại thường được sử dụng trong hoạt động không đồng bộ của javascript để cung cấp khả năng đồng bộ.  

Ví dụ.  

Trong ví dụ trên, hãy lưu ý rằng lời chào được chuyển dưới dạng đối số (gọi lại) cho hàm ' processUserName '. Trước khi chức năng 'chào' được thực thi, nó đợi sự kiện ' processUserName ' thực hiện trước.  

6. lời hứa

Chúng tôi hiểu khái niệm gọi lại nhưng điều gì sẽ xảy ra nếu mã của bạn có các lệnh gọi lại trong các lệnh gọi lại trong các lệnh gọi lại và nó vẫn tiếp tục. Chà, cấu trúc gọi lại đệ quy này được gọi là 'gọi lại địa ngục' và hứa hẹn sẽ giúp giải quyết loại vấn đề này. Lời hứa rất hữu ích trong các hoạt động javascript không đồng bộ khi chúng ta cần thực hiện hai hoặc nhiều hoạt động quay lại (hoặc gọi lại theo chuỗi), trong đó mỗi chức năng tiếp theo bắt đầu khi chức năng trước đó hoàn thành. Lời hứa là một đối tượng có thể tạo ra một giá trị duy nhất vào một thời điểm nào đó trong tương lai, giá trị đã được giải quyết hoặc lý do khiến nó không được giải quyết (bị từ chối). Theo nhà phát triển. mozilla “A Promise là một đối tượng đại diện cho sự hoàn thành hoặc thất bại cuối cùng của một hoạt động không đồng bộ. Về cơ bản, một lời hứa là một đối tượng được trả về mà bạn đính kèm các cuộc gọi lại, thay vì chuyển các cuộc gọi lại vào một hàm. ”. Các lời hứa giải quyết vấn đề về 'địa ngục gọi lại', không gì khác ngoài cấu trúc đệ quy của các cuộc gọi lại (các cuộc gọi lại trong các cuộc gọi lại trong các cuộc gọi lại, v.v.).
Một lời hứa có thể ở ba trạng thái có thể xảy ra… 

• Hoàn thành. Khi thao tác kết thúc thành công
• Vật bị loại bỏ. Khi hoạt động không thành công
• Chưa giải quyết. trạng thái ban đầu, không hoàn thành cũng không bị từ chối

Hãy thảo luận về cách tạo một lời hứa trong javascript với một ví dụ.  

Ví dụ.
 

Xem xét đoạn mã trên cho một lời hứa mẫu được giả định giống như thực hiện hoạt động 'isNameExist' một cách không đồng bộ, Trong lời hứa đó Các đối số đối tượng khi hai hàm giải quyết và từ chối. Nếu thao tác thành công có nghĩa là 'isNameExist' là 'true' thì nó sẽ được giải quyết và hiển thị đầu ra "Tên người dùng tồn tại", nếu không, thao tác sẽ thất bại hoặc bị từ chối và nó sẽ hiển thị kết quả 'lỗi'. ’. Bạn có thể dễ dàng thực hiện các hoạt động xâu chuỗi trong các lời hứa trong đó hoạt động đầu tiên sẽ được thực hiện và kết quả của hoạt động đầu tiên sẽ được chuyển sang hoạt động thứ hai và điều này sẽ tiếp tục.  

7. Không đồng bộ & Đang chờ

Dừng lại và đợi cho đến khi vấn đề nào đó được giải quyết. Không đồng bộ & chờ đợi chỉ là đường cú pháp trên Lời hứa và giống như lời hứa, nó cũng cung cấp một cách để duy trì hoạt động không đồng bộ một cách đồng bộ hơn. Vì vậy, trong javascript, các hoạt động không đồng bộ có thể được xử lý ở nhiều phiên bản khác nhau… 
 

• ES5 -> Gọi lại
• ES6 -> Lời hứa
• ES7 -> không đồng bộ & đang chờ

Bạn có thể sử dụng Async/Await để thực hiện yêu cầu Rest API nơi bạn muốn dữ liệu tải đầy đủ trước khi đẩy nó vào chế độ xem. Đối với các lập trình viên trình duyệt và Nodejs, async/await là một cải tiến cú pháp tuyệt vời. Nó giúp nhà phát triển triển khai lập trình chức năng trong javascript và nó cũng làm tăng khả năng đọc mã.  

Ví dụ.  

 const showPosts = async () => {
 const response = await fetch('https://jsonplaceholder.typicode.com/posts');
 const posts = await response.json();
 console.log(posts);
}

showPosts();

Dưới đây là hình ảnh về thời điểm bạn sẽ chạy mã này trong bảng điều khiển của mình.  

Để thông báo cho JS rằng chúng tôi đang làm việc với các lời hứa, chúng tôi cần gói 'chờ đợi' bên trong chức năng 'không đồng bộ'. Trong ví dụ trên, chúng tôi (a) chờ đợi hai điều. phản hồi và bài viết. Trước khi chúng tôi có thể chuyển đổi phản hồi sang định dạng JSON, chúng tôi cần đảm bảo rằng chúng tôi đã tìm nạp phản hồi, nếu không, cuối cùng chúng tôi có thể chuyển đổi một phản hồi chưa có, điều này rất có thể sẽ gây ra lỗi

Tôi nên học gì với JavaScript?

Tôi nên học gì trước khi học JavaScript?