33 Concepts Every JavaScript Developer Should Know
Introduction
This repository was created with the intention of helping developers master their concepts in JavaScript. It is not a requirement, but a guide for future studies. It is based on an article written by Stephen Curtis and you can read it here.
🚀 Considered by GitHub as one of the top open source projects of 2018!
Community
Feel free to submit a PR by adding a link to your own recaps or reviews. If you want to translate the repo into your native language, please feel free to do so.
All the translations for this repo will be listed below:
- Call Stack
- Primitive Types
- Value Types and Reference Types
- Implicit, Explicit, Nominal, Structuring and Duck Typing
- == vs === vs typeof
- Function Scope, Block Scope and Lexical Scope
- Expression vs Statement
- IIFE, Modules and Namespaces
- Message Queue and Event Loop
- setTimeout, setInterval and requestAnimationFrame
- JavaScript Engines
- Bitwise Operators, Type Arrays and Array Buffers
- DOM and Layout Trees
- Factories and Classes
- this, call, apply and bind
- new, Constructor, instanceof and Instances
- Prototype Inheritance and Prototype Chain
- Object.create and Object.assign
- map, reduce, filter
- Pure Functions, Side Effects, State Mutation and Event Propagation
- Closures
- High Order Functions
- Recursion
- Collections and Generators
- Promises
- async/await
- Data Structures
- Expensive Operation and Big O Notation
- Algorithms
- Inheritance, Polymorphism and Code Reuse
- Design Patterns
- Partial Applications, Currying, Compose and Pipe
- Clean Code
1. Call Stack
The call stack is a mechanism that the JavaScript interpreter uses to keep track of function execution within a program. In JavaScript, functions are executed in the order they are called. The call stack follows the Last In, First Out (LIFO) principle, meaning that the last function pushed onto the stack is the first one to be executed.
According to the ECMAScript specification, the call stack is defined as part of the execution context. Whenever a function is called, a new execution context is created and placed at the top of the stack. Once the function completes, its execution context is removed from the stack, and control returns to the previous context. This helps manage synchronous code execution, as each function call must complete before the next one can begin.
Reference
Articles
Videos
⬆ Back to Top
2. Primitive Types
According to the ECMAScript specification, JavaScript has six primitive data types: string, number, bigint, boolean, undefined, and symbol. These types are immutable, meaning their values cannot be altered. There is also a special primitive type called null, which represents the intentional absence of any object value.
Primitive values are directly assigned to a variable, and when you manipulate a primitive type, you’re working directly on the value. Unlike objects, primitives do not have properties or methods, but JavaScript automatically wraps primitive values with object counterparts when necessary (e.g., when calling methods on strings).
Reference
Articles
Videos
⬆ Back to Top
3. Value Types and Reference Types
According to the ECMAScript specification, value types are stored directly in the location that the variable accesses. These include types like number, string, boolean, undefined, bigint, symbol, and null. When you assign a value type to a variable, the value itself is stored.
Articles
Videos
⬆ Back to Top
4. Implicit, Explicit, Nominal, Structuring and Duck Typing
The ECMAScript specification defines JavaScript as a dynamically typed language, meaning that types are associated with values rather than variables, and type checking occurs at runtime. There are various ways JavaScript manages types:
Implicit Typing (or Type Coercion): This occurs when JavaScript automatically converts one data type to another when required. For instance, JavaScript might convert a string to a number during an arithmetic operation. While this can simplify some code, it can also lead to unexpected results if not handled carefully.
Explicit Typing: Unlike implicit typing, explicit typing involves manually converting a value from one type to another using functions like Number(), String(), or Boolean().
Nominal Typing: JavaScript doesn’t natively support nominal typing, where types are explicitly declared and checked. However, TypeScript, a superset of JavaScript, brings this feature to help catch type errors during development.
Structuring Typing: In this type system, types are based on the structure or properties of the data. JavaScript is a structurally typed language where objects are compatible if they share the same structure (i.e., the same set of properties and methods).
Duck Typing: This is a concept where an object’s suitability is determined by the presence of certain properties and methods, rather than by the actual type of the object. JavaScript relies heavily on duck typing, where behavior is inferred from an object’s properties rather than its declared type.
Articles
Videos
Books
⬆ Back to Top
5. == vs === vs typeof
According to the ECMAScript specification, JavaScript includes both strict (=) and loose () equality operators, which behave differently when comparing values. Here’s a breakdown:
== (Loose Equality): This operator performs type coercion before comparing two values. If the values are of different types, JavaScript will attempt to convert one or both values to a common type before comparison, which can lead to unexpected results.
=== (Strict Equality): This operator compares both the value and the type without any type coercion. If the two values are not of the same type, the comparison will return false.
typeof Operator: The typeof operator is used to check the data type of a variable. While it’s generally reliable, there are certain quirks, like how typeof null returns “object” instead of “null”, due to a long-standing behavior in JavaScript’s implementation.
Articles
Videos
⬆ Back to Top
6. Function Scope, Block Scope and Lexical Scope
The ECMAScript specification outlines three key types of scope:
Function Scope: Variables declared within a function using var are only accessible within that function. This scope isolates variables from being accessed outside of the function where they are declared.
Block Scope: Introduced with ES6, variables declared with let and const are block-scoped. This means they are only accessible within the specific block {} in which they are defined, such as inside loops or conditionals.
Lexical Scope: Refers to how variable access is determined based on the physical location of the variables in the code. Functions are lexically scoped, meaning that they can access variables from their parent scope.
Books
Articles
Videos
⬆ Back to Top
7. Expression vs Statement
According to the ECMAScript specification, expressions produce a value, and statements are instructions to perform an action, such as variable assignment or control flow. Function declarations are hoisted and can be called before they are defined in the code, while function expressions are not hoisted and must be defined before being invoked.
Articles
Videos
⬆ Back to Top
8. IIFE, Modules and Namespaces
With the introduction of ES6 modules, the role of IIFEs in scope isolation has diminished but they still remain relevant.
Reference
Articles
Videos
⬆ Back to Top
9. Message Queue and Event Loop
The Event Loop is a critical part of JavaScript’s concurrency model, ensuring non-blocking behavior by processing tasks in an asynchronous manner. Understanding how it interacts with the Message Queue and Microtasks is key to mastering JavaScript behavior.
Articles
Videos
⬆ Back to Top
10. setTimeout, setInterval and requestAnimationFrame
Articles
Videos
⬆ Back to Top
11. JavaScript Engines
Articles
Videos
⬆ Back to Top
12. Bitwise Operators, Type Arrays and Array Buffers
Articles
Videos
⬆ Back to Top
13. DOM and Layout Trees
Reference
Books
Articles
Videos
⬆ Back to Top
14. Factories and Classes
Articles
Videos
⬆ Back to Top
15. this, call, apply and bind
Reference
Articles
- Grokking call(), apply() and bind() methods in JavaScript — Aniket Kudale
- JavaScript’s Apply, Call, and Bind Methods are Essential for JavaScript Professionals — Richard Bovell
- Javascript: call(), apply() and bind() — Omer Goldberg
- The difference between call / apply / bind — Ivan Sifrim
- What the hack is call, apply, bind in JavaScript — Ritik
- Mastering ‘this’ in JavaScript: Callbacks and bind(), apply(), call() — Michelle Gienow
- JavaScript’s apply, call, and bind explained by hosting a cookout — Kevin Kononenko
- How AND When to use bind, call, and apply in Javascript — Eigen X
- Let me explain to you what is
this
. (Javascript) — Jason Yu
- Understanding the “this” Keyword in JavaScript — Pavan
- How to understand the keyword this and context in JavaScript — Lukas Gisder-Dubé
- What the heck is this in Javascript? — Hridayesh Sharma
- This and Bind In Javascript — Brian Barbour
- 3 Techniques for Maintaining Your Sanity Using “This” in JavaScript — Carl
- Mastering the JavaScript “this” Keyword — Aakash Srivastav
- This binding in JavaScript – 4. New binding — Spyros Argalias
- A quick intro to ‘this’ in JavaScript — Natalie Smith
- A conversation with the ‘this’ keyword in Javascript — Karen Efereyan
- What are call(), apply() and bind() in JavaScript — Amitav Mishra
- Understanding ‘this’ binding in JavaScript — Yasemin Cidem
- Top 7 tricky questions of ‘this’ keyword
Videos
- JavaScript call, apply and bind — techsith
- JavaScript Practical Applications of Call, Apply and Bind functions— techsith
- JavaScript (call, bind, apply) — curious aatma
- Understanding Functions and ‘this’ In The World of ES2017 — Bryan Hughes
- bind and this - Object Creation in JavaScript - FunFunFunction
- JS Function Methods call(), apply(), and bind() — Steve Griffith
- call, apply and bind method in JavaScript — Akshay Saini
- .[Javascript Interview Questions ( Call, Bind and Apply ) - Polyfills, Output Based, Explicit Binding - Roadside Coder] (https://youtu.be/VkmUOktYDAU?si=SdvLZ8FBmephPxjS)
⬆ Back to Top
16. new, Constructor, instanceof and Instances
Articles
⬆ Back to Top
17. Prototype Inheritance and Prototype Chain
Reference
Articles
Videos
Books
⬆ Back to Top
18. Object.create and Object.assign
Reference
Articles
Videos
⬆ Back to Top
19. map, reduce, filter
Articles
- JavaScript Functional Programming — map, filter and reduce — Bojan Gvozderac
- Learn map, filter and reduce in Javascript — João Miguel Cunha
- JavaScript’s Map, Reduce, and Filter — Dan Martensen
- How to Use Map, Filter, & Reduce in JavaScript — Peleke Sengstacke
- JavaScript — Learn to Chain Map, Filter, and Reduce — Brandon Morelli
- Javascript data structure with map, reduce, filter and ES6 — Deepak Gupta
- Understanding map, filter and reduce in Javascript — Luuk Gruijs
- Functional Programming in JS: map, filter, reduce (Pt. 5) — Omer Goldberg
- JavaScript: Map, Filter, Reduce — William S. Vincent
- Arrow Functions: Fat and Concise Syntax in JavaScript — Kyle Pennell
- JavaScript: Arrow Functions for Beginners — Brandon Morelli
- When (and why) you should use ES6 arrow functions — and when you shouldn’t — Cynthia Lee
- JavaScript — Learn & Understand Arrow Functions — Brandon Morelli
- (JavaScript )=> Arrow functions — sigu
- Javascript.reduce() — Paul Anderson
- Why you should replace forEach with map and filter in JavaScript — Roope Hakulinen
- Simplify your JavaScript – Use .map(), .reduce(), and .filter() — Etienne Talbot
- JavaScript’s Reduce Method Explained By Going On a Diet — Kevin Kononenko
- Difference between map, filter and reduce in JavaScript — Amirata Khodaparast
- Map⇄Filter⇄Reduce↻ — ashay mandwarya
- Finding Your Way With .map() — Brandon Wozniewicz
- How to write your own map, filter and reduce functions in JavaScript — Hemand Nair
- How to Manipulate Arrays in JavaScript — Bolaji Ayodeji
- How to simplify your codebase with map(), reduce(), and filter() in JavaScript — Alex Permyakov
- .map(), .filter(), and .reduce() — Andy Pickle
- Map/Filter/Reduce Crash Course — Chris Achard
- Map, Filter and Reduce – Animated — JavaScript Teacher
- Map, Filter, Reduce and others Arrays Iterators You Must Know to Become an Algorithms Wizard — Mauro Bono
- How to Use JavaScript’s .map, .filter, and .reduce — Avery Duffin
- Javascript performance test - for vs for each vs (map, reduce, filter, find) — Deepak Gupta
- Using .map(), .filter() and .reduce() properly — Sasanka Kudagoda
- Mastering the JavaScript Reduce method ✂️ — sanderdebr
- JavaScript Map – How to Use the JS .map() Function (Array Method) — FreeCodeCamp
Videos
- Map, Filter and Reduce — Lydia Hallie
- Map, Filter and Reduce - Akshaay Saini
- Functional JavaScript: Map, forEach, Reduce, Filter — Theodore Anderson
- JavaScript Array superpowers: Map, Filter, Reduce (part I) — Michael Rosata
- JavaScript Array superpowers: Map, Filter, Reduce (part 2) — Michael Rosata
- JavaScript Higher Order Functions - Filter, Map, Sort & Reduce — Epicop
- [Array Methods 2/3] .filter + .map + .reduce — CodeWithNick
- Arrow functions in JavaScript - What, Why and How — Fun Fun Function
- Learning Functional Programming with JavaScript — Anjana Vakil - JSUnconf
- Map - Parte 2 JavaScript - Fun Fun Function
- Reduce basics - Part 3 of FP in JavaScript - Fun Fun Function
- Reduce Advanced - Part 4 of FP in JavaScript - Fun Fun Function
- reduce Array Method | JavaScript Tutorial - Florin Pop
- map Array Method | JavaScript Tutorial - Florin Pop
- Different array methods in 1 minute | Midudev (Spanish)
⬆ Back to Top
20. Pure Functions, Side Effects, State Mutation and Event Propagation
Articles
Videos
⬆ Back to Top
21. Closures
Reference
Articles
Videos
⬆ Back to Top
22. High Order Functions
Books
Articles
Videos
⬆ Back to Top
23. Recursion
Articles
Videos
⬆ Back to Top
24. Collections and Generators
Reference
Articles
Videos
⬆ Back to Top
25. Promises
Reference
Articles
Videos
⬆ Back to Top
26. async/await
Reference
Books
Articles
Videos
⬆ Back to Top
27. Data Structures
Articles
Videos
⬆ Back to Top
28. Expensive Operation and Big O Notation
Articles
Videos
⬆ Back to Top
29. Algorithms
Articles
Videos
⬆ Back to Top
30. Inheritance, Polymorphism and Code Reuse
Reference
Articles
Videos
⬆ Back to Top
31. Design Patterns
Books
Articles
Videos
⬆ Back to Top
32. Partial Applications, Currying, Compose and Pipe
Books
Articles
Videos
⬆ Back to Top
33. Clean Code
Articles
Videos
⬆ Back to Top
License
This software is licensed under MIT License, See License for more information ©Leonardo Maldonado.