Author: Mahdhi Rezvi
Translator: Front-end Xiaozhi Source: dmitripavlutin
If you have dreams and dry goods, you can search for [Great Move to the World] on WeChat and pay attention to this Shawanzhi who is still washing dishes in the early hours of the morning.
This article GitHub https://github.com/qq449245884/xiaozhi has been included, there are complete test sites, materials and my series of articles for interviews with first-line manufacturers.
You may often hear people complaining that JS is weird and sometimes worthless. The reason for this thinking is that they don't know much about how JS works behind the scenes. I also feel that JS handles some situations differently than other languages, but I can't blame it, it just shows it to everyone in its own way.
If you love a programming language, then you should want to understand and master its concepts one by one.
Here is a list of 36 JavaScript concepts you need to master to become a better JS-savvy front-end developer.
1. Call stack execution
We all know about stack overflow, but do you know what causes stack overflow? Stack overflow is associated with some manipulation errors on the call stack.
Understanding the call stack will give you a clear understanding of how programming languages like JS execute.
2. Primitive data types
const foo = "bar";
foo.length; // 3
foo === "bar"; // true Here, we assign the value bar to the constant foo which is of primitive type string . Everyone knows this. But you young heroes, have you ever thought about a question, string is a basic data type, how can you call a method?
Strange? No.
This feature is called autoboxing . Whenever a basic type is read, the JS background will create a corresponding basic wrapper type object , allowing us to call some 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 primitive value, it is not an object, it should not have methods. But JS has completed a series of processing (that is, boxing ) for us internally, so that it can call the method. The implementation mechanism is as follows:
- Create an instance of type
String - call the specified method on the instance
- destroy this instance
const foo = new String("bar");
foo.length
foo === 'bar'
foo = nullWith a solid understanding of primitive data types, we should know how these "weird" situations occur, and the logic behind them.
3. Value Types and Reference Types
Recently, I've been confused about how "pass by reference" works in JS. Although I know there are concepts of “按引用传递” and “按值传递” in languages like C and Java, I'm not sure how it works in JS.
Did you know that variables assigned to non-primitive values in JS refer to that value? A 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 modifications made to arr2 will also be reflected on arr1 . This is because they only hold a reference to the memory address corresponding to the value, not the value itself.
By understanding the concepts of value types and reference types, you will have a better understanding of how to assign values and memory references to variables.
4. Coercion
This concept mainly explains the difference between implicit and explicit type coercion. This is one of the few areas in front-end development that is confusing to JS. This is especially true for the concept of implicit coercion , which behaves differently for different data types.
This is the most common test in JS interviews.
Number('789') // 显式
+'789' // 隐式
789 != '456' // 隐式
9 > '5' // 隐式
10/null // 隐式
true | 0 // 隐式Once you have mastered type explicit and implicit conversion, congratulations on your understanding of JS.
5. Comparison symbols and typeof operator
Double and triple, they look the same on the surface and give the same results in most cases, however, they can sometimes give unexpected errors.
In order to understand the difference between these two brothers, we can use typeof to see the type of the values 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. The simple definition of scope, according to Wissam , is that the compiler looks for variables and functions when needed.
Understanding scope helps us use JavaScript effectively. We also need to understand global scope and block and function scope, also known as lexical scope. JS scope can be confusing at first, but once you understand how things work under the hood, working with it can be very exciting.
7. Statements and Declarations
A JavaScript program is a collection of executables 语句 . The so-called statement is an executable unit, through the execution of the statement, to achieve a certain function. Usually a statement occupies one line and ends with a semicolon. By default, the JavaScript interpreter executes statements sequentially as they are written. If you want to change this default execution order, you need to use flow control statements such as judgment and loop.
We should know the difference between statement and declaration, which is very helpful for us to understand JS comprehensively.
8. Immediately called function expressions and modules
IIFE: Immediately Invoked Function Expression , which means a function expression that is called immediately, that is, when a function is declared, the function is called immediately. It is mainly used to avoid polluting the global scope. Later, ES6 modules were introduced to provide a standard way to avoid pollution of the global scope, although some argue that it is not a drop-in replacement for IIFE .
By understanding IIFE and modules, you can build applications that are less buggy due to mishandling of global spaces. Of course, with modules, we can do a lot more.
Everyone said that there is no project to write on the resume, so I helped you find a project, and also included a [Building Tutorial] .
9. Message queues and event loops
As the MDN documentation says, JavaScript has a concurrency model based on the event loop, which is responsible for executing code, collecting and processing events, and executing subtasks in a queue. This model is distinct from models in other languages, such as C and Java.
In the concurrency model, message queues are used to process the oldest messages. Whenever an event occurs, it will be added to the message queue. By understanding these concepts, you can better understand how JS works under the hood and know how your code works.
10. Time interval
To programmatically call functions in JS, you can use the following two functions:
-
setTimeoutallows us to run the function once after a specific time interval. -
setIntervalallows us to run a function repeatedly, starting at a specific time interval, and then repeating continuously at that interval.
These are somewhat related to the previous concepts of message queues and event handlers. So by understanding time interval methods, we can understand how they work and use them effectively in our use case.
11. JS engine
A JavaScript engine is a computer program or interpreter that executes JS code. JS engines can be written in many languages. For example, the V8 engine that drives the Chrome browser is written in C++, while the engine that drives the Firefox browser SpiderMonkey is written in C and C++.
To write efficient code, you must understand the JS engine you are using. Mobile developers using webview should be especially aware of this.
12. Bitwise operations
Bitwise operations treat values as 位 (0 and 1), not as decimal, hexadecimal, or octal numbers. Bitwise operators perform their operations on such binary representations, but they return standard JavaScript numeric 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 more.
With a thorough understanding of these bitwise operations, you can use technologies like WebGL very well, since it includes many pixel operations.
13. DOM and layout tree
Most of us have heard of the Document Object Model (DOM), but only a few have a deep understanding of it. Did you know that what you see in the browser is not the DOM? It's the render tree, which is actually a combination of DOM and CSSOM.
By understanding how the DOM works, its 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 application has a high standard of performance.
14. Classes and factories
JavaScript is not an object-oriented language. However, to mimic OOP properties, constructors are used. According to Tania, "Classes in JavaScript don't really provide anything else, just syntactic sugar on prototypes and inheritance because they provide a cleaner and more elegant syntax. Since other programming languages use classes, JS The class syntax in Java makes it easier for developers to move between languages."
A factory function is a function that does not return a class or constructor of an object. According to JS expert Eric Elliot , "In JavaScript, any function can return a new object. If it's not a constructor or a class, it's called a factory function ."
Understanding these two concepts is essential when starting to develop larger scale applications.
15. this keyword and apply , call and bind method
Personally, I think it is crucial for a JS developer to understand the this keyword. If you don't understand it correctly, your future projects will often encounter this related problems.
If you this keyword is very clear, you can see apply , call and bind methods, which can be resolved this points to the raised problem.
16. Constructors and the "instanceOf" operator
Constructors are just like regular functions. But they have many differences, the function name starts with a capital letter 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 the object, we use the instanceOf operator. In simple terms, it checks if an object is an instance of another object.
This will help you understand how objects inherit from each other, and inheritance is achieved through prototypes.
17. Prototype
This is one of the most confusing concepts in JS, even to someone with a decade of experience.
Prototypes in JavaScript are mechanisms for sharing common functionality between objects. Almost all objects in JavaScript are instances of Object . The object inherits all properties and methods from Object.prototype .
In simple terms, a prototype is an object from which a JS object inherits methods and properties.
With an understanding of prototyping, you can build efficient and fast applications.
18. Create objects using new , Object.create and Object.assign
There are many ways to create objects. However, Metropolis chooses the Object.create method instead of the new keyword. This is for a reason, because when using the Object.create method, you can use an existing object as a prototype for a newly created object. This makes it possible to reuse the properties and functions of existing objects, somewhat like the concept of inheritance in OOP .
When using the Object.assign method, an enumerable own property can be copied from one or more source objects to a destination object. In this case, the prototype of the target object does not contain the properties of the source object. This is the main difference between these two methods.
By understanding these three ways of object creation, you can use them appropriately according to the actual situation to create more efficient programs.
19. map, filter, reduce methods
These three methods are very useful when it comes to array manipulation. They can be found in the Array prototype.
If you have an array and want to do something with each element then you can use the map method.
If you have an array and want to filter some values by some conditions, you can use the filter method.
reduce() method executes a reducer function (executed in ascending order) provided by you for each element in the array, 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)
// 21Note 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 very important for JS developers, and state changes are especially important for developers using React.
A pure function means that the return result of a function only depends on its parameters, and there are no side effects in the execution process.
Function side effects refer to when a function is called, in addition to returning the function value, it also has an additional effect on the main calling function. Functions with side effects don't just return a value, they also do other things, such as:
- modified a variable
- Modify the data structure directly
- Set a member of an object
- Throws an exception or terminates with an error
- print to terminal or read user input
- read or write a file
- draw on the screen
A state change is where you change the value of a variable. If you make a change to a variable, it may affect other functions, depending on the value of the variable before it was changed. In a React environment, I was advised not to mutate state.
21. Closures
Closures are hard to understand. But once you understand it, you will feel that JS is actually quite good. There are enough resources online. You've spent enough time learning about closures that it's not that hard to master and understand.
Use closures to access the scope of the outer scope in the inner scope. Every time a function is created a JavaScript closure is created at function creation time.
22. Higher order functions
Higher-order functions are functions that take other functions as arguments or return a result. You can create smaller functions that are only responsible for one task, and then construct complex functions with the help of these smaller functions. This also commits code reusability.
23. Recursion
Recursion is a common concept in all programming languages. Simply put, recursion is a way of thinking of breaking down a big problem into small problems and then solving the small problems.
Although recursion can be a confusing concept that can give you a headache, with a lot of practice and starting with a few small problems, you can understand it better.
24. Collections and generators
Collections and generators are new in ES6. The newly introduced collections are Map , Set , WeakSet and WeakMap . These collections provide us with some very convenient operations. Knowing how they are is crucial, especially with modern JavaScript.
Generators are sometimes difficult to understand, especially for beginners. Generators allow us to write code functions that can be paused and restarted without blocking the execution of other code, which is very uncommon in JavaScript.
25. Promises
Jecelyn 's explanation for Promises is as follows: "Imagine you're a kid. Your mom promises you that she'll buy you a new phone next week."
You won't know until next week if you can get that phone. Your mom either actually bought you a brand new phone, or she didn't buy you one because she wasn't happy.
It's a promise. A Promise has three states, namely:
- Pending: You don't know if you're going to get that call
- Fulfilled: Mom is happy and bought you a new phone
- Rejected: Mom is not happy, she just won't buy it
26. Asynchronous programming
To understand what asynchronous programming is, we must first learn what synchronous programming is. Synchronous programming is thread blocking, since JS is single threaded, the code will execute line by line.
But with asynchronous code, you can perform some time-consuming tasks. This feature is especially useful when you have to perform multiple tasks that take a long time to complete. But in some cases, even if the code needs to be executed for a long time, it may be necessary to use a synchronous way, in which case async/await can be used.
27. ES6 Arrow Functions
Arrow functions are new to ES6 and are syntactical replacements for regular functions. The difference is that arrow functions are not bound to the this , arguments , super or new.target keywords. This makes arrow functions a good choice in some situations and a very bad choice in others.
So don't use arrow functions right away. You need to use them according to your actual situation.
Everyone said that there is no project to write on the resume, so I helped you find a project, and also included a [Building Tutorial] .
28. Data Structures
Regardless of the programming language used, data structures are one of the basics that a developer should have.
Bad programmers worry about code, good programmers worry about data structures and the relationships between them.
In terms of data structures, you should know about linked lists, queues, stacks, trees, graphs and hash tables.
29. Time complexity
Regardless of the programming language, time complexity analysis is another foundation of computer programming. To build better applications, you should write better solutions. For this, you need to understand the concept of time complexity. Also sometimes called BigO .
30. Algorithms
This is also one of the first things to be taught in basic computer courses. Simply put, an algorithm is a step-by-step process to achieve a goal. Programmers should be able to see any problem from an algorithmic point of view.
Although there are numerous algorithms with thousands of use cases, the following two are common:
- find
- sort
These two use cases are very common to programmers who should at least be aware of the known algorithms that implement them. There is no hard and fast rule that you should use one of these algorithms, but these algorithms are well known and well documented in terms of performance.
You can even create your own algorithms and introduce them to the world. If it's better than currently known algorithms, you might be the next programming star
31. Inheritance, Polymorphism and Code Reuse
Inheritance in JS can be implemented using prototypes. This is because JS is a non-OOP language. But JS provides some of the features of OOP by providing prototypal inheritance.
Polymorphism is the concept that an object, variable or function can take many forms. In JS, it's a bit difficult to see the effect of polymorphism, because in a statically typed system, polymorphism is more apparent in classical types.
Both of the above concepts can help us achieve better code reuse in JS.
32. Design Patterns
Design patterns represent best practices and are typically adopted by experienced object-oriented software developers. Design patterns are solutions to common problems that software developers face during software development. These solutions are the result of trial and error by numerous software developers over a considerable period of time.
33. Functional programming
Functional programming is a programming paradigm, a style of building the structure and elements of computer programs that treats computation as the evaluation of mathematical functions, avoiding changes in state and mutable data.
You need to master several concepts of functional programming:
- pure function
- immutable
- referential transparency
- Higher order functions
34. Principles of clean code
This is an essential skill that every developer should have, regardless of the programming language used. Each programming language has a separate set of good practices. Although these "good" practices are subjective and vary between workplaces, some practices are considered "good."
By following these coding principles, you can ensure that everyone can read and maintain your code. This will also help you and your team work together smoothly during the application development process.
35. Destructuring assignment
Introduced in ES6 destructuring assignment operator, it is very useful. They are simpler and more efficient than previous implementations for the same use cases.
36. ES2020 new features
One of the great things about programming is that if you don't keep learning, you'll never become an expert in the field. Programming languages continue to evolve over time as additional new features are introduced with each major release.
It also goes to show that your expertise on a concept is likely to be out of date 10 years into the future, as better alternatives are released along with version updates. This is a very common situation with any programming language.
ES2020 released several new features, including optional chaining, null coalescing, dynamic imports, and more. You have to learn these new concepts to keep up with the rapidly changing world of It.
It takes years of experience and time to master a language, but knowing what to master makes things easier, and hopefully these 36 concepts will help you.
The [Three Links] of talents is the biggest motivation for Xiaozhi to keep sharing. If there are any mistakes and suggestions in this blog, you are welcome to leave a message. Finally, thank you for watching.
The bugs that may exist after the code is deployed cannot be known in real time. In order to solve these bugs afterwards, a lot of time is spent on log debugging. By the way, I recommend a useful bug monitoring tool , Fundebug .
communicate with
If you have dreams and dry goods, you can search for [Great Move to the World] on WeChat and pay attention to this Shuwanzhi who is still washing dishes in the early hours of the morning.
This article GitHub https://github.com/qq449245884/xiaozhi has been included, there are complete test sites, materials and my series of articles for interviews with first-line manufacturers.
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。