33 JS Concepts

33 JavaScript concepts every developer should know.

README

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 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:

- اَلْعَرَبِيَّةُ(Arabic) — Amr Elsekilly

- 汉语 (Chinese) — Re Tian

- Português do Brasil (Brazilian Portuguese) — Tiago Boeing

- 한국어 (Korean) — Suin Lee

- Español (Spanish) — Adonis Mendoza

- Türkçe (Turkish) — İlker Demir

- русский язык (Russian) — Mihail Gumennii

- Tiếng Việt (Vietnamese) — Nguyễn Trần Chung

- Polski (Polish) — Dawid Lipinski

- فارسی (Persian) — Majid Alavizadeh

- Bahasa Indonesia (Indonesian) — Rijdzuan Sampoerna

- Français (French) — Robin Métral

- हिन्दी (Hindi) — Vikas Chauhan

- Ελληνικά (Greek) — Dimitris Zarachanis

- 日本語 (Japanese) — oimo23

- Deutsch (German) — burhannn

- украї́нська мо́ва (Ukrainian) — Andrew Savetchuk

- සිංහල (Sinhala) — Udaya Shamendra

- Italiano (Italian) — Gianluca Fiore

- ภาษาไทย (Thai) — Arif Waram

- Català (Catalan) — Mario Estrada

## Table of Contents

1. Call Stack

2. Primitive Types

3. Value Types and Reference Types

4. Implicit, Explicit, Nominal, Structuring and Duck Typing

5. == vs === vs typeof

6. Function Scope, Block Scope and Lexical Scope

7. Expression vs Statement

8. IIFE, Modules and Namespaces

9. Message Queue and Event Loop

10. setTimeout, setInterval and requestAnimationFrame

11. JavaScript Engines

12. Bitwise Operators, Type Arrays and Array Buffers

13. DOM and Layout Trees

14. Factories and Classes

15. this, call, apply and bind

16. new, Constructor, instanceof and Instances

17. Prototype Inheritance and Prototype Chain

18. Object.create and Object.assign

19. map, reduce, filter

20. Pure Functions, Side Effects, State Mutation and Event Propagation

21. Closures

22. High Order Functions

23. Recursion

24. Collections and Generators

25. Promises

26. async/await

27. Data Structures

28. Expensive Operation and Big O Notation

29. Algorithms

30. Inheritance, Polymorphism and Code Reuse

31. Design Patterns

32. Partial Applications, Currying, Compose and Pipe

33. Clean Code

1. Call Stack

2. Primitive Types

Reference

- 📜 JavaScript data types and data structures — MDN

Articles

- 📜 How numbers are encoded in JavaScript — Dr. Axel Rauschmayer

- 📜 What You Need to Know About JavaScript Number Type — Max Wizard K

- 📜 What Every JavaScript Developer Should Know About Floating Point Numbers — Chewxy

- 📜 The Secret Life of JavaScript Primitives — Angus Croll

- 📜 Primitive Types — Flow

- 📜 (Not) Everything in JavaScript is an Object — Daniel Li

- 📜 JavaScript data types and data structures — MDN

- 📜 Diving Deeper in JavaScripts Objects — Arfat Salman

- 📜 The differences between Object.freeze() vs Const in JavaScript — Bolaji Ayodeji

- 📜 Object to primitive conversion — JavaScript.info

Videos

- 🎥 JavaScript Reference vs Primitive Types — Academind

- 🎥 JavaScript Primitive Types — Simon Sez IT

- 🎥 Value Types and Reference Types in JavaScript — Programming with Mosh

- 🎥 JavaScript Primitive Data Types — Avelx

- 🎥 Everything you never wanted to know about JavaScript numbers — Bartek Szopka

- 🎥 What are variables in Javascript? — JS For Everyone

- 🎥 TIPOS DE DATOS PRIMITIVOS en JAVASCRIPT - La Cocina del Código

⬆ Back to Top

3. Value Types and Reference Types

Articles

- 📜 Explaining Value vs. Reference in Javascript — Arnav Aggarwal

- 📜 Primitive Types & Reference Types in JavaScript — Bran van der Meer

- 📜 Value Types, Reference Types and Scope in JavaScript — Ben Aston

- 📜 Back to roots: JavaScript Value vs Reference — Miro Koczka

- 📜 Grasp “By Value” and “By Reference” in JavaScript — Léna Faure

- 📜 JavaScript Reference and Copy Variables — Vítor Capretz

- 📜 JavaScript Primitive vs Reference Values

- 📜 JavaScript by Reference vs. by Value — nrabinowitz

- 📜 JavaScript Interview Prep: Primitive vs. Reference Types — Mike Cronin

- 📜 [JavaScript map vs. forEach: When to Use Each One - Sajal Soni] ()

Videos

- 🎥 Javascript Pass by Value vs Pass by Reference — techsith

- 🎥 JavaScript Value vs Reference Types — Programming with Mosh

- 🎥 VALORES vs REFERENCIAS en JAVASCRIPT - La Cocina del Código

⬆ Back to Top

4. Implicit, Explicit, Nominal, Structuring and Duck Typing

Articles

- 📜 What you need to know about Javascript's Implicit Coercion — Promise Tochi

- 📜 JavaScript Type Coercion Explained — Alexey Samoshkin

- 📜 Javascript Coercion Explained — Ben Garrison

- 📜 What exactly is Type Coercion in Javascript? - Stack Overflow

Videos

- 🎥 == ? === ??? ...#@^% - Shirmung Bielefeld

- 🎥 Coercion in Javascript - Hitesh Choudhary

- 🎥 JavaScript Questions: What is Coercion? - Steven Hancock

- 🎥 Typing: Static vs Dynamic, Weak vs. Strong - Codexpanse

- 🎥 EL SISTEMA de TIPOS DE JAVASCRIPT - La Cocina del Código

Books

- You Don't Know JS, 1st Edition: Types & Grammar — Kyle Simpson

⬆ Back to Top

5. == vs === vs typeof

Articles

- 📜 JavaScript Double Equals vs. Triple Equals — Brandon Morelli

- 📜 Should I use === or == equality comparison operator in JavaScript? — Panu Pitkamaki

- 📜 == vs === JavaScript: Double Equals and Coercion — AJ Meyghani

- 📜 Why Use the Triple-Equals Operator in JavaScript? — Louis Lazaris

- 📜 What is the difference between == and === in JavaScript? — Craig Buckler

- 📜 Why javascript's typeof always return "object"? — Stack Overflow

- 📜 Checking Types in Javascript — Toby Ho

- 📜 How to better check data types in JavaScript — Webbjocke

- 📜 Checking for the Absence of a Value in JavaScript — Tomer Aberbach

Videos

- 🎥 JavaScript - The typeof operator — Java Brains

- 🎥 Javascript typeof operator — DevDelight

⬆ Back to Top

6. Function Scope, Block Scope and Lexical Scope

Books

- You Don't Know JS Yet, 2nd Edition: Scope & Closures — Kyle Simpson

Articles

- 📜 JavaScript Functions — Understanding The Basics — Brandon Morelli

- 📜 The battle between Function Scope and Block Scope — Marius Herring

- 📜 Functions in JavaScript - Deepa Pandey

- 📜 Emulating Block Scope in JavaScript — Josh Clanton

- 📜 The Difference Between Function and Block Scope in JavaScript — Joseph Cardillo

- 📜 Function Scopes and Block Scopes in JavaScript — Samer Buna

- 📜 Understanding Scope and Context in JavaScript — Ryan Morr

- 📜 JavaScript Scope and Closures — Zell Liew

- 📜 Understanding Scope in JavaScript — Wissam Abirached

- 📜 Understanding Scope in JavaScript ― Hammad Ahmed

- 📜 When to use a function declaration vs. a function expression ― Amber Wilkie

- 📜 A JavaScript Fundamentals Cheat Sheet: Scope, Context, and “this” ― Alexandra Fren

- 📜 Functions / Function scope ― MDN

Videos

- 🎥 What Makes Javascript Weird ... and Awesome pt. 4 — LearnCode.academy

- 🎥 Variable Scope in JavaScript — Kirupa Chinnathambi

- 🎥 JavaScript Block Scope and Function Scope — mmtuts

- 🎥 What the Heck is Lexical Scope? — NWCalvank

- 🎥 Variable Scope — Steve Griffith

⬆ Back to Top

7. Expression vs Statement

Articles

- 📜 All you need to know about Javascript's Expressions, Statements and Expression Statements — Promise Tochi

- 📜 Function Expressions vs Function Declarations — Paul Wilkins

- 📜 JavaScript Function — Declaration vs Expression — Ravi Roshan

- 📜 Function Declarations vs. Function Expressions — Mandeep Singh

- 📜 Function Declarations vs. Function Expressions — Anguls Croll

Videos

- 🎥 Expressions vs. Statements in JavaScript — Hexlet

- 🎥 JavaScript - Expression vs. Statement — WebTunings

⬆ Back to Top

8. IIFE, Modules and Namespaces

Articles

- 📜 Mastering Immediately-Invoked Function Expressions ― Chandra Gundamaraju

- 📜 Do ES6 Modules make the case of IIFEs obsolete?

- 📜 A 10 minute primer to JavaScript modules, module formats, module loaders and module bundlers ― Jurgen Van de Moere

- 📜 Modules ― Exploring JS

- 📜 ES modules: A cartoon deep-dive — Lin Clark

- 📜 Understanding ES6 Modules — Craig Buckler

- 📜 An overview of ES6 Modules in JavaScript — Brent Graham

- 📜 ES6 Modules in Depth — Nicolás Bevacqua

- 📜 ES6 modules, Node.js and the Michael Jackson Solution — Alberto Gimeno

- 📜 JavaScript Modules: A Beginner’s Guide — Preethi Kasireddy

- 📜 Using JavaScript modules on the web — Addy Osmani & Mathias Bynens

- 📜 IIFE: Immediately Invoked Function Expressions — Parwinder

- 📜 Javascript Module Bundlers — Vanshu Hassija

Videos

- 🎥 Immediately Invoked Function Expression - Beau teaches JavaScript — freeCodeCamp

- 🎥 Understanding JavaScript IIFE — Sheo Narayan

- 🎥 JavaScript Modules: ES6 Import and Export — Kyle Robinson

- 🎥 ES6 - Modules — Ryan Christiani

- 🎥 ES6 Modules in the Real World — Sam Thorogood

- 🎥 ES6 Modules — TempleCoding

- 🎥 JavaScript IIFE (Immediately Invoked Function Expressions) — Steve Griffith

⬆ Back to Top

9. Message Queue and Event Loop

Articles

- 📜 JavaScript Event Loop Explained — Anoop Raveendran

- 📜 The JavaScript Event Loop: Explained — Erin Sweson-Healey

- 📜 Understanding JS: The Event Loop — Alexander Kondov

- 📜 Understanding the JavaScript Event Loop — Ashish Gupta

- 📜 The JavaScript Event Loop — Flavio Copes

- 📜 How JavaScript works: Event loop — Alexander Zlatkov

- 📜 Tasks, microtasks, queues and schedules — Jake Archibald

- 📜 Visualising the JavaScript Event Loop with a Pizza Restaurant analogy — Priyansh Jain

- 📜 JavaScript Visualized: Event Loop — Lydia Hallie

Videos

- 🎥 What the heck is the event loop anyway? | JSConf EU — Philip Roberts

- 🎥 JavaScript Event Loop — ComScience Simplified

- 🎥 I'm stuck in an Event Loop — Philip Roberts

- 🎥 In The Loop - Jake Archibald | JSConf.Asia 2018

- 🎥 Desmitificando el Event Loop (Spanish)

- 🎥 Callbacks, Sincrono, Assíncrono e Event Loop (PT-BR)

⬆ Back to Top

10. setTimeout, setInterval and requestAnimationFrame

Articles

- 📜 setTimeout and setInterval — JavaScript.Info

- 📜 Why not to use setInterval — Akanksha Sharma

- 📜 setTimeout VS setInterval — Develoger

- 📜 Using requestAnimationFrame — Chris Coyier

- 📜 Understanding JavaScript's requestAnimationFrame() — JavaScript Kit

- 📜 Handling time intervals in JavaScript - Amit Merchant

Videos

- 🎥 Javascript: How setTimeout and setInterval works — Coding Blocks India

- 🎥 setTimeout and setInterval in JavaScript — techsith

- 🎥 JavaScript Timers — Steve Griffith

- 🎥 JavaScript setTimeOut and setInterval Explained — Theodore Anderson

⬆ Back to Top

11. JavaScript Engines

Articles

- 📜 JavaScript Engines — Jen Looper

- 📜 Understanding How the Chrome V8 Engine Translates JavaScript into Machine Code — DroidHead

- 📜 Understanding V8’s Bytecode — Franziska Hinkelmann

- 📜 A Brief History of Google’s V8 Javascript Engine — Clair Smith

- 📜 JavaScript essentials: why you should know how the engine works - Rainer Hahnekamp

- 📜 JavaScript engine fundamentals: Shapes and Inline Caches

- 📜 JavaScript engine fundamentals: optimizing prototypes

- 📜 How V8 optimizes array operations

Videos

- 🎥 JavaScript Engines: The Good Parts™ — Mathias Bynens & Benedikt Meurer

- 🎥 JS Engine EXPOSED 🔥 Google's V8 Architecture 🚀 | Namaste JavaScript Ep. 16 - Akshay Saini

⬆ Back to Top

12. Bitwise Operators, Type Arrays and Array Buffers

Articles

- 📜 Programming with JS: Bitwise Operations — Alexander Kondov

- 📜 Using JavaScript’s Bitwise Operators in Real Life — ian m

- 📜 JavaScript Bitwise Operators — w3resource

- 📜 Bitwise Operators in Javascript — Joe Cha

- 📜 A Comprehensive Primer on Binary Computation and Bitwise Operators in Javascript — Paul Brown

- 📜 How can I understand Bitwise operation in JavaScript?

Videos

- 🎥 JavaScript Bitwise Operators — Programming with Mosh

⬆ Back to Top

13. DOM and Layout Trees

Books

- 📜 Eloquent JavaScript, 3rd Edition: Ch. 14 - The Document Object Model

Articles

- 📜 How To Understand and Modify the DOM in JavaScript — Tania Rascia

- 📜 What’s the Document Object Model, and why you should know how to use it — Leonardo Maldonado

- 📜 JavaScript DOM Tutorial with Example — Guru99

- 📜 What is the DOM? — Chris Coyier

- 📜 Traversing the DOM with JavaScript — Zell Liew

- 📜 DOM Tree

- 📜 How to traverse the DOM in Javascript — Vojislav Grujić

- 📜 Render Tree Construction — Ilya Grigorik

- 📜 What exactly is the DOM?

Videos

- 🎥 JavaScript DOM — The Net Ninja

- 🎥 JavaScript DOM Crash Course — Traversy Media

⬆ Back to Top

14. Factories and Classes

Articles

- 📜 How To Use Classes in JavaScript — Tania Rascia

- 📜 Javascript Classes — Under The Hood — Majid

- 📜 Better JavaScript with ES6, Pt. II: A Deep Dive into Classes ― Peleke Sengstacke

- 📜 Understand the Factory Design Pattern in Plain JavaScript — Aditya Agarwal

- 📜 Factory Functions in JavaScript — Josh Miller

- 📜 The Factory Pattern in JS ES6 — SnstsDev

- 📜 Class vs Factory function: exploring the way forward — Cristi Salcescu

- 📜 How ES6 classes really work and how to build your own — Robert Grosse

- 📜 [Understanding super in JavaScript](https://jordankasper.com/understanding-super-in-javascript)

- 📜 An Easy Guide To Understanding Classes In JavaScript

Videos

- 🎥 JavaScript Factory Functions — Programming with Mosh

- 🎥 Factory Functions in JavaScript — Fun Fun Function

- 🎥 Javascript Tutorial Function Factories — Crypto Chan

⬆ Back to Top

15. this, call, apply and bind

Reference

- 📜 call() — MDN

- 📜 bind() — MDN

- 📜 apply() — MDN

Articles

- 📜 Grokking call(), apply() and bind() methods in JavaScript — Aniket Kudale

- 📜 How-to: call() , apply() and bind() in JavaScript — Niladri Sekhar Dutta

- 📜 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](https://dev.to/ycmjason/let-me-explain-to-you-what-is-this-javascript-44ja)

- 📜 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

- 📜 Explaining JavaScript 'this' to my cat — Andrey K

- 📜 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

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

⬆ Back to Top

16. new, Constructor, instanceof and Instances

Articles

- 📜 JavaScript For Beginners: the ‘new’ operator — Brandon Morelli

- 📜 Let’s demystify JavaScript’s ‘new’ keyword — Cynthia Lee

- 📜 Constructor, operator "new" — JavaScript.Info

- 📜 Understanding JavaScript Constructors — Faraz Kelhini

- 📜 Use Constructor Functions — Openclassrooms

- 📜 [Beyond typeof and instanceof: simplifying dynamic type checks — Dr. Axel Rauschmayer](http://2ality.com/2017/08/type-right.html)

- 📜 What Is the Instanceof Operator in JavaScript — appendTo

- 📜 Function and Object, instances of each other — Kiro Risk

⬆ Back to Top

17. Prototype Inheritance and Prototype Chain

Reference

- 📜 Inheritance and the prototype chain — MDN

Articles

- 📜 Javascript : Prototype vs Class — Valentin PARSY

- 📜 JavaScript engine fundamentals: optimizing prototypes — Mathias Bynens

- 📜 JavaScript Prototype — NC Patro

- 📜 Prototype in Javascript — Sandeep Ranjan

- 📜 Prototypes in JavaScript — Rupesh Mishra

- 📜 Prototype in JavaScript: it’s quirky, but here’s how it works — Pranav Jindal

- 📜 Understanding JavaScript: Prototype and Inheritance — Alexander Kondov

- 📜 Understanding Classes (ES5) and Prototypal Inheritance in JavaScript — Hridayesh Sharma

- 📜 [prototype, proto and Prototypal inheritance in JavaScript — Varun Dey](https://dev.to/varundey/prototype-proto-and-prototypal-inheritance-in-javascript-2inl)

- 📜 Prototypal Inheritance — JavaScript.Info

- 📜 How To Work with Prototypes and Inheritance in JavaScript — Tania Rascia

- 📜 Master JavaScript Prototypes & Inheritance — Arnav Aggarwal

- 📜 JavaScript’s Prototypal Inheritance Explained Using CSS — Nash Vail

- 📜 Prototypal Inheritance in JavaScript — Jannis Redmann

- 📜 Demystifying ES6 Classes And Prototypal Inheritance ― Neo Ighodaro

- 📜 Intro To Prototypal Inheritance — Dharani Jayakanthan

- 📜 Let’s Build Prototypal Inheritance in JS — var-che

- 📜 Objects, Prototypes and Classes in JavaScript — Atta

- 📜 The magical world of JavaScript prototypes — Belén

- 📜 Understanding Prototypal Inheritance In JavaScript — Lawrence Eagles

- 📜 Objects and Prototypes in JavaScript — Irena Popova