33-js-concepts

<h1 align="center"> <br> <a href="https://github.com/leonardomso/33"><img src="https://i.imgur.com/dsHmk6H.jpg" alt="33 Concepts Every JS Developer Should Know" width=200" /></a> <br> <br> 33 Concepts Every JavaScript Developer Should Know <br><br> </h1>

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:

• اَلْعَرَبِيَّةُ‎ (Arabic) — Amr Elsekilly
• Български (Bulgarian) - thewebmasterp
• 汉语 (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
• Latviešu (Latvian) - Jānis Īvāns
• Afaan Oromoo (Oromo) - Amanuel Dagnachew
• ภาษาไทย (Thai) — Arif Waram
• Català (Catalan) — Mario Estrada
• Svenska (Swedish) — Fenix Hongell
• ខ្មែរ (Khmer) — Chrea Chanchhunneng
• አማርኛ (Ethiopian) - Miniyahil Kebede(ምንያህል ከበደ)
• Беларуская мова (Belarussian) — Dzianis Yafimau
• O'zbekcha (Uzbek) — Shokhrukh Usmonov
• Urdu (اردو) — Yasir Nawaz
• Marathi (मराठी) - Dhruv Chandak
• हिन्दी (Hindi) — Mahima Chauhan
• বাংলা (Bengali) — Jisan Mia
• ગુજરાતી (Gujarati) — Vatsal Bhuva
• سنڌي (Sindhi) — Sunny Gandhwani
• भोजपुरी (Bhojpuri) — Pronay Debnath
• ਪੰਜਾਬੀ (Punjabi) — Harsh Dev Pathak
• தமிழ் (Tamil) - Jaimin Chovatia
• Latin (Latin) — Harsh Dev Pathak
• മലയാളം (Malayalam) — Akshay Manoj
• עברית‎ (Hebrew) — Refael Yzgeav

---

<img align= center width=50px height=50px src="https://media4.giphy.com/media/3hoLIVAJYkz6T0Ichp/giphy.gif?cid=6c09b952m4j3poopinf91rquev6qy4e8avu0bflq1e0vh4gp&ep=v1_internal_gif_by_id&rid=giphy.gif&ct=s"> <a id="table-of-contents">Table of Contents</a>

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

Reference

• Call Stack — MDN

<img align= center width=40px height=40px src="https://cdn-icons-png.flaticon.com/512/1945/1945940.png"> Articles

• 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
• What is the JS Event Loop and Call Stack? — Jess Telford
• Understanding Execution Context and Execution Stack in Javascript — Sukhjinder Arora
• How JavaScript Works Under The Hood: An Overview of JavaScript Engine, Heap and, Call Stack — Bipin Rajbhar
• The JS Call stack Explained in 9 minutes - Colt Steel (YouTube)

<img align=center width="40" height="40" src="https://img.icons8.com/dusk/64/video.png" alt="video"/> Videos

• Javascript: the Call Stack explained — Coding Blocks India
• The JS Call Stack Explained In 9 Minutes — Colt Steele
• What is the Call Stack? — Eric Traub
• The Call Stack — Kevin Drumm
• Understanding JavaScript Execution — Codesmith
• The Ultimate Guide to Execution Contexts, Hoisting, Scopes, and Closures in JavaScript — Tyler McGinnis
• What the heck is the event loop anyway? — Philip Roberts
• La PILA DE EJECUCIÓN (Call Stack) de JavaScript — La Cocina del Código
• How JavaScript Code is executed? ❤️& Call Stack — Akshay Saini
• Call Stacks - CS50
• Learn the JavaScript Call Stack - codecupdev
• JavaScript Functions and the Call Stack | How does the Call stack work - Chidre'sTechTutorials

⬆ Back to Top

---

2. Primitive Types

Reference

• JavaScript data types and data structures — MDN

<img align= center width=40px height=40px src="https://cdn-icons-png.flaticon.com/512/1945/1945940.png"> Articles

• Primitive and Non-primitive data-types in JavaScript - GeeksforGeeks
• Javascript variables (Beginner thinking)
• 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
• Methods of primitives - Javascript.info

<img align=center width="40" height="40" src="https://img.icons8.com/dusk/64/video.png" alt="video"/> Videos