Hướng dẫn what are the most important parts of javascript? - những phần quan trọng nhất của javascript là gì?

JavaScript is Everywhere. Millions of web pages are built on JavaScript and it’s not going anywhere at least for now. On one side HTML and CSS give styling to the web pages but on the other side, it’s the magic of JavaScript that makes your web page alive. Today this language is not just limited to your web browser. You can also use it for server-side applications. Isn’t it cool to use a single language for both client-side and server-side applications? A single language fulfills both of the purposes and this is the main reason TON of job posting is there for javascript developers in the tech industry. 
 

According to Stack Overflow Developer Survey 2019, JavaScript is the #1 programming language. The language is widely used by 95% of all the websites Whether it’s a small startup or a big company, most of them are working on some kind of website or an app that requires a good knowledge of this language. A lot of frameworks and libraries are there for javascript. These frameworks and libraries can be easily learned if your javascript fundamentals are clear. A lot of concepts are confusing and overwhelming for developers but a good knowledge of these concepts will help you in the long run. Frameworks and libraries come and go but the fundamentals always remain the same. It’s easy to build any kind of application and learn any framework and libraries if the fundamentals are clear. Also, it will help you in interviews as well. Let’s discuss some of the basic concepts of javascript which are important to learn for any JavaScript developer. Become a good front-end developer with Geeksforgeeks JavaScript Foundation – Self Paced and learn all the aspects of web development with ease. 

1. Scope

Scope means variable access. What variable do I have access to when a code is running? In Javascript by default, you’re always in root scope i.e. the window scope. The scope is simply a box with a boundary for variables, functions, and objects. These boundaries put restrictions on variables and determine whether you have access to the variable or not. It limits the visibility or availability of a variable to the other parts of the code. You must have a clear understanding of this concept because it helps you to separate logic in your code and also improves the readability. A scope can be defined in two ways –
 

• Local Scope allows access to everything within the boundaries (inside the box)
• Global Scope is everything outside the boundaries (outside the box). A global scope can not access a variable defined in local scope because it is enclosed from the outer world, except if you return it.

Example: The code given below will give you an error because “name” is defined within the boundary (local scope) of the showName() function. You can not have access to this variable outside the function. 

NOTE: THE CODE BELOW IS IN ERROR DUE TO A TYPO IN THE FUNCTION CALL, causing an error before the intended scoping error is raised by the console.log call.

Now, take a look at the code given below and see how you can access the variable “name” defined in the local scope. 

2. IIFE (Immediately Invoked Function Expression)

As the name suggests IIFE is a function in Javascript which immediately invoked and executed as soon as it is defined. Variables declared within the IIFE cannot be accessed by the outside world and this way you can avoid the global scope from getting polluted. So the primary reason to use IIFE is to immediately execute the code and obtain data privacy. 
 

3. Hoisting

A lot of developers get unexpected results when they are not clear with the concept of hoisting in Javascript. In Javascript, you can call a function before it is defined and you won’t get an error ‘Uncaught ReferenceError’. The reason behind this is hoisting where the Javascript interpreter always moves the variables and function declaration to the top of the current scope (function scope or global scope) before the code execution. Let’s understand this with an example. 

Example: Take a look at the code given below. 

Now what happens if we invoke our function before we declare it (with hoisting) 

The above code is not giving an error and you get the output ‘moo’ in your console. This is hoisting in javascript. 

Example 2: 

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

The above code with hoisting will give you the same output. 

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

4. Closures

A closure is simply a function inside another function that has access to the outer function variable. Now, this definition sound pretty much straightforward but the real magic is created with the scope. The inner function (closure) can access the variable defined in its scope (variables defined between its curly brackets), in the scope of its parent function, and the global variables. Now here you need to remember that the outer function can not have access to the inner function variable (we have already discussed this in the scope concept). Let’s take an example and understand it in a better way. 

Example:  

Trong ví dụ trên, hàm bên trong ‘thứ hai () là một đóng cửa. Hàm bên trong này sẽ có quyền truy cập vào biến ’chào, đây là một phần của phạm vi hàm bên ngoài‘ đầu tiên (). Ở đây, phạm vi cha mẹ đã giành được quyền truy cập vào biến phạm vi con cái ‘Tên. & NBSP;

Bây giờ câu hỏi là tại sao chúng ta cần học đóng cửa? Những gì mà việc sử dụng nó? Đóng cửa được sử dụng khi bạn muốn mở rộng hành vi như chuyển các biến, phương thức hoặc mảng từ hàm bên ngoài sang hàm bên trong. Trong ví dụ trên, thứ hai () mở rộng hành vi của hàm trước () và cũng có quyền truy cập vào biến ‘Greet, & NBSP; 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 việc đóng. Trong ví dụ trên, bạn có thể nghĩ về const ’newfunc, như một đối tượng có thuộc tính‘ chào hỏi và ‘thứ hai (), một phương thức như trong ngôn ngữ OOP. & Nbsp;
Javascript is not pure object-oriented language but you can achieve object-oriented behavior through closures. In the above example, you can think of const ‘newFunc’ as an Object having properties ‘greet’ and ‘second()’ a method as in an OOP language. 

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

5. Gọi lại

Trong JavaScript, một cuộc gọi lại chỉ đơn giản là một hàm được truyền đến một hàm khác dưới dạng tham số và được gọi hoặc thực thi bên trong hàm khác. Ở đây, một hàm cần chờ một hàm khác thực thi hoặc trả về một giá trị và điều này làm cho chuỗi của các chức năng (khi X được hoàn thành, sau đó 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ộ. & NBSP;

Example:  

Trong ví dụ trên, thông báo rằng lời chào được truyền như một đối số (gọi lại) cho hàm ‘ProcessUsername. Trước khi chức năng ‘Lời chào được thực hiện, nó chờ đợi sự kiện‘ ProcessUsername, để thực hiện đầu tiên. & NBSP;

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 sẽ có 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à nó tiếp tục. Chà, cấu trúc đệ quy này của cuộc gọi lại đượ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 back-to-back (hoặc chuỗi gọi lại), trong đó mỗi chức năng tiếp theo bắt đầu khi hoàn thành phần trước. Một lời hứa là một đối tượng có thể tạo ra một giá trị duy nhất trong tương lai, hoặc là một giá trị được giải quyết hoặc một lý do mà nó không được giải quyết (bị từ chối). Theo nhà phát triển.mozilla, một lời hứa là một đối tượng đại diện cho sự hoàn thành cuối cùng hoặc thất bại 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. Lời hứa sẽ giải quyết vấn đề ‘gọi lại địa ngục, không có gì ngoài cấu trúc đệ quy của các cuộc gọi lại (gọi lại trong các cuộc gọi lại trong các cuộc gọi lại và vv). & Nbsp; một lời hứa có thể ở ba trạng thái có thể có.
A promise may be in three possible states… 

• Hoàn thành: Khi hoạt động được hoàn thành thành công.
• Bị từ chối: Khi hoạt động không thành công.
• Đang chờ xử lý: 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 ra một lời hứa trong JavaScript với một ví dụ. & NBSP;

Example:   
 

Hãy xem xét 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, không đồng bộ, trong lời hứa đó đối tượng đối số khi hai chức năng giải quyết và từ chối. Nếu hoạt động thành công, điều đó có nghĩa là ‘isnameExist là’ đúng thì nó sẽ được giải quyết và hiển thị đầu ra Tên người dùng tồn tại khác, hoạt động sẽ bị lỗ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 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ẽ được tiếp tục hơn nữa. & NBSP;

7. Async & đang chờ đợi

Dừng lại và đợi cho đến khi một cái gì đó được giải quyết. Async & đang chờ chỉ đường cú pháp trên đầu những lời hứa và những lời hứa giống như nó cũng cung cấp một cách để duy trì hoạt động không đồng bộ hơn đồng bộ hơn. Vì vậy, trong các hoạt động không đồng bộ của JavaScript có thể được xử lý trong các phiên bản khác nhau, & nbsp; & nbsp;. Async & await just syntactic sugar on top of Promises and like promises it also provides a way to maintain asynchronous operation more synchronously. So in javascript asynchronous operations can be handled in various versions… 
 

• ES5 -> gọi lại
• ES6 -> Lời hứa
• ES7 -> Async & đang chờ đợi

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

Ví dụ: & nbsp; 

 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 khi nào bạn sẽ chạy mã này trong bảng điều khiển của bạn. & NBSP;

Để thông báo cho JS rằng chúng tôi đang làm việc với những lời hứa, chúng tôi cần phải kết thúc ‘đang chờ đợi trong một chức năng‘ async. Trong ví dụ trên, chúng tôi (a) chờ 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 có phản hồi được tìm nạp, nếu không chúng tôi có thể chuyển đổi một phản hồi chưa có ở đó, rất có thể sẽ nhắc nhở lỗi.

Những điều quan trọng nhất trong JavaScript là gì?

Các phần chính của JavaScript là gì?

5 điều JavaScript có thể làm là gì?

5 câu lệnh JavaScript là gì?