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 was created with reference to @leonardomso. The English version of the project is 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.

update

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 “)

directory

  1. The call stack
  2. The original type
  3. Value type and reference type
  4. Implicit, explicit, nominal and duck type
  5. == and ===, typeof and Instanceof
  6. This, call, apply and bind
  7. Functional scope, block-level scope, and lexical scope
  8. closure
  9. Map, Reduce, filter and other higher-order functions
  10. Expressions and statements
  11. Variable ascension
  12. Promise
  13. Execute functions immediately, modularity, namespaces
  14. recursive
  15. algorithm
  16. The data structure
  17. Message queues and event loops
  18. SetTimeout and setInterval and requestAnimationFrame
  19. Inheritance, polymorphism, and code reuse
  20. Bitwise operators, array-like objects, and typed arrays
  21. DOM tree and rendering process
  22. New and constructors, instanceof and instances
  23. Prototype inheritance and prototype chain
  24. Object. The create and Object. Assign
  25. Factory functions and classes
  26. Design patterns
  27. Memoization
  28. Pure functions, side effects and state changes
  29. Cost performance operation and time complexity
  30. JavaScript engine
  31. Binary, decimal, hexadecimal, scientific notation
  32. Partial functions, Coriation, Compose and Pipe
  33. Clean code

1. Call stack

The article

  • 📖 Call Stack — MDN
  • 📖 How JavaScript works: An Overview of the engine, runtime, and call stack — Nuggets
  • 📖 Understand execution context and execution stack in JavaScript — nuggets of gold
  • 📖 This time, thoroughly understand the JavaScript execution mechanism – nuggets
  • 📖 Read JavaScript engine, runtime, and stack calls – open Source China
  • 📖 Tasks, microtasks, queues and schedules —— Jake Archibald

video

⬆️ Back to directory


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 six data types — MOOCs
  • 📺 javascript video tutorial (data type) — PHP Chinese Website

⬆️ Back to directory


Value types and reference types

The article

  • 📖 ECMAScript reference type — W3school
  • The difference between value types and reference types in 📖 JS – blogosphere
  • 📖 JavaScript value passing and reference passing — FunDebug
  • 📖 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

⬆️ Back to directory


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 of gold
  • 📖 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
  • 📖 dynamic typing languages and duck types — Tseng
  • 📖 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

⬆️ Back to directory


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

The article

  • 📖 Equality judgment in JavaScript — MDN
  • 📖 js == and === difference – nuggets
  • 📖 == vs === in Javascript —— CSDN
  • 📖 Take an in-depth look at javascript typeof and Instanceof — CSDN
  • 📖 JavaScript typeof purpose — justJavac
  • 📖 a graph to understand the relationship between Function and Object and briefly describe the instanceof operator — digging gold
  • 📖 Talk about the realization principle of Instanceof and Typeof — digging gold
  • 📖 js typeof and instanceof usage – blog garden

⬆️ Back to directory


6. This, call, apply and bind

The article

  • 📖 Javascript this usage — Ruan Yifeng
  • 📖 learn JS this is enough, do not need 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 this, this, and parameter passing problems in JS
  • 📖 github – native implementation of call, apply, and bind
  • 📖 explain JS this, apply, call, bind(classic interview questions) — the home of scripting

video

  • 📺 JavaScript about this keyword explanation — iQiyi
  • 📺 JS about scope closures 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
  • 📺 Everest Training JavaScript development course: about this keyword, closure scope — netease cloud class

⬆️ Back to directory


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

The article

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

⬆️ Back to directory


8. Closure

The article

  • 📖 closure — MDN
  • 📖 ECMAScript Closure — W3School
  • 📖 Learn Javascript closures by Yifeng Ruan
  • 📖 closure — Liao Xuefeng
  • 📖 Learn JavaScript closures once and for all – Jane Book
  • 📖 JavaScript closure — SegmentFault
  • 📖 js Advanced use of closures in anonymous self-executing functions – nuggets
  • 📖 Efficient use of JavaScript closures — nuggets of gold

video

  • 📺 JavaScript closures and closures — iQiyi
  • 📺 JS Object-oriented closure array 11. Closure — LeEco
  • 📺 Bai Hexiang _ Function (closure) — LeEco

⬆️ Back to directory


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

The article

  • 📖 Higher-order functions — Liao Xuefeng
  • 📖 ES5 added Array method details — Zhang Xinxu
  • 📖 a graph to understand JavaScript array iteration methods: forEach, map, filter, reduce, every, some — digging gold
  • 📖 Transducing (I) – JavaScript Lightweight Functional Programming – SegmentFault

⬆️ Back to directory


10. Expressions and statements

The article

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

⬆️ Back to directory


11. Variable promotion

The article

  • 📖 JavaScript variable promotion – beginner tutorial
  • 📖 ES6 Variable scope and promotion: The life cycle of variables in detail — nuggets
  • 📖 [翻译] JavaScript Scoping and collieries — SegmentFault
  • 📖 JavaScript Scoping and collieries — Ben Cherry

⬆️ Back to directory


12. Promise

The article

  • 📖 Use Promises — MDN
  • 📖 Promise – the MDN
  • 📖 Promie — Xuefeng Liao
  • 📖 JavaScript Promise: Gone and back — Masumi Seto
  • 📖 (above)JavaScript Promise: Introduction — Web Fundamentals
  • 📖 1 minute to read 10 minutes to learn JavaScript Async/Await — justJavac
  • 📖 JavaScript Promise Mini-book (Chinese version)
  • 📖 the path to JavaScript advancement – Recognize and use Promise, refactor your Js code – blog garden

video

  • 📺 Promise getting started — MOOCs

⬆️ Back to directory


13. Execute functions immediately, modularity, namespaces

The article

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

⬆️ Back to directory


14. Recursion

The article

  • 📖 seek to explain JS recursion — SegmentFault
  • 📖 Recursion in JavaScript — nuggets of gold
  • 📖 Recursion (I) – lightweight Functional programming in JavaScript – Nuggets of gold
  • 📖 Recursion (part 2) – lightweight Functional programming in JavaScript – Nuggets of gold
  • 📖 tail calls and tail recursion — nuggets
  • 📖 several classical recursive problems are implemented with JS – CSDN
  • 📖 Several examples of recursive functions – CSDN

⬆️ Back to directory


Algorithm of 15.

The article

  • 📖 Ten 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 – nuggets
  • 📖 JS’s 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

⬆️ Back to directory


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 structures – operators – LeEco

⬆️ Back to directory


17. Message queues and event loops

The article

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

⬆️ Back to directory


SetTimeout, setInterval, and requestAnimationFrame

The article

  • 📖 Window setTimeout() method – Novice tutorial
  • 📖 Window setInterval(
  • 📖 about setTimeout — Nuggets
  • 📖 Javascript you didn’t know: Interesting setTimeout — Nuggets of gold
  • 📖 so you are such a setTimeout – nuggets
  • What is the essential difference between 📖 setTimeout() and setInterval()? – SegmentFault
  • Book: window. RequestAnimationFrame — — MDN
  • 📖 requestAnimationFrame how much do you know? Blog – garden
  • 📖 CSS3 animation so strong, requestAnimationFrame and wool? – Zhang Xinxu
  • 📖 “JavaScript timer” setInterval, setTimeout and requestAnimationFrame analysis — SegmentFault
  • 📖 translation: setInterval and requestAnimationFrame interval test — SegmentFault
  • 📖 requestAnimationFrame implements a timer similar to setInterval — SegmentFault

video

  • 📺 setTimeout and setInterval — Youku

⬆️ Back to directory


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 that introduces you to encapsulation, inheritance and polymorphism — the gold mine
  • 📖 “Multiple inheritance” in JavaScript — nuggets
  • 📖 Code reuse pattern — Github
  • 📖 In-depth understanding of JavaScript: Code Reuse patterns (recommended) — Uncle Tom
  • 📖 In-depth understanding of JavaScript: Code Reuse patterns to avoid – Uncle Tom

⬆️ Back to directory


Bitwise operators, array-like objects, and typed arrays

The article

  • 📖 bitwise operator — MDN
  • 📖 array object — MDN
  • 📖 typed array — MDN
  • 📖 JavaScript ArrayBuffer analysis – Blog park

⬆️ Back to directory


21. DOM tree and rendering process

The article

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

video

  • 📺 BASIC explanation of DOM exploration – MOOC network
  • 📺 DOM Event Probe – MOOC
  • 📺 jQuery basics (2)DOM chapter – MOOC
  • 📺 JS manipulation of DOM object properties and methods – iQiyi

⬆️ Back to directory


22. New and constructors, instanceof and instances

The article

  • 📖 constructor and new command — Ruan Yifeng
  • 📖 Javascript Object-oriented Programming (2) : Constructor inheritance — Ruan Yifeng
  • 📖 Full stereotype chain details (constructors, stereotypes, instantiated objects) – CSDN
  • 📖 JavaScript constructor and new operator examples of detailed explanation – PHP Chinese website
  • 📖 Relationships between constructors, instances, stereotypes, and stereotype chains — CSDN
  • 📖 In-depth understanding of JS-Instanceof and prototype chain – CSDN
  • 📖 Front-end basics (9) : A detailed explanation of object orientation, constructors, prototypes and prototype chains – a brief book
  • 📖 js uses new to instantiate objects and calls this directly
  • 📖 JavaScript Not everything is an object — justJavac
  • 📖 JavaScript instanceof operator in depth – IBM

video

  • 📺 modified version of the constructor – LeEco

⬆️ Back to directory


23. Prototype inheritance and prototype chain

The article

  • 📖 Inheritance and prototype chain — MDN
  • 📖 constructor, prototype, and prototype chain — Github
  • 📖 Prototype and Chain — Github (1269 Star)
  • 📖 Untangle Object-Oriented javascript (I) Stereotype inheritance — SegmentFault
  • 📖 JavaScript: Inheritance and Prototype Chains (translation) — JustJavac
  • 📖 Three images to understand JavaScript prototype objects and prototype chains – the blog garden
  • 📖 A diagram to help you understand JavaScript’s inheritance and prototype chain – CSDN
  • 📖 JS Advanced — Prototype chain (easy to understand, but under 18 please detour) — CSDN
  • 📖 Archetypal inheritance — Liao Xuefeng
  • 📖 JS prototype chain and inheritance Don’t be asked again – nuggets
  • 📖 Conquer 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

⬆️ Back to directory


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 in 📖 JS
  • 📖 ES6 object.create() and Object.assign () — hyacinth blogs
  • 📖 Object – the Assign – Deep – making

⬆️ Back to directory


25. Factory functions and classes

The article

  • 📖 class – the MDN
  • 📖 Classes and examples — Liao Xuefeng
  • 📖 Javascript three ways to define a class — Ruan Yifeng
  • 📖 ES6 factory function — nuggets
  • 📖 JavaScript singleton, factory, constructor pattern for creating objects — nuggets of gold

⬆️ Back to directory


26. Design patterns

The article

  • 📖 Design pattern — Ruan Yifeng
  • 📖 JavaScript design patterns — Nuggets of gold
  • 📖 Learn JavaScript design patterns – Geek Academy
  • 📖 [Interview topic]JS Design pattern — SegmentFault
  • 📖 JavaScript Patterns Chinese version — Github

video

  • 📺 HTML5 syllabus 2-11JS design patterns

⬆️ Back to directory


27. Memoization

The article

  • 📖 JavaScript Memoization — Masami Seto
  • 📖 Memoization improves recursive Efficiency — Blog Park
  • 📖 How to improve JavaScript recursion efficiency – 51CTO
  • 📖 JavaScript Advanced Tips Memoization — SegmentFaut

⬆️ Back to directory


28. Pure functions, function side effects and state changes

The article

  • 📖 Pure Functions — React.js little book
  • 📖 JavaScript Functional Programming: Pure Functions — Ninghao net
  • 📖 js function side effects analysis – Script home
  • 📖 How to use pure functional JavaScript to handle dirty side effects — nuggets
  • 📖 native JavaScript implementation of state management system — blog park

⬆️ Back to directory


29. Performance consuming operation and time complexity

The article

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

⬆️ Back to directory


30. JavaScript engine

The article

  • 📖 javascript engine — Baidu Baike
  • 📖 V8(JavaScript engine) — Baidu Baike
  • 📖 Illustration to understand JavaScript engine Event Loop — Digging gold 3
  • 📖 V8 JavaScript Engine: High-performance ES2015+ — JustJavac
  • 📖 10 minutes to understand the implementation mechanism of the JS engine – SegmentFaut
  • 📖 V8 javascript engine – Blog park

⬆️ Back to directory


31. Binary, hex, decimal, scientific notation

The article

  • 📖 two, eight, ten, hexadecimal conversion (illustrated) – blog garden
  • 📖 JavaScript reads and writes binary data — nuggets of gold

video

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

⬆️ Back to directory


32. Partial functions, Coriation, Compose and Pipe

The article.

  • 📖 partial function of Javascript functional programming – CSDN
  • 📖 JavaScript thematic partial functions – SegmentFault
  • 📖 What is the difference between corrification and partial functions? – SegmentFault
  • 📖 Javascript partial functions and Currization — CSDN
  • 📖 Curry – JS functional programming guide
  • 📖 Code composition – JS functional programming guide
  • 📖 about the implementation of compose in javascript functional programming — SegmentFault
  • 📖 Five ways to implement Compose — SegmentFault
  • 📖 JavaScript functional programming function composition functions compose and PIPE implementation – SegmentFault
  • 📖 JavaScript Lightweight Functional Programming – Chapter 4: Composite functions – Nuggets

⬆️ Back to directory


33. Code cleanliness

The article

  • 📖 JavaScript code clean way – border town
  • 📖 Javascript programming style — Ruan Yifeng
  • 📖 Refactoring – Clean code – Nuggets
  • 📖 ES6 tips for making your code shorter, cleaner, and easier to read – nuggets
  • 📖 Web front end: 11 rules to keep your code clean by Bole Online


⬆️ Back to directory