To go one step further in JavaScript, you need to master these 36 concepts

You may often hear people complain that JS is strange and sometimes worthless. T his is because they don't know much about how JS works. I also think JS doesn't handle other languages the same way in certain situations, but it's not to blame, it's just to show it to everyone in its own way.

If you love a programming language, you should want to learn more about it and master its concepts one by one.

Here are 36个JavaScript concepts that you need to master to become a front-end developer who JS better.

1. Call the stack execution

We all know stack overflows, but do you know what causes stack overflows? Stack overflows are associated with some operational errors in the call stack.

If you understand the call stack, you'll see how programming languages like JS work.

2. The original data type

const foo = "bar";
foo.length; // 3
foo === "bar"; // true

Here, when we assign the value bar to the constant foo it belongs to the original type string E veryone knows this. But you guys don't think about a question, string is the basic data type, how can you call a method?

Is that weird? No.

This feature is called 自动装箱 Each time a basic type is read, the JS background creates a corresponding 基本包装类型对象 allowing us to call methods to manipulate the data.

Let's start with the example above:

const foo = "bar";
foo.length; // 3
foo === "bar"; // true

The variable foo is a basic type value, it is not an object, it should not have a method. But JS has done a series of processing (i.e. boxing) for us internally, enabling it to call methods, as follows:

• Create an instance of the String type
• Call the specified method on the instance
• Destroy this instance

const foo  = new String("bar");
foo.length
foo === 'bar'
foo = null

With an in-depth understanding of the original data types, we should know how these "weird" situations occur and the logical reasons behind them.

3. Value type and reference type

Recently, I've been confused about how Reference Delivery works in JS Although I know that languages such as C and Java have concepts such as Pass by Reference and Pass by Value, I'm not sure how it works in JS

Do you know the reference to the value of the variable assigned to the JS that is not the original value? The reference points to the memory location where the value is stored.

var arr1 = [1,2,3];
var arr2 = arr1;
arr2.push(10);
console.log(arr2);
//[1, 2, 3, 10]
console.log(arr1);
//[1, 2, 3, 10]

As you can see in the example above, any changes made to arr2 will also be reflected on arr1 This is because they save only a reference to the memory address for which the value corresponds, not the value itself.

By understanding the concepts of value types and reference types, you'll have a better understanding of how to assign values and memory references to variables.

4. Cast type conversion

This concept mainly explains the difference between implicit and explicit type enforcement. T his is one of the few areas in front-end development where JS is confused. This is especially true for the concept of 隐式强制转换 because they behave differently for different data types.

This is the most commonly tested in JS interviews.

Number('789')   // 显式
+'789'          // 隐式
789 != '456'    // 隐式
9 > '5'         // 隐式
10/null          // 隐式
true | 0        // 隐式

Having mastered the type implicit conversion, congratulations on your understanding of JS

5. Compare operator symbols and typeof operators

Doubles and thirds, which in most cases look the same on the surface and give the same results, can sometimes lead to unexpected errors.

To understand the difference between the two brothers, we can use typeof to see the type of value being compared.

typeof 3 // "number"
typeof "abc" // "string"
typeof {} // "object"
typeof true // "boolean"
typeof undefined // "undefined"
typeof function(){} // "function"
typeof [] // "object"
typeof null // "object"

6. JavaScript scope

Scope is a very important embarrassment in JS and JS has been constantly improving its scope. According to Wissam, the simple definition of scope is that the compiler looks for variables and functions when needed.

Understanding scope helps us use JavaScript effectively. W e also need to understand 全局作用域 as well as block and function scopes, also known as lexical scopes. JS scopes can be confusing at first, but once you understand how things work behind the scenes, it can be very exciting to use.

(Recommended tutorial: JavaScript tutorial)

Statements and declarations

JavaScript program is a collection of executable statements. A statement is an executable unit through which the statement is executed to achieve a function. U sually a statement takes up a line and ends with a semicolon. B y default, the JavaScript interpreter executes in turn according to the writing process of the statement. If you want to change this default execution order, you need to use process control statements such as judgment, looping, and so on.

We should be aware of the difference between statements and declarations, which is helpful for us to fully understand JS.

8. Function expressions and modules that are called immediately

IIFE: Immediately Invoked Function Expression means a function expression that is called immediately, that is, the function is declared as soon as it is called. I t is primarily used to avoid contamination of global scopes. Later, the ES6 module was introduced, providing a standard approach to avoiding global scope contamination, although it was not considered a direct replacement for IIFE

By understanding IIFE and modules, you can build applications that are less likely to make errors due to mishandling of global space. Of course, with modules, we can do a lot of things.

9. Message queues and event loops

As the MDN documentation says, JavaScript has a concurrency model based on event loops that execute code, collect and process events, and perform subtasks in the queue. This model is very different from models in other languages, such as C and Java

In the concurring model, message queues are used to process the oldest messages. W henever an event occurs, it is added to the message queue. By understanding these concepts, you can better understand how JS works at the bottom and know if your code is running.

10. Interval

For functions that you want to call in a planned JS you can use the following two functions:

• setTimeout us to run a function once after a specific interval.
• setInterval allows us to run a function repeatedly, starting at a specific interval, and then repeating it continuously at that interval. T hese are somewhat related to the previous concepts of message queues and event handlers. Therefore, by understanding the interval method, we can understand how they work and use them effectively in our use cases.

11.JS engine

JavaScript engine is a computer program or interpreter that executes JS code. JS engine can be written in multiple languages. For example, the V8 engine that drives Chrome is written in c++ while the SpiderMonkey engine that drives Firefox browser is written in C and c++

To write efficient code, you must understand the JS engine you are using. Mobile developers using webview should pay special attention to this.

12. Per bit operation

The bit-by-bit operation treats values as bits (0 and 1) instead of decimal, hex, or octal numbers. Bit operators perform their operations on such binary representations, but they return standard JavaScript values.

Typically, these operations are rarely used in code, but they do have some use cases. For example, you can use them to find even and odd values, color conversion, color extraction, and so on.

With a comprehensive understanding of these bit-by-bit operations, you can make good use of techniques such as WebGL because it contains many pixel operations.

13. DOM and layout tree

Most of us have heard of document object models (DOMs), but only a few people have an in-depth understanding of this. D id you know that what you see in your browser is not DOM Instead, it renders the tree, which is actually a combination of DOM and CSSOM

By understanding how DOM works, structure, and how pages are rendered, we can dynamically manipulate web pages with the help of JS This is especially necessary to ensure that our applications have a high standard of performance.

14. Classes and factories

JavaScript is not an object-oriented language. H owever, constructors are used to mimic the OOP property. A ccording to Tania "classes in JavaScript don't actually provide other functionality, they just provide syntax sugars on prototypes and inheritances because they provide cleaner, more elegant syntax." B ecause classes are used in other programming languages, class syntax in JS makes it easier for developers to move between languages. ”

A factory function is not a class or constructor function that returns an object. A ccording to JS expert Eric Elliot "In JavaScript any function can return a new object." I f it is not a constructor or class, it is called a factory function. ”

Understanding these two concepts is necessary when you start developing larger applications.

15.this keyword and apply, call and bind methods

Personally, I think it's important for a JS developer to understand this keyword. If you don't understand it correctly, future projects you develop will often encounter this problem.

If you're well aware of this keyword, you can look at apply call and bind methods, which all solve the problem that this points to raise.

16. Constructor and "instanceOf" operator

Constructors are like regular functions. H owever, there are many differences, function names start with capital letters and can only be executed by the new operator. Programmers with OOP development experience will be familiar with the new keyword.

To correctly identify the type of object, we use the instanceOf operator. Simply put, it checks whether one object is an instance of another.

This helps you understand how objects inherit each other, and inheritance is achieved through prototypes.

17. Prototype

This is one of the most confusing concepts in JS even for people with ten years of experience.

A prototype in JavaScript is a mechanism for sharing common functionality between objects. A lmost all objects in JavaScript are instances of Object The object inherits all properties and methods from Object.prototype

Simply put, a prototype is an object from which JS object inherits methods and properties.

With a prototype in mind, you can build efficient, fast applications.

(Recommended micro-class: JavaScript micro-course)

18. Create objects using new, Object.create, and Object.assign

There are many ways to create an object. H owever, metropolises choose the Object.create method instead of new keyword. T his is for a reason, because when you use the Object.create method, you can use an existing object as a prototype of the newly created object. This reuses the properties and functionality of existing objects, a bit like the concept of inheritance in OOP

With Object.assign method, you can copy enumerated properties from one or more source objects to the target object. I n this case, the prototype of the target object does not contain the properties of the source object. This is the main difference between the two approaches.

By understanding the three ways objects are created, you can use them appropriately to create more efficient programs based on the actual situation.

19.map, filter, reduce method

These three methods are useful when it comes to array operations. They can be found in the Array prototype.

If you have an array and want to do something for each element, you can use map method.

If you have an array and want to filter some values by certain conditions, you can use filter method.

reduce() method performs a reducer function (ascending execution) on each element in the array that you provide, summarizing its results into a single return value.

A typical example is to sum all elements of an array:

let numbers = [1,2,3,4,5,6]
const reduced = numbers.reduce( (accumulator, currentValue) => accumulator + currentValue )
console.log(reduced)
// 21

Note that the above three methods do not change the value of the original array.

20. Pure functions, side effects and state changes

These three concepts are important to JS developers, and state changes are especially important for developers who use React

A pure function refers to a function whose return results depend only on its parameters and has no side effects in the execution process.

Function side effects are when a function is called, which has an additional effect on the main calling function in addition to returning the function value. The function of side effects not only returns a value, but also does other things, such as:

• A variable has been modified
• Directly modify the data structure
• Set the membership of an object
• Throw an exception or terminate with an error
• Print to the terminal or read user input
• Read or write to a file
• Draw on the screen

A state change is where you change the value of a variable. I f you make changes to a variable, it may affect other functions, depending on the value before the variable was changed. In a React environment, I'm advised not to change my state.

21. Closures

Closures are hard to understand. B ut once you understand it, you'll think JS is actually pretty good. T here are enough resources online. You spend enough time learning about closure, and it's not hard to understand it.

Use closures to access the scope of external scopes in internal scopes. JavaScript closures are created JavaScript each time a function is created.

22. Higher-order functions

A higher-order function is a function that takes other functions as arguments or returns results. Y ou can create smaller functions that are responsible for only one task, and then construct complex functions with the help of these smaller functions. This also commits the reusability of the code.

23. Recursive

Recursion is a common concept in all programming languages. Simply put, recursion is the idea of breaking down a big problem into a small problem and then solving a small problem.

While recursion can be a confusing concept that can be a headache, you can better understand it with a lot of practice, starting with a few small problems.

24. Collections and generators

Collections and generators have been introduced in ES6 T he newly introduced collections are Map Set WeakSet和WeakMap T hese collections provide us with some convenient operations. Understanding how they are known is critical, especially for modern JavaScript

Generators are sometimes difficult to understand, especially for beginners. The generator allows us to write code functions that allow us to pause and restart functions without blocking the execution of other code, which is not common in JavaScript

25. Promise

Jecelyn Promises "Imagine you're a child. Y our mother assures you that she will buy you a new cell phone next week. ”

You won't know if you can get that cell phone until next week. Your mother either really bought you a brand new phone or didn't buy it because she wasn't happy.

It's a promise. A Promise has three states:

1. Pending You don't know if you'll get that call
2. Fulfilled Mom's happy, I bought you a new phone
3. Rejected MOM is not happy, just don't buy, love drops on the 滳

26. Asynchronous programming

To understand what asynchronous programming is, first of all, we must first build up what is synchronous programming. Synchronous programming is thread-blocked, and because JS is single-threaded, the code executes line by line.

But with asynchronous code, you can perform some time-consuming tasks. T his feature is especially useful when you have to perform multiple tasks that take a long time to complete. However, in some cases, even code that takes a long time to execute may need to be synchronized, at which point async/await can be used.

27. ES6 arrow function

Arrow functions are a new feature of ES6 and a syntax replacement for regular functions. T he difference is that the arrow function is not bound to this arguments super or new.target This makes the arrow function a good choice in some cases and a very bad choice in others.

Therefore, don't use the arrow function as soon as you come up. You need to use them according to your situation.

Data structure

Regardless of the programming language used, data structure is one of the basics that developers should have.

Bad programmers worry about code, and good programmers worry about data structures and their relationships.

In terms of data structure, you should understand linked lists, queues, stacks, trees, diagrams, and hash tables.

29. Time complexity

Regardless of the programming language, time complexity analysis is another foundation for computer programming. I n order to build a better application, you should write a better solution. T o do this, you need to understand the concept of time complexity. Sometimes referred to as BigO

30. Algorithm

This is also one of the first things to be taught in the basic course of computer. I n short, algorithms are the process of achieving goals step by step. Programmers should be able to look at any problem from an algorithmic point of view.

Despite the large number of algorithms for thousands of use cases, the following two are common:

• Find
• sort

These two use cases are very common to programmers and should at least understand the known algorithms that implement them. There are no fixed rules that say you should use one of these algorithms, but these algorithms are well known in terms of performance and well documented.

You can even create your own algorithms and introduce them to the world. If it's better than the algorithms currently known, you could be the next programming star.

31. Inheritance, polymorphism, and code reuse

Inheritance in JS can be used for prototype implementing. T his is because JS is a OOP language. However, JS provides some of OOP functionality by providing prototype inheritance.

Polymorphism is a concept in which an object, variable, or function can take many forms. In JS it is a bit difficult to see the effects of polymorphisms, because in static types of systems, the classic types of polymorphisms are more obvious.

Both of these concepts can help us achieve better code reuse in JS

32. Design mode

Design pattern represent best practices and are often adopted by experienced object-oriented software developers. D esign patterns are solutions to common problems faced by software developers in the software development process. These solutions are the result of a long period of experimentation and errors by many software developers.

33. Functional programming

Functional programming is a programming paradigm, a style of building computer program structures and elements, which regards computation as an evaluation of mathematical functions and avoids state changes and data variation.

There are a few concepts you need to master in functional programming:

• Pure function
• immutable
• Reference transparency
• Higher-order functions

The principle of concise code

Whichever programming language you use, this is a basic skill that every developer should master. E ach programming language has a separate set of good practices. Although these "good" practices are subjective and differ between workplaces, some practices are considered "good".

By following these code principles, you can ensure that everyone can read and maintain your code. This will also help you and your team work together smoothly during application development.

Deconstruction assignments

It is useful to introduce understanding the configuration operator in ES6 For the same use cases, they are simpler and more efficient than previous implementations.

New features of ES2020

One of the advantages of programming is that if you don't keep learning, you'll never become an expert in the field. Programming languages evolve over time because additional new features are introduced in each major release.

This also means that your expertise in a concept is likely to expire in the next 10 years, as better alternative versions will be released with version updates. This is very common in any programming language.

ES2020 has released several new features, including optional links, empty value merges, dynamic imports, and more. You must learn these new concepts to keep up with the fast-changing It world.

It takes years of experience and time to master a language, but knowing what to master will make things easier, hopefully these 36 concepts will help you.

Source: medium.com/better-programming/36-javascript-concepts-you-need-to-master-to-become-an-expert-c6630ac41bf4