33 JavaScript Concepts Every Developer Should Know 🤓️💯️
Tags: javascript, beginners, webdev, codenewbie
Published: 2022-04-09 15:48:00

*How much of JavaScript do you really think you know?* You probably know how to **write functions**, understand **simple algorithms**, and can even **write a class**. But do you know what a *typed array* is? 

You don't need to know all of these concepts right now, but you will eventually need them later in your career. That’s why I recommend **bookmarking this list**, because chances are, you’ll encounter one of these topics, and then you’re gonna want a tutorial to fully understand it.

It’s important to note that this list was inspired from the following repository:

{% embed https://github.com/leonardomso/33-js-concepts %}

Please give the author and contributors of the [33 JS Concepts](https://github.com/leonardomso/33-js-concepts) repository some love for gathering this amazing list of resources! :heart:

So without further ado, let’s begin!

## Table of Contents

1. **[Call Stack](#1-call-stack)**
2. **[Primitive Types](#2-primitive-types)**
3. **[Value Types and Reference Types](#3-value-types-and-reference-types)**
4. **[Implicit, Explicit, Nominal, Structuring and Duck Typing](#4-implicit-explicit-nominal-structuring-and-duck-typing)**
5. **[== vs === vs typeof](#5--vs--vs-typeof)**
6. **[Function Scope, Block Scope and Lexical Scope](#6-function-scope-block-scope-and-lexical-scope)**
7. **[Expression vs Statement](#7-expression-vs-statement)**
8. **[IIFE, Modules and Namespaces](#8-iife-modules-and-namespaces)**
9. **[Message Queue and Event Loop](#9-message-queue-and-event-loop)**
10. **[setTimeout, setInterval and requestAnimationFrame](#10-settimeout-setinterval-and-requestanimationframe)**
11. **[JavaScript Engines](#11-javascript-engines)**
12. **[Bitwise Operators, Type Arrays and Array Buffers](#12-bitwise-operators-type-arrays-and-array-buffers)**
13. **[DOM and Layout Trees](#13-dom-and-layout-trees)**
14. **[Factories and Classes](#14-factories-and-classes)**
15. **[this, call, apply and bind](#15-this-call-apply-and-bind)**
16. **[new, Constructor, instanceof and Instances](#16-new-constructor-instanceof-and-instances)**
17. **[Prototype Inheritance and Prototype Chain](#17-prototype-inheritance-and-prototype-chain)**
18. **[Object.create and Object.assign](#18-objectcreate-and-objectassign)**
19. **[map, reduce, filter](#19-map-reduce-filter)**
20. **[Pure Functions, Side Effects, State Mutation and Event Propagation](#20-pure-functions-side-effects-state-mutation-and-event-propagation)**
21. **[Closures](#21-closures)**
22. **[High Order Functions](#22-high-order-functions)**
23. **[Recursion](#23-recursion)**
24. **[Collections and Generators](#24-collections-and-generators)**
25. **[Promises](#25-promises)**
26. **[async/await](#26-asyncawait)**
27. **[Data Structures](#27-data-structures)**
28. **[Expensive Operation and Big O Notation](#28-expensive-operation-and-big-o-notation)**
29. **[Algorithms](#29-algorithms)**
30. **[Inheritance, Polymorphism and Code Reuse](#30-inheritance-polymorphism-and-code-reuse)**
31. **[Design Patterns](#31-design-patterns)**
32. **[Partial Applications, Currying, Compose and Pipe](#32-partial-applications-currying-compose-and-pipe)**
33. **[Clean Code](#33-clean-code)**

___


## 1. Call Stack

[![Call Stack](https://i.stack.imgur.com/xAQPR.png)](https://stackoverflow.com/questions/62725430/what-is-the-different-between-stack-and-call-stack-in-javascript)

A call stack is a mechanism for an interpreter (like the JavaScript interpreter in a web browser) to keep track of its place in a script that calls multiple functions — what function is currently being run and what functions are called from within that function, etc.
—[Source](https://developer.mozilla.org/en-US/docs/Glossary/Call_stack)

### Tutorials

- 📜 [Understanding Javascript Call Stack, Event Loops — Gaurav Pandvia](https://medium.com/@gaurav.pandvia/understanding-javascript-function-executions-tasks-event-loop-call-stack-more-part-1-5683dea1f5ec)
- 📜 [Understanding the JavaScript Call Stack — Charles Freeborn](https://medium.freecodecamp.org/understanding-the-javascript-call-stack-861e41ae61d4)
- 📜 [Javascript: What Is The Execution Context? What Is The Call Stack? — Valentino Gagliardi](https://web.archive.org/web/20180701233338/https://www.valentinog.com/blog/js-execution-context-call-stack/)


## 2. Primitive Types

[![Primitive Types](https://i.stack.imgur.com/HQoAn.jpg)](https://stackoverflow.com/questions/48304498/are-wrappers-of-a-primitive-type-primitives-types-too)

All types except objects define immutable values (that is, values which can't be changed). For example (and unlike in C), Strings are immutable. We refer to values of these types as "primitive values".
—[Source](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#primitive_values)

### Tutorials

- 📜 [How numbers are encoded in JavaScript — Dr. Axel Rauschmayer](http://2ality.com/2012/04/number-encoding.html)
- 📜 [What You Need to Know About JavaScript Number Type — Max Wizard K](https://indepth.dev/posts/1139/here-is-what-you-need-to-know-about-javascripts-number-type)
- 📜 [What Every JavaScript Developer Should Know About Floating Point Numbers — Chewxy](https://blog.chewxy.com/2014/02/24/what-every-javascript-developer-should-know-about-floating-point-numbers/)


## 3. Value Types and Reference Types

[![Value Types and Reference Types](http://www.geeksblood.com/wp-content/uploads/2019/03/Difference-between-Value-Type-and-Reference-Type.png)](https://www.geeksblood.com/difference-value-type-reference-type/)

Variables that are assigned a non-primitive value are given a reference to that value. That reference points to the object’s location in memory. The variables don’t actually contain the value.
—[Source](https://codeburst.io/explaining-value-vs-reference-in-javascript-647a975e12a0)

### Tutorials

- 📜 [Explaining Value vs. Reference in Javascript — Arnav Aggarwal](https://codeburst.io/explaining-value-vs-reference-in-javascript-647a975e12a0)
- 📜 [Primitive Types & Reference Types in JavaScript — Bran van der Meer](https://gist.github.com/branneman/7fb06d8a74d7e6d4cbcf75c50fec599c)
- 📜 [Value Types, Reference Types and Scope in JavaScript — Ben Aston](https://medium.com/@benastontweet/lesson-1b-javascript-fundamentals-380f601ba851)


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

[![Implicit, Explicit, Nominal, Structuring and Duck Typing](https://miro.medium.com/max/1400/1*XL_y2zuAwvPEjH3aBbsyNw.jpeg)](https://towardsdatascience.com/all-about-typing-explicit-vs-implicit-and-static-vs-dynamic-980da4387c2f)

Type coercion means that when the operands of an operator are different types, one of them will be converted to an "equivalent" value of the other operand's type.
—[Source](https://stackoverflow.com/questions/19915688/what-exactly-is-type-coercion-in-javascript)

### Tutorials

- 📜 [What you need to know about Javascript's Implicit Coercion — Promise Tochi](https://dev.to/promhize/what-you-need-to-know-about-javascripts-implicit-coercion-e23)
- 📜 [JavaScript Type Coercion Explained — Alexey Samoshkin](https://medium.freecodecamp.org/js-type-coercion-explained-27ba3d9a2839)
- 📜 [Javascript Coercion Explained — Ben Garrison](https://hackernoon.com/javascript-coercion-explained-545c895213d3)


## 5. == vs === vs typeof

[![== vs === vs typeof](https://miro.medium.com/max/902/1*ha2o7BZYp2wQBjAb9_Sx8Q.png)](https://medium.com/@louis.shi/what-is-the-difference-between-vs-in-javascript-e38203f91591)

JavaScript has two visually similar, yet very different, ways to test equality. You can test equality with == or ===.
—[Source](https://codeburst.io/javascript-double-equals-vs-triple-equals-61d4ce5a121a)

### Tutorials

- 📜 [JavaScript Double Equals vs. Triple Equals — Brandon Morelli](https://codeburst.io/javascript-double-equals-vs-triple-equals-61d4ce5a121a)
- 📜 [Should I use === or == equality comparison operator in JavaScript? — Panu Pitkamaki](https://bytearcher.com/articles/equality-comparison-operator-javascript/)
- 📜 [== vs === JavaScript: Double Equals and Coercion — AJ Meyghani](https://www.codementor.io/javascript/tutorial/double-equals-and-coercion-in-javascript)


## 6. Function Scope, Block Scope and Lexical Scope

[![Function Scope, Block Scope and Lexical Scope](https://kbpsystem777.github.io/You-Dont-Know-JS/scope&closures/fig2.png)](https://kbpsystem777.github.io/You-Dont-Know-JS/scope&closures/ch2.html)

It is important to make this distinction because expressions can act like statements, which is why we also have Expression statements. Though, on other the hand, statements cannot act like expressions.
—[Source](https://codeburst.io/javascript-functions-understanding-the-basics-207dbf42ed99)

### Tutorials

- 📜 [JavaScript Functions—Understanding The Basics — Brandon Morelli](https://codeburst.io/javascript-functions-understanding-the-basics-207dbf42ed99)
- 📜 [The battle between Function Scope and Block Scope — Marius Herring](http://www.deadcoderising.com/2017-04-11-es6-var-let-and-const-the-battle-between-function-scope-and-block-scope/)
- 📜 [Emulating Block Scope in JavaScript — Josh Clanton](http://adripofjavascript.com/blog/drips/emulating-block-scope-in-javascript.html)


## 7. Expression vs Statement

[![Expression vs Statement](https://shoark7.github.io/assets/img/knowledge/expression_statement.png)](https://shoark7.github.io/programming/knowledge/expression-vs-statement)

It is important to make this distinction because expressions can act like statements, which is why we also have Expression statements. Though, on other the hand, statements cannot act like expressions.
—[Source](https://dev.to/promhize/javascript-in-depth-all-you-need-to-know-about-expressions-statements-and-expression-statements-5k2)

### Tutorials

- 📜 [All you need to know about Javascript's Expressions, Statements and Expression Statements — Promise Tochi](https://dev.to/promhize/javascript-in-depth-all-you-need-to-know-about-expressions-statements-and-expression-statements-5k2)
- 📜 [Function Expressions vs Function Declarations — Paul Wilkins](https://www.sitepoint.com/function-expressions-vs-declarations/)
- 📜 [JavaScript Function — Declaration vs Expression — Ravi Roshan](https://medium.com/@raviroshan.talk/javascript-function-declaration-vs-expression-f5873b8c7b38)


## 8. IIFE, Modules and Namespaces

[![IIFE, Modules and Namespaces](https://miro.medium.com/max/1400/1*e5cYX0uiWn9rhEhmHp90Ag.png)](https://njkhanh.com/stop-using-immediately-invoked-function-expressions-in-javascript-p5f34323030)

One of the often used coding patterns with functions has got a fancy name for itself: Immediately-invoked Function Expression. Or more dearly known as IIFE and pronounced as “iffy.”
—[Source](https://vvkchandra.medium.com/essential-javascript-mastering-immediately-invoked-function-expressions-67791338ddc6)

### Tutorials

- 📜 [Mastering Immediately-Invoked Function Expressions ― Chandra Gundamaraju](https://medium.com/@vvkchandra/essential-javascript-mastering-immediately-invoked-function-expressions-67791338ddc6)
- 📜 [Do ES6 Modules make the case of IIFEs obsolete?](https://hashnode.com/post/do-es6-modules-make-the-case-of-iifes-obsolete-civ96wet80scqgc538un20es0)
- 📜 [A 10 minute primer to JavaScript modules, module formats, module loaders and module bundlers ― Jurgen Van de Moere](https://www.jvandemo.com/a-10-minute-primer-to-javascript-modules-module-formats-module-loaders-and-module-bundlers/)


## 9. Message Queue and Event Loop

[![Message queue](https://miro.medium.com/max/1400/1*iHhUyO4DliDwa6x_cO5E3A.gif)](https://medium.com/@Rahulx1/understanding-event-loop-call-stack-event-job-queue-in-javascript-63dcd2c71ecd)

“How is JavaScript asynchronous and single-threaded ?” The short answer is that JavaScript language is single-threaded and the asynchronous behaviour is not part of the JavaScript language itself, rather they are built on top of the core JavaScript language in the browser (or the programming environment) and accessed through the browser APIs.
—[Source](https://medium.com/front-end-weekly/javascript-event-loop-explained-4cd26af121d4)

### Tutorials

- 📜 [JavaScript Event Loop Explained — Anoop Raveendran](https://medium.com/front-end-hacking/javascript-event-loop-explained-4cd26af121d4)
- 📜 [The JavaScript Event Loop: Explained — Erin Sweson-Healey](https://blog.carbonfive.com/2013/10/27/the-javascript-event-loop-explained/)
- 📜 [Understanding JS: The Event Loop — Alexander Kondov](https://hackernoon.com/understanding-js-the-event-loop-959beae3ac40)


## 10. setTimeout, setInterval and requestAnimationFrame

[![setTimeout, setInterval and requestAnimationFrame](https://res.cloudinary.com/practicaldev/image/fetch/s--0kaxZSQI--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://images.velog.io/images/gtfo/post/3014df40-233f-4bb4-89ff-ef44e670a956/image.png)](https://dev.to/moyedx3/10-settimeout-setinterval-and-requestanimationframe-1io4)

We may decide to execute a function not right now, but at a certain time later. That’s called “scheduling a call”.
—[Source](https://javascript.info/settimeout-setinterval)

### Tutorials

- 📜 [setTimeout and setInterval — JavaScript.Info](https://javascript.info/settimeout-setinterval)
- 📜 [Why not to use setInterval — Akanksha Sharma](https://dev.to/akanksha_9560/why-not-to-use-setinterval--2na9)
- 📜 [setTimeout VS setInterval — Develoger](https://develoger.com/settimeout-vs-setinterval-cff85142555b)


## 11. JavaScript Engines

[![JavaScript Engines](https://assets.digitalocean.com/articles/alligator/js/v8-engine/javascript_journey.png)](https://www.digitalocean.com/community/tutorials/js-v8-engine)

Writing code for the Web sometimes feels a little magical in that developers write a sequence of characters and like magic, those characters turn into concrete images, words, and actions within a browser. Understanding the technology can help developers better tune their craft as programmers.
—[Source](http://www.softwaremag.com/javascript-engines/)

### Tutorials

- 📜 [JavaScript Engines — Jen Looper](http://www.softwaremag.com/javascript-engines/)
- 📜 [Understanding How the Chrome V8 Engine Translates JavaScript into Machine Code — DroidHead](https://medium.freecodecamp.org/understanding-the-core-of-nodejs-the-powerful-chrome-v8-engine-79e7eb8af964)
- 📜 [Understanding V8’s Bytecode — Franziska Hinkelmann](https://medium.com/dailyjs/understanding-v8s-bytecode-317d46c94775)


## 12. Bitwise Operators, Type Arrays and Array Buffers

[![Bitwise Operators, Type Arrays and Array Buffers](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays/typed_arrays.png)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays)

Okay, so technically for the computer everything goes down to 1s and 0s. It does not operate with digits or characters or strings, it uses only binary digits (bits). The short version of this explanation is that everything is stored in binary form. Then the computer uses encodings such as UTF-8 to map the saved bit combinations to characters, digits or different symbols (the ELI5 version).
—[Source](https://hackernoon.com/programming-with-js-bitwise-operations-393eb0745dc4)

### Tutorials

- 📜 [Programming with JS: Bitwise Operations — Alexander Kondov](https://hackernoon.com/programming-with-js-bitwise-operations-393eb0745dc4)
- 📜 [Using JavaScript’s Bitwise Operators in Real Life — ian m](https://codeburst.io/using-javascript-bitwise-operators-in-real-life-f551a731ff5)
- 📜 [JavaScript Bitwise Operators — w3resource](https://www.w3resource.com/javascript/operators/bitwise-operator.php)


## 13. DOM and Layout Trees

[![DOM and Layout Trees](https://i.stack.imgur.com/6rUqB.jpg)](https://itqna.net/questions/711/does-order-css-styles-influence-render-tree)

The Document Object Model, usually referred to as the DOM, is an essential part of making websites interactive. It is an interface that allows a programming language to manipulate the content, structure, and style of a website. JavaScript is the client-side scripting language that connects to the DOM in an internet browser.
—[Source](https://www.digitalocean.com/community/tutorials/introduction-to-the-dom)

### Tutorials

- 📜 [How To Understand and Modify the DOM in JavaScript — Tania Rascia](https://www.digitalocean.com/community/tutorials/introduction-to-the-dom)
- 📜 [What’s the Document Object Model, and why you should know how to use it — Leonardo Maldonado](https://medium.freecodecamp.org/whats-the-document-object-model-and-why-you-should-know-how-to-use-it-1a2d0bc5429d)
- 📜 [JavaScript DOM Tutorial with Example — Guru99](https://www.guru99.com/how-to-use-dom-and-events-in-javascript.html)


## 14. Factories and Classes

[![Factories and Classes](https://miro.medium.com/max/1400/1*tFUXCLA8ClAzsPgZXGGR9A.png)](https://medium.com/javascript-scene/javascript-factory-functions-with-es6-4d224591a8b1)

JavaScript is a prototype-based language, meaning object properties and methods can be shared through generalized objects that have the ability to be cloned and extended. This is known as prototypical inheritance and differs from class inheritance.
—[Source](https://www.digitalocean.com/community/tutorials/understanding-prototypes-and-inheritance-in-javascript)

### Tutorials

- 📜 [How To Use Classes in JavaScript — Tania Rascia](https://www.digitalocean.com/community/tutorials/understanding-classes-in-javascript)
- 📜 [Javascript Classes — Under The Hood — Majid](https://medium.com/tech-tajawal/javascript-classes-under-the-hood-6b26d2667677)
- 📜 [ES6 Classes — Nathaniel Foster](https://www.javascriptjanuary.com/blog/es6-classes)


## 15. this, call, apply and bind

[![this, call, apply and bind](https://miro.medium.com/max/1400/1*7Kt397qVGkLwjfFp0u91og.png)](https://hdsatija.medium.com/difference-between-call-apply-and-bind-method-in-javascript-e98a7abc70e0)

These functions are very important for every JavaScript Developer and are used in almost every JavaScript Library or Framework.
—[Source](https://levelup.gitconnected.com/grokking-call-apply-and-bind-methods-in-javascript-392351a4be8b)

### Tutorials

- 📜 [Grokking call(), apply() and bind() methods in JavaScript — Aniket Kudale](https://levelup.gitconnected.com/grokking-call-apply-and-bind-methods-in-javascript-392351a4be8b)
- 📜 [How-to: call() , apply() and bind() in JavaScript — Niladri Sekhar Dutta](https://www.codementor.io/niladrisekhardutta/how-to-call-apply-and-bind-in-javascript-8i1jca6jp)
- 📜 [JavaScript’s Apply, Call, and Bind Methods are Essential for JavaScript Professionals — Richard Bovell](http://javascriptissexy.com/javascript-apply-call-and-bind-methods-are-essential-for-javascript-professionals/)


## 16. new, Constructor, instanceof and Instances

[![new, Constructor, instanceof and Instances](https://i.stack.imgur.com/GXzzK.png)](https://stackoverflow.com/questions/35537995/instanceof-check-works-on-subclass-without-setting-constructor)

Every JavaScript object has a prototype. All objects in JavaScript inherit their methods and properties from their prototypes.
—[Source](https://codeburst.io/javascript-for-beginners-the-new-operator-cee35beb669e)

### Tutorials

- 📜 [JavaScript For Beginners: the ‘new’ operator — Brandon Morelli](https://codeburst.io/javascript-for-beginners-the-new-operator-cee35beb669e)
- 📜 [Let’s demystify JavaScript’s ‘new’ keyword — Cynthia Lee](https://medium.freecodecamp.org/demystifying-javascripts-new-keyword-874df126184c)
- 📜 [Constructor, operator "new" — JavaScript.Info](https://javascript.info/constructor-new)


## 17. Prototype Inheritance and Prototype Chain

[![Prototype Inheritance and Prototype Chain](https://banisd.files.wordpress.com/2014/01/protochain1-e1389963022801.png)](https://dimosbanis.net/software-thoughts/object-oriented-javascript-the-prototype-chain-and-inheritance/)

JavaScript is a bit confusing for developers experienced in class-based languages (like Java or C++), as it is dynamic and does not provide a class implementation per se (the class keyword is introduced in ES2015, but is syntactical sugar, JavaScript remains prototype-based).
—[Source](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain)

### Tutorials

- 📜 [Javascript : Prototype vs Class — Valentin PARSY](https://medium.com/@parsyval/javascript-prototype-vs-class-a7015d5473b)
- 📜 [JavaScript engine fundamentals: optimizing prototypes — Mathias Bynens](https://mathiasbynens.be/notes/prototypes)
- 📜 [JavaScript Prototype — NC Patro](https://codeburst.io/javascript-prototype-cb29d82b8809)


## 18. Object.create and Object.assign

[![Object.create and Object.assign](https://miro.medium.com/max/1200/1*qRY5PRvT9a8yQ-lWYWau8g.png)](https://medium.com/@danacc/object-create-vs-object-assign-a14bfef43df9)

The Object.create method is one of the methods to create a new object in JavaScript.
—[Source](https://medium.com/@happymishra66/object-create-in-javascript-fa8674df6ed2)

### Tutorials

- 📜 [Object.create in JavaScript — Rupesh Mishra](https://medium.com/@happymishra66/object-create-in-javascript-fa8674df6ed2)
- 📜 [Object.create(): the New Way to Create Objects in JavaScript — Rob Gravelle](https://www.htmlgoodies.com/beyond/javascript/object.create-the-new-way-to-create-objects-in-javascript.html)
- 📜 [Basic Inheritance with Object.create — Joshua Clanton](http://adripofjavascript.com/blog/drips/basic-inheritance-with-object-create.html)


## 19. map, reduce, filter

[![map, reduce, filter](https://www.wenovio.com/wp-content/uploads/2017/04/blogue-javascript-banner-2021.jpg)](https://www.wenovio.com/2017/04/11/javascript-manipuler-vos-donnees-map-filter-reduce/)

Even if you don’t know what functional programming is you’ve probably been using map, filter and reduce just because they’re so incredibly useful and make your code stink less by allowing you to write cleaner logic.
—[Source](https://medium.com/@bojangbusiness/javascript-functional-programming-map-filter-and-reduce-846ff9ba492d)

### Tutorials

- 📜 [JavaScript Functional Programming — map, filter and reduce — Bojan Gvozderac](https://medium.com/jsguru/javascript-functional-programming-map-filter-and-reduce-846ff9ba492d)
- 📜 [Learn map, filter and reduce in Javascript — João Miguel Cunha](https://medium.com/@joomiguelcunha/learn-map-filter-and-reduce-in-javascript-ea59009593c4)
- 📜 [JavaScript’s Map, Reduce, and Filter — Dan Martensen](https://danmartensen.svbtle.com/javascripts-map-reduce-and-filter)


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

[![Pure Functions, Side Effects, State Mutation and Event Propagation](https://sarav.co/images/pure.jpg)](https://sarav.co/pure-functions-in-javascript)

So many of our bugs are rooted in IO related, data mutation, side effect bearing code. These creep up all over our code base—from things like accepting user inputs, receiving an unexpected response via an http call, or writing to the file system. Unfortunately, this is a harsh reality that we should grow accustomed to dealing with. Or is it?
—[Source](https://hackernoon.com/javascript-and-functional-programming-pt-3-pure-functions-d572bb52e21c)

### Tutorials

- 📜 [Javascript and Functional Programming — Pure Functions — Omer Goldberg](https://hackernoon.com/javascript-and-functional-programming-pt-3-pure-functions-d572bb52e21c)
- 📜 [Master the JavaScript Interview: What is a Pure Function? — Eric Elliott](https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-pure-function-d1c076bec976)
- 📜 [JavaScript: What Are Pure Functions And Why Use Them? — James Jeffery](https://medium.com/@jamesjefferyuk/javascript-what-are-pure-functions-4d4d5392d49c)


## 21. Closures

[![Closures](https://www.freecodecamp.org/news/content/images/2020/05/image-147.png)](https://www.freecodecamp.org/news/lets-learn-javascript-closures-66feb44f6a44/)

A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function's scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time.
—[Source](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures)

### Tutorials

- 📜 [I never understood JavaScript closures — Olivier De Meulder](https://medium.com/dailyjs/i-never-understood-javascript-closures-9663703368e8)
- 📜 [Understand JavaScript Closures With Ease — Richard Bovell](http://javascriptissexy.com/understand-javascript-closures-with-ease/)
- 📜 [Understanding JavaScript Closures — Codesmith](https://codeburst.io/understanding-javascript-closures-da6aab330302)


## 22. High Order Functions

[![High Order Functions](https://miro.medium.com/max/1400/1*ZByQU6B-Hu3FsyFbBfoTBg.png)](https://medium.com/@aquilhussain15/demystifying-higher-order-functions-in-javascript-5fc37b649048)

JavaScript can accept higher-order functions. This ability to handle higher-order functions, among other characteristics, makes JavaScript one of the programming languages well-suited for functional programming.
—[Source](https://www.sitepoint.com/higher-order-functions-javascript/)

### Tutorials

- 📜 [Higher-Order Functions in JavaScript — M. David Green](https://www.sitepoint.com/higher-order-functions-javascript/)
- 📜 [Higher Order Functions: Using Filter, Map and Reduce for More Maintainable Code — Guido Schmitz](https://medium.freecodecamp.org/higher-order-functions-in-javascript-d9101f9cf528)
- 📜 [First-class and Higher Order Functions: Effective Functional JavaScript — Hugo Di Francesco](https://hackernoon.com/effective-functional-javascript-first-class-and-higher-order-functions-713fde8df50a)


## 23. Recursion

![Recursion](https://www.ericjanto.com/static/493fccdf0f977e98eaa005aacab2124f/00d43/recursion-xkcd.png)

Consider this post as a series of learning exercises. These examples are designed to make you think — and, if I’m doing it right, maybe expand your understanding of functional programming a little bit.
—[Source](https://www.freecodecamp.org/news/recursion-in-javascript-1608032c7a1f)

### Tutorials

- 📜 [Recursion in JavaScript — Kevin Ennis](https://medium.freecodecamp.org/recursion-in-javascript-1608032c7a1f)
- 📜 [Understanding Recursion in JavaScript — Zak Frisch](https://medium.com/@zfrisch/understanding-recursion-in-javascript-992e96449e03)
- 📜 [Learn and Understand Recursion in JavaScript — Brandon Morelli](https://codeburst.io/learn-and-understand-recursion-in-javascript-b588218e87ea)


## 24. Collections and Generators

[![Promises](https://miro.medium.com/max/1400/1*Rj8PuubSvLyLe4dL-Ke8Pg.png)](https://betterprogramming.pub/how-to-transform-javascript-functions-into-memory-efficient-generators-e402af77cdc4)

The Generator object is returned by a generator function and it conforms to both the iterable protocol and the iterator protocol.
—[Source](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Generator)

### Tutorials

- 📜 [ES6 In Depth: Collections — Jason Orendorff](https://hacks.mozilla.org/2015/06/es6-in-depth-collections/)
- 📜 [ES6 Collections: Using Map, Set, WeakMap, WeakSet — Kyle Pennell](https://www.sitepoint.com/es6-collections-map-set-weakmap-weakset/)
- 📜 [ES6 WeakMaps, Sets, and WeakSets in Depth — Nicolás Bevacqua](https://ponyfoo.com/articles/es6-weakmaps-sets-and-weaksets-in-depth)


## 25. Promises

[![async/await](https://linuxhint.com/wp-content/uploads/2021/09/image1-15.png)](https://linuxhint.com/wp-content/uploads/2021/09/image1-15.png)

The Promise object represents the eventual completion (or failure) of an asynchronous operation and its resulting value.
—[Source](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)

### Tutorials

- 📜 [JavaScript Promises for Dummies ― Jecelyn Yeen](https://scotch.io/tutorials/javascript-promises-for-dummies)
- 📜 [Understanding promises in JavaScript — Gokul N K](https://hackernoon.com/understanding-promises-in-javascript-13d99df067c1)
- 📜 [Master the JavaScript Interview: What is a Promise? — Eric Elliott](https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-promise-27fc71e77261)


## 26. async/await

[![Data Structures](https://benestudio.co/wp-content/uploads/2021/02/image-10-1024x429.png)](https://benestudio.co/async-await-vs-coroutines-vs-promises-vs-callbacks/)

There’s a special syntax to work with promises in a more comfortable fashion, called “async/await”. It’s surprisingly easy to understand and use.
—[Source](https://javascript.info/async-await)

### Tutorials

- 📜 [Understanding async/await in Javascript — Gokul N K](https://hackernoon.com/understanding-async-await-in-javascript-1d81bb079b2c)
- 📜 [Exploring Async/Await Functions in JavaScript — Alligator.io](https://alligator.io/js/async-functions/)
- 📜 [Asynchronous Javascript using async/await — Joy Warugu](https://scotch.io/tutorials/asynchronous-javascript-using-async-await)


## 27. Data Structures

[![Expensive Operation and Big O Notation](https://res.cloudinary.com/practicaldev/image/fetch/s--SuC2Con8--/c_imagga_scale,f_auto,fl_progressive,h_500,q_auto,w_1000/https://res.cloudinary.com/dbvcampra/image/upload/v1588403699/Webp.net-resizeimage_5_beudao.jpg)](https://dev.to/adavidoaiei/fundamental-data-structures-and-algorithms-in-c-4ocf)

Javascript is evolving each day. With the rapid growth of frameworks and platforms like React, Angular, Vue, NodeJS, Electron, React Native, it has become quite common to use javascript for large-scale applications.
—[Source](https://blog.cloudboost.io/playing-with-data-structures-in-javascript-stack-a55ebe50f29d)

### Tutorials

- 📜 [Data Structures in JavaScript — Thon Ly](https://medium.com/siliconwat/data-structures-in-javascript-1b9aed0ea17c)
- 📜 [Algorithms and Data Structures in JavaScript — Oleksii Trekhleb](https://itnext.io/algorithms-and-data-structures-in-javascript-a71548f902cb)
- 📜 [Data Structures: Objects and Arrays ― Chris Nwamba](https://scotch.io/courses/10-need-to-know-javascript-concepts/data-structures-objects-and-arrays)


## 28. Expensive Operation and Big O Notation

[![Algorithms](https://coderzpy.com/wp-content/uploads/2020/08/WcBRI.png)](https://coderzpy.com/understand-big-o-notation-complexity-of-algorithm/amp/)

“What is Big O Notation?” that is a very common job interview question for developers. In short, it is the mathematical expression of how long an algorithm takes to run depending on how long is the input, usually talking about the worst case scenario.
—[Source](https://medium.com/cesars-tech-insights/big-o-notation-javascript-25c79f50b19b)

### Tutorials

- 📜 [Big O Notation in Javascript — César Antón Dorantes](https://medium.com/cesars-tech-insights/big-o-notation-javascript-25c79f50b19b)
- 📜 [Time Complexity/Big O Notation — Tim Roberts](https://medium.com/javascript-scene/time-complexity-big-o-notation-1a4310c3ee4b)
- 📜 [Big O in JavaScript — Gabriela Medina](https://medium.com/@gmedina229/big-o-in-javascript-36ff67766051)

## 29. Algorithms

[![Inheritance, Polymorphism and Code Reuse](https://www.klipfolio.com/gatsby-files/static/fd30d98bb5f73cdf97d36191c1a847b9/1a2ad/algorithm.jpg)](https://www.klipfolio.com/blog/algorithm-in-six-steps)

In mathematics and computer science, an algorithm is a finite sequence of well-defined instructions, typically used to solve a class of specific problems or to perform a computation.

### Tutorials

- 📜 [Data Structures and Algorithms using ES6](https://github.com/Crizstian/data-structure-and-algorithms-with-ES6)
- 📜 [Algorithms and data structures implemented in JavaScript with explanations and links to further readings](https://github.com/trekhleb/javascript-algorithms)
- 📜 [JS: Interview Algorithm](http://www.thatjsdude.com/interview/js1.html)

## 30. Inheritance, Polymorphism and Code Reuse

[![Design Patterns](https://assets-global.website-files.com/5c7536fc6fa90e7dbc27598f/5d835050b8a4ae46ae21db55_iDBM6BiFNPfRIVg23RghgoA9gLE-vr-evVlTF8_3S_co-Zl1h8ooTP-K0IYoszs7HbMngu2Puvrrkr1IDMa0QWA9QNKe9xbkkFlvYblhnGDkERUMKx24JTAqkMEaGxy2WHtbeG-oW-XI00Vx5w.png)](https://www.nerd.vision/post/polymorphism-encapsulation-data-abstraction-and-inheritance-in-object-oriented-programming)

Class inheritance is a way for one class to extend another class, so we can create new functionality on top of the existing.
—[Source](https://javascript.info/class-inheritance)

### Tutorials

- 📜 [Inheritance in JavaScript — Rupesh Mishra](https://hackernoon.com/inheritance-in-javascript-21d2b82ffa6f)
- 📜 [Simple Inheritance with JavaScript — David Catuhe](https://www.sitepoint.com/simple-inheritance-javascript/)
- 📜 [JavaScript — Inheritance, delegation patterns and Object linking — NC Patro](https://codeburst.io/javascript-inheritance-25fe61ab9f85)

## 31. Design Patterns

[![Partial Applications, Currying, Compose and Pipe](https://miro.medium.com/max/1400/1*3dM6QlhuH5EYqgFZ3Cyedw.jpeg)](https://shivamethical.medium.com/design-patterns-in-javascript-node-2020-96c19e157428)

Every developer strives to write maintainable, readable, and reusable code. Code structuring becomes more important as applications become larger. Design patterns prove crucial to solving this challenge - providing an organization structure for common issues in a particular circumstance.
—[Source](https://www.digitalocean.com/community/tutorial_series/javascript-design-patterns)

### Tutorials

- 📜 [4 JavaScript Design Patterns You Should Know — Devan Patel](https://scotch.io/bar-talk/4-javascript-design-patterns-you-should-know)
- 📜 [JavaScript Design Patterns – Beginner's Guide to Mobile Web Development — Soumyajit Pathak](https://medium.com/beginners-guide-to-mobile-web-development/javascript-design-patterns-25f0faaaa15)
- 📜 [JavaScript Design Patterns — Akash Pal](https://medium.com/front-end-hacking/javascript-design-patterns-ed9d4c144c81)

## 32. Partial Applications, Currying, Compose and Pipe

[![Clean Code](https://stackify.com/wp-content/uploads/2021/08/CODEPIC2.png)](https://stackify.com/javascript-currying-vs-partial-application/)

Function composition is a mechanism of combining multiple simple functions to build a more complicated one. 
—[Source](https://www.codementor.io/@michelre/use-function-composition-in-javascript-gkmxos5mj)

### Tutorials

- 📜 [Use function composition in JavaScript — Rémi](https://www.codementor.io/michelre/use-function-composition-in-javascript-gkmxos5mj)
- 📜 [Currying in JavaScript ES6 — Adam Bene](https://blog.benestudio.co/currying-in-javascript-es6-540d2ad09400)
- 📜 [Composition and Currying Elegance in JavaScript — Pragyan Das](https://medium.com/@pragyan88/writing-middleware-composition-and-currying-elegance-in-javascript-8b15c98a541b)

## 33. Clean Code

[![Clean code](https://miro.medium.com/max/1360/0*94qmFhBmEhULXwhg)](https://morioh.com/p/15168be0e438)

Writing clean, understandable, and maintainable code is a skill that is crucial for every developer to master.
—[Source](https://www.freecodecamp.org/news/clean-coding-for-beginners/)

### Tutorials

- 📜 [Clean Code Explained – A Practical Introduction to Clean Coding for Beginners — freeCodeCamp](https://www.freecodecamp.org/news/clean-coding-for-beginners/)
- 📜 [Clean Code concepts adapted for JavaScript — Ryan McDermott](https://github.com/ryanmcdermott/clean-code-javascript)
- 📜 [Clean Code Practice: How to write clean code — Tirth Bodawala](https://www.atyantik.com/clean-code-practices-javascript/)

___

If you found this list useful, don’t forget to **bookmark it** and to **follow me** for more content like this.

{% user eludadev %}

{% twitter https://twitter.com/eludadev/status/1526989502199234567?s=20&t=WffWc4GscHmkIXu1n0BcXw %}