DEV Community

Cover image for 33 JavaScript Concepts Every Developer Should Know ๐Ÿค“๏ธ๐Ÿ’ฏ๏ธ
Eluda
Eluda

Posted on • Updated on

33 JavaScript Concepts Every Developer Should Know ๐Ÿค“๏ธ๐Ÿ’ฏ๏ธ

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:

GitHub logo leonardomso / 33-js-concepts

๐Ÿ“œ 33 JavaScript concepts every developer should know.


33 Concepts Every JS Developer Should Know

33 Concepts Every JavaScript Developer Should Know

Follow me

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:

Please give the author and contributors of the 33 JS Concepts repository some love for gathering this amazing list of resources! โค๏ธ

So without further ado, letโ€™s begin!

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

Call Stack

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

Tutorials

2. Primitive Types

Primitive Types

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

Tutorials

3. Value Types and Reference Types

Value Types and Reference Types

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

Tutorials

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

Implicit, Explicit, Nominal, Structuring and Duck Typing

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

Tutorials

5. == vs === vs typeof

== vs === vs typeof

JavaScript has two visually similar, yet very different, ways to test equality. You can test equality with == or ===.
โ€”Source

Tutorials

6. Function Scope, Block Scope and Lexical Scope

Function Scope, Block Scope and Lexical Scope

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

Tutorials

7. Expression vs Statement

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

Tutorials

8. IIFE, Modules and Namespaces

IIFE, Modules and Namespaces

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

Tutorials

9. Message Queue and Event Loop

Message queue

โ€œ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

Tutorials

10. setTimeout, setInterval and requestAnimationFrame

setTimeout, setInterval and requestAnimationFrame

We may decide to execute a function not right now, but at a certain time later. Thatโ€™s called โ€œscheduling a callโ€.
โ€”Source

Tutorials

11. JavaScript Engines

JavaScript Engines

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

Tutorials

12. Bitwise Operators, Type Arrays and Array Buffers

Bitwise Operators, Type Arrays and Array Buffers

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

Tutorials

13. DOM and Layout Trees

DOM and Layout Trees

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

Tutorials

14. Factories and Classes

Factories and Classes

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

Tutorials

15. this, call, apply and bind

this, call, apply and bind

These functions are very important for every JavaScript Developer and are used in almost every JavaScript Library or Framework.
โ€”Source

Tutorials

16. new, Constructor, instanceof and Instances

new, Constructor, instanceof and Instances

Every JavaScript object has a prototype. All objects in JavaScript inherit their methods and properties from their prototypes.
โ€”Source

Tutorials

17. Prototype Inheritance and Prototype Chain

Prototype Inheritance and Prototype Chain

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

Tutorials

18. Object.create and Object.assign

Object.create and Object.assign

The Object.create method is one of the methods to create a new object in JavaScript.
โ€”Source

Tutorials

19. map, reduce, filter

map, reduce, filter

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

Tutorials

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

Pure Functions, Side Effects, State Mutation and Event Propagation

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

Tutorials

21. Closures

Closures

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

Tutorials

22. High Order Functions

High Order Functions

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

Tutorials

23. Recursion

Recursion

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

Tutorials

24. Collections and Generators

Promises

The Generator object is returned by a generator function and it conforms to both the iterable protocol and the iterator protocol.
โ€”Source

Tutorials

25. Promises

async/await

The Promise object represents the eventual completion (or failure) of an asynchronous operation and its resulting value.
โ€”Source

Tutorials

26. async/await

Data Structures

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

Tutorials

27. Data Structures

Expensive Operation and Big O Notation

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

Tutorials

28. Expensive Operation and Big O Notation

Algorithms

โ€œ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

Tutorials

29. Algorithms

Inheritance, Polymorphism and Code Reuse

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

30. Inheritance, Polymorphism and Code Reuse

Design Patterns

Class inheritance is a way for one class to extend another class, so we can create new functionality on top of the existing.
โ€”Source

Tutorials

31. Design Patterns

Partial Applications, Currying, Compose and Pipe

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

Tutorials

32. Partial Applications, Currying, Compose and Pipe

Clean Code

Function composition is a mechanism of combining multiple simple functions to build a more complicated one.
โ€”Source

Tutorials

33. Clean Code

Clean code

Writing clean, understandable, and maintainable code is a skill that is crucial for every developer to master.
โ€”Source

Tutorials


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

Top comments (16)

Collapse
 
quantumartist profile image
Shin Messiah

Very nice selection!

Collapse
 
eludadev profile image
Eluda

Thanks! ๐Ÿค—

Collapse
 
vulcanwm profile image
Medea

Nice!

Collapse
 
eludadev profile image
Eluda

โค๏ธ

Collapse
 
xiaohuoni profile image
xiaohuoni

Can I translate it into Chinese? I will indicate the original link.

Collapse
 
eludadev profile image
Eluda

yep!

Collapse
 
htho profile image
Hauke T.

A nice collection BUT.

Please carefully check your links and resources. I will dismiss any applicant that uses var or iffies without a very good reason. Articles that aim to extend knowledge should not use outdated syntax and especially not promote obsolete/legacy practices. The links regarding Design patterns are so outdated you could run them in IE6.

PLEASE don't promote legacy practices. Junior developers come here to seek best practices. These links teach ancient history.

Collapse
 
vaclav_keil profile image
Vรกclav Keil

Hi, Good point! They probably reused an old post...

Collapse
 
robsonmuniz16 profile image
Robson Muniz

Nice Selection!

Collapse
 
thangdangblog profile image
thangdangblog

Thank you for your post!

Collapse
 
kendyl93 profile image
Paweล‚

OMG! This is what I was looking for! Thank you for gathering this together!

Collapse
 
booboboston profile image
Bobo Brussels

Cool!

Collapse
 
nomishah profile image
nouman shah

Cool! :)

Collapse
 
nathannosudo profile image
Nathan Orris

Oh wow. This is pretty impressive, thanks for your hard work!

Collapse
 
saurabhdesaledev profile image
Saurabh-Dev

Thanks ๐Ÿ‘