1. Design Patterns
A Pattern is a Reusable solution that can be applied to commonly occurring problems in Software Engineering.
This sentence can be understood simply: a model is a reusable solution that can be applied to a problem that often occurs in software engineering.
Good use of Design Patterns will make your code more concise. Especially if you work in a team, everyone should be familiar with this model, because it helps communicate better in good project management. In JavaScript, there are many Design Patterns, but you don’t need to learn all of them.
Here are a few Design Patterns you should know in JavaScript
1. Constructor Pattern : It is very useful when working with Object Oriented Design. One of the major downsides to this design is that it doesn’t support inheritance. Therefore, a drug charged between different subjects will always be repeated.
2. Prototype Pattern : Since we have a property in the object that needs to be redefined in the Constructor Pattern, to solve this problem, we create a function inside the prototype function in the Prototype Pattern. But it also has the downside that you don’t have control over private or public properties.
3. Module Pattern : An enhancement of Prototype Pattern, here we can set different module types with the flexibility of changing the public function name. The downside is that you do not have the ability to override functions created from the external environment.
4. Singleton Pattern : A very practical Design Pattern used to build many reliable applications.
For example:
Let’s say your application has to establish a connection to a database, where you don’t want to create one instance of a database when it has been created and you only need a new instance when the other is closed, or Stop an ongoing version. This pattern ensures that a version is created only once. However, the only downside is that it is difficult to test.
2. JavaScript engines
As a JavaScript developer, you always want to get the best possible results from your code, and understanding JavaScript tools will help you write better code instead of code randomly.
1 2 | Bạn nghĩ sao chúng ta cần phải học một thứ gì đó đang hoạt động tốt? |
This will be an example.
Suppose you have a pair of objects that store some values, now we try to return these values in a function about 1 billion times, it will take almost 1.5 s execution time on high processor level. But, if we only duplicate the properties stored in our objects, the execution time will be close to 10 seconds. And that’s a lot of difference when you work with real-world JavaScript applications.
3. Double Equals & Triple Equals
In JavaScript we have two visually similar ways to test for equality. We have == & ===.
3.1 Double Equals : We test for loose equality and it also performs Type Coercion, which means the two values are compared only when trying to convert them to a common type. For example:
1 2 | 11 == '11' // true |
In this case, JavaScript converts our value into an analogous one.
3.2 Triple Equals : We strictly check for equality, which means that in comparison, both type and value must be the same. For example
1 2 3 | 11 === 11 // true 11 === '11' // false |
4. DOM
DOM provides critical APIs for creating great and creative applications, a good understanding of the basics of DOM is key to creating incredible applications. The DOM (Document Object Model) is an interface that represents browsers that read your HTML and XML documents, and when your browser reads the HTML document, it creates a representation tree.
Bạn có thể làm gì với DOM và sự sáng tạo của mình ?
Build applications that can be customized according to user actions, such as changes to the layout of the page without refreshing.
5. Call Stack
In simple terms, the call stack is a data structure that uses the following principles: Last In, First Out to temporarily store function calls.
For example:
1 2 3 4 5 6 7 8 9 10 11 | function first(){ console.log('Executed first function'); } function second(){ first(); console.log('Second function excuted'); } second(); |
- When the second () function is executed, an empty stack frame is created, which is the main entry point of the program.
- After executing the secound () function, it calls the first () function which is pushed onto the stack, where it returns the ‘Executed first function’ to the console and bounces off the stack.
- The execution then goes to the second () function where it returns and prints ‘Second function excuted’ to the console and, upon execution, it pops out of the stack while clearing the memory.
6. Scope
Scope is a separate boundary box for variables, functions, and objects. By default, you are always in the root Scope, where the boundaries determine whether or not to access the variable.
Scope can be defined in two directions:
- Local Scope : Everything is allowed within the boundary
- Global Scope : In the case of Global Scope, you cannot access the variables defined in the Local Scope because it is encapsulated from the external environment, until you return them.
For example:
If we try to code as below, you will get the not-defined error in console, because the variable name is defined in the function, which means we cannot access it outside of this function (Local Scope).
1 2 3 4 5 6 7 | function username(){ var name = 'Mohit'; } username() console.log(name); |
7. Hoisting
There are times when JavaScript developers get it wrong about Hoisting and how it works. Through this concept, you can deal with many errors, and you can call a function before it is defined to avoid errors like ‘UncaughtReferenceError’. In Hoisting, the JavaScript interpreter always moves variables and functions to the top of the current scope before execution.
For example:
1 2 3 4 5 6 7 8 | // without Hoisting function userAge(age){ console.log(age); } userAge('23'); // return 23 |
1 2 3 4 5 6 7 8 9 | // with Hoisting userAge('23'); function userAge(age){ console.log(age); } // return 23 |
Above article translated from: https://link.medium.com/5mRRHgSuNeb