How a lot of JavaScript do you actually suppose you recognize? You most likely know tips on how to write features, perceive easy algorithms, and might even write a category. However have you learnt what a typed array is?

You need not know all of those ideas proper now, however you’ll ultimately want them later in your profession. That’s why I like to recommend bookmarking this listing, as a result of chances are high, you’ll encounter one among these matters, and then you definitely’re gonna desire a tutorial to totally perceive it.

It’s necessary to notice that this listing was impressed from the next repository:

Please give the creator and contributors of the 33 JS Concepts repository some love for gathering this wonderful listing of assets! ❤️

So with out additional ado, let’s start!

Desk 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. Name Stack

A name stack is a mechanism for an interpreter (just like the JavaScript interpreter in a web browser) to maintain monitor of its place in a script that calls a number of features — what operate is at present being run and what features are referred to as from inside that operate, and so on.
—Source

Tutorials

• 📜 Understanding Javascript Call Stack, Event Loops — Gaurav Pandvia
• 📜 Understanding the JavaScript Call Stack — Charles Freeborn
• 📜 Javascript: What Is The Execution Context? What Is The Call Stack? — Valentino Gagliardi

2. Primitive Sorts

Every type besides objects outline immutable values (that’s, values which may’t be modified). For instance (and in contrast to in C), Strings are immutable. We check with values of those sorts as “primitive values”.
—Source

Tutorials

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

3. Worth Sorts and Reference Sorts

Variables which might be assigned a non-primitive worth are given a reference to that worth. That reference factors to the thing’s location in reminiscence. The variables don’t really comprise the worth.
—Source

Tutorials

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

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

Kind coercion implies that when the operands of an operator are differing types, one among them can be transformed to an “equal” worth of the opposite operand’s sort.
—Source

Tutorials

• 📜 What you need to know about Javascript’s Implicit Coercion — Promise Tochi
• 📜 JavaScript Type Coercion Explained — Alexey Samoshkin
• 📜 Javascript Coercion Explained — Ben Garrison

5. == vs === vs typeof

JavaScript has two visually related, but very completely different, methods to check equality. You may take a look at equality with == or ===.
—Source

Tutorials

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

6. Perform Scope, Block Scope and Lexical Scope

You will need to make this distinction as a result of expressions can act like statements, which is why we even have Expression statements. Although, on different the hand, statements can’t act like expressions.
—Source

Tutorials

• 📜 JavaScript Functions—Understanding The Basics — Brandon Morelli
• 📜 The battle between Function Scope and Block Scope — Marius Herring
• 📜 Emulating Block Scope in JavaScript — Josh Clanton

7. Expression vs Assertion

You will need to make this distinction as a result of expressions can act like statements, which is why we even have Expression statements. Although, on different the hand, statements can’t act like expressions.
—Source

Tutorials

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

8. IIFE, Modules and Namespaces

One of many usually used coding patterns with features has obtained a elaborate identify for itself: Instantly-invoked Perform Expression. Or extra dearly often known as IIFE and pronounced as “iffy.”
—Source

Tutorials

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

9. Message Queue and Occasion Loop

“How is JavaScript asynchronous and single-threaded ?” The brief reply is that JavaScript language is single-threaded and the asynchronous behaviour isn’t a part of the JavaScript language itself, slightly they’re constructed on prime of the core JavaScript language within the browser (or the programming surroundings) and accessed via the browser APIs.
—Source

Tutorials

• 📜 JavaScript Event Loop Explained — Anoop Raveendran
• 📜 The JavaScript Event Loop: Explained — Erin Sweson-Healey
• 📜 Understanding JS: The Event Loop — Alexander Kondov

10. setTimeout, setInterval and requestAnimationFrame

We might determine to execute a operate not proper now, however at a sure time later. That’s referred to as “scheduling a name”.
—Source

Tutorials

• 📜 setTimeout and setInterval — JavaScript.Info
• 📜 Why not to use setInterval — Akanksha Sharma
• 📜 setTimeout VS setInterval — Develoger

11. JavaScript Engines

Writing code for the Web typically feels slightly magical in that developers write a sequence of characters and like magic, these characters flip into concrete photos, phrases, and actions inside a browser. Understanding the expertise will help developers higher tune their craft as programmers.
—Source

Tutorials

• 📜 JavaScript Engines — Jen Looper
• 📜 Understanding How the Chrome V8 Engine Translates JavaScript into Machine Code — DroidHead
• 📜 Understanding V8’s Bytecode — Franziska Hinkelmann

12. Bitwise Operators, Kind Arrays and Array Buffers

Okay, so technically for the pc every little thing goes right down to 1s and 0s. It doesn’t function with digits or characters or strings, it makes use of solely binary digits (bits). The brief model of this rationalization is that every little thing is saved in binary kind. Then the pc makes use of encodings equivalent to UTF-8 to map the saved bit mixtures to characters, digits or completely different symbols (the ELI5 model).
—Source

Tutorials

• 📜 Programming with JS: Bitwise Operations — Alexander Kondov
• 📜 Using JavaScript’s Bitwise Operators in Real Life — ian m
• 📜 JavaScript Bitwise Operators — w3resource

13. DOM and Format Timber

The Doc Object Mannequin, normally known as the DOM, is a necessary a part of making web sites interactive. It’s an interface that enables a programming language to govern the content material, construction, and elegance of a web site. JavaScript is the client-side scripting language that connects to the DOM in an web browser.
—Source

Tutorials

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

14. Factories and Lessons

JavaScript is a prototype-based language, which means object properties and strategies may be shared via generalized objects which have the power to be cloned and prolonged. This is named prototypical inheritance and differs from class inheritance.
—Source

Tutorials

• 📜 How To Use Classes in JavaScript — Tania Rascia
• 📜 Javascript Classes — Under The Hood — Majid
• 📜 ES6 Classes — Nathaniel Foster

15. this, name, apply and bind

These features are crucial for each JavaScript Developer and are utilized in nearly each JavaScript Library or Framework.
—Source

Tutorials

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

16. new, Constructor, instanceof and Cases

Each JavaScript object has a prototype. All objects in JavaScript inherit their strategies and properties from their prototypes.
—Source

Tutorials

• 📜 JavaScript For Beginners: the ‘new’ operator — Brandon Morelli
• 📜 Let’s demystify JavaScript’s ‘new’ keyword — Cynthia Lee
• 📜 Constructor, operator “new” — JavaScript.Info

17. Prototype Inheritance and Prototype Chain

JavaScript is a bit complicated for developers skilled in class-based languages (like Java or C++), as it’s dynamic and doesn’t present a category implementation per se (the category key phrase is launched in ES2015, however is syntactical sugar, JavaScript stays prototype-based).
—Source

Tutorials

• 📜 Javascript : Prototype vs Class — Valentin PARSY
• 📜 JavaScript engine fundamentals: optimizing prototypes — Mathias Bynens
• 📜 JavaScript Prototype — NC Patro

18. Object.create and Object.assign

The Object.create technique is without doubt one of the strategies to create a brand new object in JavaScript.
—Source

Tutorials

• 📜 Object.create in JavaScript — Rupesh Mishra
• 📜 Object.create(): the New Way to Create Objects in JavaScript — Rob Gravelle
• 📜 Basic Inheritance with Object.create — Joshua Clanton

19. map, cut back, filter

Even should you don’t know what useful programming is you’ve most likely been utilizing map, filter and cut back simply because they’re so extremely helpful and make your code stink much less by permitting you to put in writing cleaner logic.
—Source

Tutorials

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

20. Pure Features, Aspect Results, State Mutation and Occasion Propagation

So a lot of our bugs are rooted in IO associated, information mutation, aspect impact bearing code. These creep up throughout our code base—from issues like accepting person inputs, receiving an surprising response through an http name, or writing to the file system. Sadly, it is a harsh actuality that we must always develop accustomed to coping with. Or is it?
—Source

Tutorials

• 📜 Javascript and Functional Programming — Pure Functions — Omer Goldberg
• 📜 Master the JavaScript Interview: What is a Pure Function? — Eric Elliott
• 📜 JavaScript: What Are Pure Functions And Why Use Them? — James Jeffery

21. Closures

A closure is the mixture of a operate bundled collectively (enclosed) with references to its surrounding state (the lexical surroundings). In different phrases, a closure offers you entry to an outer operate’s scope from an internal operate. In JavaScript, closures are created each time a operate is created, at operate creation time.
—Source

Tutorials

• 📜 I never understood JavaScript closures — Olivier De Meulder
• 📜 Understand JavaScript Closures With Ease — Richard Bovell
• 📜 Understanding JavaScript Closures — Codesmith

22. Excessive Order Features

JavaScript can settle for higher-order features. This means to deal with higher-order features, amongst different traits, makes JavaScript one of many programming languages well-suited for useful programming.
—Source

Tutorials

• 📜 Higher-Order Functions in JavaScript — M. David Green
• 📜 Higher Order Functions: Using Filter, Map and Reduce for More Maintainable Code — Guido Schmitz
• 📜 First-class and Higher Order Functions: Effective Functional JavaScript — Hugo Di Francesco

23. Recursion

Contemplate this submit as a sequence of studying workout routines. These examples are designed to make you suppose — and, if I’m doing it proper, perhaps broaden your understanding of useful programming slightly bit.
—Source

Tutorials

• 📜 Recursion in JavaScript — Kevin Ennis
• 📜 Understanding Recursion in JavaScript — Zak Frisch
• 📜 Learn and Understand Recursion in JavaScript — Brandon Morelli

24. Collections and Mills

The Generator object is returned by a generator operate and it conforms to each the iterable protocol and the iterator protocol.
—Source

Tutorials

• 📜 ES6 In Depth: Collections — Jason Orendorff
• 📜 ES6 Collections: Using Map, Set, WeakMap, WeakSet — Kyle Pennell
• 📜 ES6 WeakMaps, Sets, and WeakSets in Depth — Nicolás Bevacqua

25. Guarantees

The Promise object represents the eventual completion (or failure) of an asynchronous operation and its ensuing worth.
—Source

Tutorials

• 📜 JavaScript Promises for Dummies ― Jecelyn Yeen
• 📜 Understanding promises in JavaScript — Gokul N K
• 📜 Master the JavaScript Interview: What is a Promise? — Eric Elliott

26. async/await

There’s a particular syntax to work with guarantees in a extra snug trend, referred to as “async/await”. It’s surprisingly simple to know and use.
—Source

Tutorials

• 📜 Understanding async/await in Javascript — Gokul N K
• 📜 Exploring Async/Await Functions in JavaScript — Alligator.io
• 📜 Asynchronous Javascript using async/await — Joy Warugu

27. Knowledge Constructions

Javascript is evolving every day. With the speedy development of frameworks and platforms like React, Angular, Vue, NodeJS, Electron, React Native, it has change into fairly frequent to make use of javascript for large-scale purposes.
—Source

Tutorials

• 📜 Data Structures in JavaScript — Thon Ly
• 📜 Algorithms and Data Structures in JavaScript — Oleksii Trekhleb
• 📜 Data Structures: Objects and Arrays ― Chris Nwamba

28. Costly Operation and Massive O Notation

“What’s Massive O Notation?” that may be a quite common job interview query for developers. In brief, it’s the mathematical expression of how lengthy an algorithm takes to run relying on how lengthy is the enter, normally speaking in regards to the worst case state of affairs.
—Source

Tutorials

• 📜 Big O Notation in Javascript — César Antón Dorantes
• 📜 Time Complexity/Big O Notation — Tim Roberts
• 📜 Big O in JavaScript — Gabriela Medina

29. Algorithms

In arithmetic and pc science, an algorithm is a finite sequence of well-defined directions, usually used to unravel a category of particular issues or to carry out a computation.

Tutorials

• 📜 Data Structures and Algorithms using ES6
• 📜 Algorithms and data structures implemented in JavaScript with explanations and links to further readings
• 📜 JS: Interview Algorithm

30. Inheritance, Polymorphism and Code Reuse

Class inheritance is a manner for one class to increase one other class, so we will create new performance on prime of the present.
—Source

Tutorials

• 📜 Inheritance in JavaScript — Rupesh Mishra
• 📜 Simple Inheritance with JavaScript — David Catuhe
• 📜 JavaScript — Inheritance, delegation patterns and Object linking — NC Patro

31. Design Patterns

Each developer strives to put in writing maintainable, readable, and reusable code. Code structuring turns into extra necessary as purposes change into bigger. Design patterns show essential to fixing this problem – offering a corporation construction for frequent points in a selected circumstance.
—Source

Tutorials

• 📜 4 JavaScript Design Patterns You Should Know — Devan Patel
• 📜 JavaScript Design Patterns – Beginner’s Guide to Mobile Web Development — Soumyajit Pathak
• 📜 JavaScript Design Patterns — Akash Pal

32. Partial Functions, Currying, Compose and Pipe

Perform composition is a mechanism of mixing a number of easy features to construct a extra difficult one.
—Source

Tutorials

• 📜 Use function composition in JavaScript — Rémi
• 📜 Currying in JavaScript ES6 — Adam Bene
• 📜 Composition and Currying Elegance in JavaScript — Pragyan Das

33. Clear Code

Writing clear, comprehensible, and maintainable code is a ability that’s essential for each developer to grasp.
—Source

Tutorials

• 📜 Clean Code Explained – A Practical Introduction to Clean Coding for Beginners — freeCodeCamp
• 📜 Clean Code concepts adapted for JavaScript — Ryan McDermott
• 📜 Clean Code Practice: How to write clean code — Tirth Bodawala

---

If you happen to discovered this listing helpful, don’t neglect to bookmark it and to observe me for extra content material like this.

I’d additionally actually appreaciate it should you adopted me on Twitter @eludadev 🤗