33 Concepts every JavaScript Engineer should know

Introduction to the

This project was created to help developers master JavaScript concepts. It is not required, but can be used as a guide in future learning (JavaScript).

This article is based on @leonardomso
here. I created a Chinese version with some articles and videos about these concepts in China. If you have a better article or video, you can contribute, feel wrong, please contact me to delete.

If you have a better article or video, you can contribute, feel wrong, please contact me to delete.

Article sorting optimization, the previous article is to introduce the concept, the following article is in-depth interpretation.
Merge “higher-order functions” and “map, reduce, filter” into “map, reduce, filter, etc.”
Added the concept of “promise” (to replace deleted “higher-order functions “)

1. Call stack

The article

The Call Stack – MDN
How JavaScript works: An overview of the engine, runtime, and call stack
Understand the execution context and execution stack in JavaScript
This time, thoroughly understand the JavaScript execution mechanism
Engine, runtime, and stack calls in JavaScript: Open Source China
Queues and Schedules — Jake Archibald

video

What is the event loop anyway? — Tencent Video (English subtitles)
Understanding The JavaScript Call Stack, Event Queue, Event Table, & Event Loop —— Bilibili
JS variable promotion, stack memory and closure details – Acfun
Event loop model — PHP Chinese

2. Primitive types

The article

Raw data — MDN
ECMAScript primitive type — W3school
How numbers are encoded in JavaScript —— Dr. Axe
Floating point knowledge every JavaScript developer should know – Yan Hai Mirror
JavaScript Standard Reference Tutorial (Basic syntax values) by Yifeng Ruan
The Secret Life of JavaScript Primitives —— Angus Croll

video

Javascript has six data types
Javascript Video Tutorials (data type) — PHP Chinese

Value types and reference types

The article

ECMAScript reference type — W3school
The difference between value types and reference types in js
JavaScript value passing and reference passing
Primitive Types & Reference Types in JavaScript —— Bran van der Meer
JavaScript: Passing by Value or by Reference —— CSDN
Js value reference and value replication — SegmentFault
Js – Reference and copy (value and address) – CSDN

4. Implicit, explicit, nominal and duck type

The article

ECMAScript type conversion — W3school
JavaScript quirk # 1: Implicit type conversion — justJavac
JavaScript operator rules and implicit type conversions: Nuggets
Talk about implicit type conversions in JS – SegmentFault
Interesting JavaScript implicit type conversions – Blogosphere
JavaScript explicit and implicit type conversions — CSDN
JavaScript (Middle Volume) Casts you didn’t know about — simple book
Do you know JavaScript? #8 Forced transformation — Cythilya
Dynamically typed languages and duck types — A probe
Nominal & Structural Typing —— flow
What exactly is Type Coercion in Javascript? – stackoverflow
You Don’t Know JS: Types & Grammar —— github

video

Javascript implicit conversion – MOOC
Javascript basics enhancement – Type conversion – dark horse programmer

“Xiaobian collated a whole set of systemswebFront-end learning tutorial from the most basic to the framework and then to the project actual combat learning materials have been sorted out, sent to each partner, there are want to learnwebFront-end programming, or change careers, or college students, and want to improve their ability in the work, see my personality signature oh ~~~. “

5. == vs ===, typeof vs instanceof

The article

Equality judgment in JavaScript — MDN
The difference between == and === in js — nuggets
== vs == in Javascript — CSDN
In-depth understanding of Javascript typeof and Instanceof — CSDN
The purpose of JavaScript typeof — justJavac
Instanceof operator Function and Object
Brief introduction to the realization principle of Instanceof and Typeof — gold digging
Typeof and instanceof in js

6. This, call, apply and bind

The article

Javascript this usage — Ruan Yifeng
Learn JS this this one is enough, do not have to remember – Jane book
What is this — understanding JavaScript’s this, call, apply, and bind — nuggets of gold
This, apply, call, bind — nuggets
Use call, apply, and bind to solve annoying this, this, and parameter passing problems in JS
Github – native implementation of Call, Apply, and Bind
JS this, apply, call, bind(classic interview questions) — script home

video

JavaScript about this keyword explanation – iQiyi
JS about scope closure and this comprehensive interview questions – Baidu video
Js object-oriented closure array 12. Function in this — LeEco video
1.3.10- This Point and this application — LeEco Video
About this keyword, closure scope — netease cloud class

“Xiaobian collates a set of systematic Web front-end learning tutorials from the most basic to the framework and then to the project actual combat learning materials have collates, sent to every partner, there are want to learn web front-end programming, or change careers, or college students, and want to improve their ability in the work, see my personality signature oh ~~~. “

7. Functional scope, block-level scope and lexical scope

The article

Variable scope and Deconstruction Assignment — Liao Xuefeng
Learn Javascript closures — Yifeng Ruan
Lexical scope, closures, and exit closures in JavaScript — SegmentFault
JavaScript deep lexical and dynamic scoping — nuggets of gold
Deeper understanding of closure prepositions → scope and lexical scope — digging gold
What is lexical scope? – stackoverflow
You Don’t Know JS: Scope & Closures – Kyle Simpson

8. Closure

The article

Closure – the MDN
ECMAScript Closure — W3School
Learn Javascript closures — Yifeng Ruan
Closure — Liao Xuefeng
Learn JavaScript closures at once — Jane Book
JavaScript closure — SegmentFault
Advanced use of closures in js anonymous self-executing functions – mining gold
Efficient use of JavaScript closures — Nuggets of gold

video

JavaScript closures and closures

11. Closure — LetV
Bai Hexiang _ Function (closure) — LeEco

9. Map, Reduce, filter and other higher-order functions

The article

Higher order function — Liao Xuefeng
ES5 new Array method details – Zhang Xinxu
ForEach, Map, filter, reduce, every, some — Digging gold
2. “JavaScript Lightweight Functional Programming” — SegmentFault

10. Expressions and statements

The article

Js expressions and statements – blog garden
The difference between JS expressions and statements — SegmentFault
Expressions and statements in JavaScript — CSDN
Reread Expression vs Statement — SegmentFault in Axel’s Javascript
Expressions versus statements in JavaScript —— Dr. Axel

11. Variable promotion

The article

JavaScript variable promotion – Beginner tutorial
ES6 Variable scope and promotion: The life cycle of variables in detail — Nuggets
In the case of collieries, apply in case of SegmentFault
JavaScript Scoping and collieries — Ben Cherry

“Xiaobian collated a whole set of systemswebFront-end learning tutorial from the most basic to the framework and then to the project actual combat learning materials have been sorted out, sent to each partner, there are want to learnwebFront-end programming, or change careers, or college students, and want to improve their ability in the work, see my personality signature oh ~~~. “

12. Promise

The article

Use Promises — MDN
Promise – MDN
Promie — Liao Xuefeng
JavaScript Promise: Go and return – – Masumi Seto
JavaScript Promise: Introduction — Web Fundamentals
Read 10 minutes of JavaScript Async/Await in 1 minute — justJavac
JavaScript Promise Mini-Book (Chinese version)
The path to JavaScript advancement – recognize and use Promise, refactor your Js code – blog garden

video

Promise: MoOCs

13. Execute functions immediately, modularity, namespaces

The article

Javascript modular programming (A) : module writing — Ruan Yifeng
Javascript modular programming – details immediately execute function expressions – simple book
Anonymous functions and self-execution in Javascript — nuggets of gold
Front-end modularization — Technology selection — SegmentFault
Talk about the Js front-end modular specification – SegmentFault

14. Recursion

The article

Explain JS recursion — SegmentFault
Recursion in JavaScript — nuggets of gold
Recursion (part 1) – JavaScript Lightweight Functional Programming – Nuggets of gold
Recursion (part 2) – JavaScript Lightweight Functional Programming — Nuggets of gold
Tail calls and tail recursion — nuggets
Several classical recursive problems are implemented with JS – CSDN
A few examples of recursive functions — CSDN

Algorithm of 15.

The article

Top 10 Classic sorting algorithms summary (JavaScript description) – Nuggets
Learn data structures and algorithms in JavaScript — nuggets of gold
JS may be used to get all the sorting algorithm – digging gold
JS home sorting algorithm – Jane book
JS implementation of common front-end algorithms – SegmentFault
Common algorithm problems in front-end interview — Pu Xiaohua’s blog

video

Javascript implementation of binary tree algorithm — MOOC network

16. Data structure

The article

Let’s talk about the JS data structure – simple book
Algorithms and data structures in JavaScript — Simplicity
Learn JS must see -JavaScript data structure in-depth analysis – avenue to the simple blog
Js basic data structure array deduplication problem – nuggets

video

JavaScript data structure – operators – Letv

17. Message queues and event loops

The article

Concurrency model and event loop — MDN
Detailed explanation of JavaScript operation mechanism: Talk about Event Loop again — Ruan Yifeng
In-depth understanding of JavaScript event loops – Blog Garden
Simple Javascript event loop mechanism — Zhihu
JS Event loop macro task, micro task — SegmentFault
JavaScript: Thoroughly understand synchronous, asynchronous, and event loops — SegmentFault

SetTimeout, setInterval, and requestAnimationFrame

The article

Window setTimeout() method — Beginner tutorial
Window setInterval() method — Beginner tutorial
SetTimeout — Nuggets
Javascript you didn’t know: Interesting setTimeout — Nuggets of gold
So you are such a setTimeout — nuggets
How is setTimeout() essentially different from setInterval()? – SegmentFault
Book: window. RequestAnimationFrame — — MDN
How much does requestAnimationFrame know? Blog – garden
CSS3 animation is so strong, requestAnimationFrame is still used? – Zhang Xinxu
“JavaScript Timer” setInterval, setTimeout and requestAnimationFrame analysis — SegmentFault
SetInterval and requestAnimationFrame interval test – SegmentFault
RequestAnimationFrame implements a timer similar to setInterval — SegmentFault

video

SetTimeout and setInterval — Youku

19. Inheritance, polymorphism and code reuse

The article

JS object-oriented programming: Encapsulation, Inheritance, polymorphism — blog garden
Javascript inheritance and polymorphism — Simple book
Js: Object-oriented programming introduces you to encapsulation, inheritance and polymorphism — the gold mine
“Multiple inheritance” in JavaScript — nuggets
Code reuse pattern — Github
An in-depth understanding of JavaScript: Code Reuse Patterns (Recommended) — Uncle Tom
Understand JavaScript in depth: Code Reuse patterns (to avoid) — Uncle Tom

“Xiaobian collated a whole set of systemswebFront-end learning tutorial from the most basic to the framework and then to the project actual combat learning materials have been sorted out, sent to each partner, there are want to learnwebFront-end programming, or change careers, or college students, and want to improve their ability in the work, see my personality signature oh ~~~. “

Bitwise operators, array-like objects, and typed arrays

The article

Bitwise operator — MDN
Class array object — MDN
Typed array — MDN
A brief analysis of JavaScript ArrayBuffer — Blog Garden

21. DOM tree and rendering process

The article

How to create a DOM tree – MDN
HTML DOM node — W3school
DOM Overview — Ruan Yifeng
DOM (part 1) — Nuggets of gold
DOM (2) — Nuggets of gold
Master DOM manipulation — digging gold
Operate DOM — Liao Xuefeng
CSS and JS block DOM parsing and rendering in this way — nuggets of gold

video

DOM exploration of the foundation of detailed explanation – MOOC network
DOM Event Exploration — MOOCs
Moocs (Open Source
JS manipulation of DOM object properties and methods – iQiyi

22. New and constructors, instanceof and instances

The article

Constructors and the new command — Ruan Yifeng
Javascript Object-oriented Programming (2) : Constructor Inheritance — Ruan Yifeng
Full stereotype chain detail diagram (constructor, stereotype, instantiated object) – CSDN
Constructor and new operators in JavaScript examples of detailed explanation — PHP Chinese
Relationships between constructors, instances, stereotypes, and stereotype chains — CSDN
In-depth understanding of JS-Instanceof and prototype chain CSDN
Front End Basics (9) : Full explanation of object orientation, constructors, prototypes, and prototype chains – simple book
Js instantiates an object with new instead of calling this directly
Not everything in JavaScript is an object — justJavac
JavaScript Instanceof operator in depth — IBM

video

An improved version of the constructor — Letv

23. Prototype inheritance and prototype chain

The article

Inheritance and Prototype chain — MDN
Constructors, stereotypes, and stereotype chains — Github
— Github (1269 Star)
Untangle Object-Oriented javascript (I) Stereotype inheritance — SegmentFault
JavaScript: Inheritance and Prototype Chains (translation) — JustJavac
Three diagrams to understand JavaScript prototype objects and prototype chains – blog garden
A diagram gives you a sense of JavaScript’s inheritance and prototype chain, CSDN
JS Advanced — prototype chain (a look to understand, but under 18 please detour) — CSDN
Prototype inheritance — Liao Xuefeng
JS prototype chains and inheritance Don’t be asked again – nuggets
Conquering JavaScript Interview Series: The Difference between Class Inheritance and stereotype Inheritance — Nuggets

video

JS Advanced -07- Prototype chain inheritance – LeEco
JS prototype object and prototype chain introduction — Tencent Video

24. The Object. The create and Object. The assign

The article

Object. Create — MDN
Object. The assign — — MDN
Object. Create vs. Object. Assign — MOOCs Notes
Object.assign(), Object.create(), object.defineProperty () — CSDN
Es6 object.create() and Object.assign () — hyacinth blogs
The Object – the Assign – Deep – making

25. Factory functions and classes

The article

Class – MDN
Classes and Examples — Liao Xuefeng
Three ways to define a class in Javascript — Nguyen Yifeng
ES6 factory function — nuggets
The singleton, factory, constructor pattern for JavaScript object creation — nuggets of gold

26. Design patterns

The article

Design pattern — Ruan Yifeng
JavaScript Design patterns — Nuggets of gold
Learn JavaScript Design Patterns — Geek Academy
JS Design pattern — SegmentFault
JavaScript Patterns — Github

video

HTML5 syllabus 2-11JS Design Patterns

27. Memoization

The article

JavaScript Memoization — Masami Stodo
Memoization improves recursive Efficiency — Blog Garden
How to improve JavaScript recursion efficiency – 51CTO
Memoization — SegmentFaut

28. Pure functions, function side effects and state changes

The article

Pure Functions — React.js little book
JavaScript Functional Programming: Pure Functions — Ninghao net
Side effects analysis of JS functions – Script House
How to use pure functional JavaScript to handle dirty side effects — nuggets
Native JavaScript state management system – blog garden

29. Performance consuming operation and time complexity

The article

What does time order log n mean? – the nuggets
Time complexity and space complexity of algorithms — mining gold
Algorithm (I) time complexity — mining gold
Big O Search Algorithms in JavaScript —— Bradley Braithwaite
Time Complexity Analysis in JavaScript — Jennifer Bland

30. JavaScript engine

The article

Javascript engine — Baidu Baike
V8(JavaScript engine) – Baidu Encyclopedia
Learn about the JavaScript engine Event Loop — Nuggets 3
V8 JavaScript engine: High performance ES2015+ — JustJavac
10 minutes to understand the implementation mechanism of JS engine – SegmentFaut
V8 javascript engine – Blogosphere

31. Binary, hex, decimal, scientific notation

The article

2, 8, 10, hexadecimal conversion (illustrated) – Blog garden
JavaScript reads and writes binary data — the gold mine

video

Is it difficult to convert binary, decimal and hexadecimal into each other? — Baidu Video

32. Partial functions, Coriation, Compose and Pipe

The article.

Partial function of Javascript functional programming — CSDN
Partial functions of JavaScript topics – SegmentFault
What’s the difference between a Currie and a partial function? – SegmentFault
Javascript partial functions and Currization — CSDN
Curry – A guide to JS functional programming
Compose – A guide to JS functional programming
The SegmentFault implementation of Compose in javascript functional programming
Five ways to implement Compose — SegmentFault
Implementation of JavaScript functional programming function composition functions compose and PIPE — SegmentFault
Lightweight functional Programming in JavaScript – Chapter 4: Composite functions – Nuggets of gold

“Xiaobian collated a whole set of systemswebFront-end learning tutorial from the most basic to the framework and then to the project actual combat learning materials have been sorted out, sent to each partner, there are want to learnwebFront-end programming, or change careers, or college students, and want to improve their ability in the work, see my personality signature oh ~~~. “

33. Code cleanliness

The article

The way to clean JavaScript code — border town
Javascript programming style — Ruan Yifeng
Refactoring – Clean code
ES6 tips to make your code shorter, cleaner, and easier to read
The Web Front End: 11 rules to keep your code clean by Bole Online