Convert Figma logo to code with AI

leonardomso logo33-js-concepts

📜 33 JavaScript concepts every developer should know.

63,495
8,882
63,495
61

Top Related Projects

A long list of (advanced) JavaScript questions, and their explanations :sparkles:

:bathtub: Clean Code concepts adapted for JavaScript

📝 Algorithms and data structures implemented in JavaScript with explanations and links to further readings

A book series on JavaScript. @YDKJS on twitter.

144,559

JavaScript Style Guide

⚡️ Front End interview preparation materials for busy engineers

Quick Overview

The "33-js-concepts" repository is a curated collection of 33 core JavaScript concepts that every JavaScript developer should understand. It serves as a comprehensive guide and reference for both beginners and experienced developers, covering fundamental topics to advanced concepts in JavaScript programming.

Pros

  • Comprehensive coverage of essential JavaScript concepts
  • Well-organized with links to articles, videos, and resources for each topic
  • Regularly updated with community contributions
  • Free and open-source, accessible to all developers

Cons

  • May be overwhelming for absolute beginners due to the breadth of topics
  • Some linked resources may become outdated over time
  • Lacks interactive coding exercises or quizzes for hands-on practice
  • Primarily in English, which may limit accessibility for non-English speakers

Code Examples

This repository is not a code library but a collection of resources and explanations. Therefore, there are no specific code examples to showcase. However, the repository covers various JavaScript concepts, including code snippets and explanations within the linked resources.

Getting Started

As this is not a code library, there's no installation or setup required. To get started with the "33-js-concepts" repository:

  1. Visit the GitHub repository: https://github.com/leonardomso/33-js-concepts
  2. Browse through the list of 33 concepts in the README.md file
  3. Click on any concept to access a curated list of articles, videos, and resources related to that topic
  4. Start learning and exploring the concepts that interest you or that you want to improve upon

Remember to star the repository if you find it helpful, and consider contributing by suggesting new resources or improvements to existing content.

Competitor Comparisons

A long list of (advanced) JavaScript questions, and their explanations :sparkles:

Pros of javascript-questions

  • Focuses on practical, interview-style questions with detailed explanations
  • Covers a wide range of JavaScript topics in a quiz format
  • Regularly updated with new questions and community contributions

Cons of javascript-questions

  • Less structured approach to learning JavaScript concepts
  • May not cover some advanced topics as comprehensively
  • Quiz format might not suit all learning styles

Code Comparison

33-js-concepts:

const person = {
  name: 'John',
  age: 30,
  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

javascript-questions:

let a = 3;
let b = new Number(3);
let c = 3;

console.log(a == b);
console.log(a === b);
console.log(b === c);

The 33-js-concepts example demonstrates object creation and methods, while javascript-questions focuses on tricky comparisons and type coercion.

Both repositories are valuable resources for JavaScript learners, but they serve different purposes. 33-js-concepts provides a structured curriculum for understanding core JavaScript concepts, while javascript-questions offers a collection of challenging questions to test and deepen your knowledge. The choice between them depends on your learning style and goals.

:bathtub: Clean Code concepts adapted for JavaScript

Pros of clean-code-javascript

  • Focuses on practical coding principles and best practices
  • Provides concrete examples for each concept
  • Covers a wide range of topics related to writing clean, maintainable JavaScript code

Cons of clean-code-javascript

  • Less comprehensive coverage of core JavaScript concepts
  • May be more opinionated in its approach to coding style
  • Lacks in-depth explanations of underlying JavaScript mechanisms

Code Comparison

33-js-concepts example (Closures):

function outer() {
  const x = 10;
  function inner() {
    console.log(x);
  }
  return inner;
}

clean-code-javascript example (Function arguments):

function createMenu(title, body, buttonText, cancellable) {
  // ...
}

function createMenu({ title, body, buttonText, cancellable }) {
  // ...
}

The 33-js-concepts repository focuses on explaining core JavaScript concepts, while clean-code-javascript emphasizes practical coding guidelines. 33-js-concepts provides a more comprehensive overview of JavaScript fundamentals, making it suitable for beginners and those looking to deepen their understanding of the language. On the other hand, clean-code-javascript offers valuable insights into writing clean, maintainable code, making it an excellent resource for developers looking to improve their coding practices.

Both repositories complement each other well, with 33-js-concepts providing a strong foundation in JavaScript concepts and clean-code-javascript offering practical advice for writing better code.

📝 Algorithms and data structures implemented in JavaScript with explanations and links to further readings

Pros of javascript-algorithms

  • Comprehensive collection of algorithms and data structures implemented in JavaScript
  • Includes detailed explanations and complexity analysis for each algorithm
  • Provides practical examples and use cases for various algorithms

Cons of javascript-algorithms

  • Focuses primarily on algorithms and data structures, lacking broader JavaScript concepts
  • May be overwhelming for beginners due to its extensive content
  • Less emphasis on JavaScript-specific features and best practices

Code Comparison

33-js-concepts:

// Example of closures
function outer() {
  let count = 0;
  return function inner() {
    return count++;
  };
}

javascript-algorithms:

// Example of binary search algorithm
function binarySearch(array, target) {
  let left = 0;
  let right = array.length - 1;
  while (left <= right) {
    // ... implementation details
  }
}

Summary

javascript-algorithms offers a deep dive into algorithms and data structures, making it ideal for those focusing on computer science fundamentals and interview preparation. 33-js-concepts, on the other hand, provides a broader overview of JavaScript concepts, making it more suitable for general JavaScript learning and development. While javascript-algorithms excels in algorithmic content, 33-js-concepts offers a more rounded approach to JavaScript as a language and ecosystem.

A book series on JavaScript. @YDKJS on twitter.

Pros of You-Dont-Know-JS

  • More comprehensive and in-depth coverage of JavaScript concepts
  • Structured as a book series, providing a cohesive learning experience
  • Regularly updated to reflect the latest JavaScript standards and best practices

Cons of You-Dont-Know-JS

  • Can be overwhelming for beginners due to its depth and complexity
  • Requires a significant time investment to read through all the content
  • Less focused on practical, quick-reference examples compared to 33-js-concepts

Code Comparison

33-js-concepts example (Closures):

function outer() {
  let count = 0;
  return function inner() {
    return count++;
  };
}

You-Dont-Know-JS example (Closures):

function makeAdder(x) {
  return function(y) {
    return x + y;
  };
}
var add5 = makeAdder(5);
console.log(add5(2)); // 7

Both repositories aim to teach JavaScript concepts, but they differ in their approach. 33-js-concepts provides a concise overview of key topics with practical examples, making it suitable for quick reference and beginners. You-Dont-Know-JS offers a more comprehensive and in-depth exploration of JavaScript, making it ideal for developers seeking a deeper understanding of the language's intricacies. The choice between the two depends on the learner's goals, experience level, and available time for study.

144,559

JavaScript Style Guide

Pros of JavaScript Style Guide

  • Comprehensive coding style guide with detailed explanations
  • Widely adopted in the industry, making it a valuable standard
  • Regularly updated and maintained by the Airbnb team

Cons of JavaScript Style Guide

  • Focuses primarily on coding style rather than JavaScript concepts
  • May be overwhelming for beginners due to its extensive rules
  • Less emphasis on explaining core JavaScript principles

Code Comparison

33-js-concepts:

// Example of closures
function outer() {
  let count = 0;
  return function inner() {
    return count++;
  };
}

JavaScript Style Guide:

// Example of arrow function syntax
[1, 2, 3].map((x) => {
  const y = x + 1;
  return x * y;
});

Summary

33-js-concepts provides a curated list of essential JavaScript concepts with explanations and resources, making it ideal for learning and understanding core JavaScript principles. It's particularly useful for beginners and those looking to deepen their JavaScript knowledge.

JavaScript Style Guide offers a comprehensive set of coding conventions and best practices for writing JavaScript code. It's more suitable for experienced developers and teams looking to maintain consistent code style across projects.

Both repositories serve different purposes and can be complementary in a developer's journey. 33-js-concepts is better for learning concepts, while JavaScript Style Guide is more focused on code style and best practices.

⚡️ Front End interview preparation materials for busy engineers

Pros of front-end-interview-handbook

  • Broader coverage of front-end topics, including HTML, CSS, and JavaScript
  • More practical focus on interview preparation and common questions
  • Regularly updated with contributions from the community

Cons of front-end-interview-handbook

  • Less in-depth coverage of core JavaScript concepts
  • May not provide as much theoretical background for advanced topics

Code Comparison

front-end-interview-handbook:

function debounce(func, wait) {
  let timeout;
  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout);
      func(...args);
    };
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
}

33-js-concepts:

const person = {
  name: 'John Doe',
  age: 30,
  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

The code snippets demonstrate the different focus of each repository. front-end-interview-handbook provides practical examples like the debounce function, while 33-js-concepts illustrates core JavaScript concepts such as objects and methods.

Both repositories offer valuable resources for JavaScript developers, with front-end-interview-handbook being more interview-oriented and 33-js-concepts providing a deeper dive into JavaScript fundamentals.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README


33 Concepts Every JS Developer Should Know

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


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

Reference

Articles

video Videos

⬆ Back to Top


2. Primitive Types

Reference

Articles

video Videos

⬆ Back to Top


3. Value Types and Reference Types

Articles

video Videos

⬆ Back to Top


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

Articles

video Videos

Books

⬆ Back to Top


5. == vs === vs typeof

Articles

video Videos

⬆ Back to Top


6. Function Scope, Block Scope and Lexical Scope

Books

Articles

video Videos

⬆ Back to Top


7. Expression vs Statement

Articles

video Videos

⬆ Back to Top


8. IIFE, Modules and Namespaces

Reference

Articles

video Videos

⬆ Back to Top


9. Message Queue and Event Loop

Articles

video Videos

⬆ Back to Top


10. setTimeout, setInterval and requestAnimationFrame

Articles

video Videos

⬆ Back to Top


11. JavaScript Engines

Articles

video Videos

⬆ Back to Top


12. Bitwise Operators, Type Arrays and Array Buffers

Articles

video Videos

⬆ Back to Top


13. DOM and Layout Trees

Books

Articles

video Videos

⬆ Back to Top


14. Factories and Classes

Articles

video Videos

⬆ Back to Top


15. this, call, apply and bind

Reference

Articles

video Videos

⬆ Back to Top


16. new, Constructor, instanceof and Instances

Articles

⬆ Back to Top


17. Prototype Inheritance and Prototype Chain

Reference

Articles

video Videos

Books

⬆ Back to Top


18. Object.create and Object.assign

Reference

Articles

video Videos

⬆ Back to Top


19. map, reduce, filter

Articles

video Videos

⬆ Back to Top


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

Articles

video Videos

⬆ Back to Top


21. Closures

Reference

Articles

video Videos

⬆ Back to Top


22. High Order Functions

Books

Articles

video Videos

⬆ Back to Top


23. Recursion

Articles

video Videos

⬆ Back to Top


24. Collections and Generators

Reference

Articles

video Videos

⬆ Back to Top


25. Promises

Reference

Articles

video Videos

⬆ Back to Top


26. async/await

Reference

Books

Articles

video Videos

⬆ Back to Top


27. Data Structures

Articles

video Videos

⬆ Back to Top


28. Expensive Operation and Big O Notation

Articles

video Videos

⬆ Back to Top


29. Algorithms

Articles

video Videos

⬆ Back to Top


30. Inheritance, Polymorphism and Code Reuse

Reference

Articles

video Videos

⬆ Back to Top


31. Design Patterns

Books

Articles

video Videos

⬆ Back to Top


32. Partial Applications, Currying, Compose and Pipe

Books

Articles

video Videos

⬆ Back to Top


33. Clean Code

Articles

video Videos

⬆ Back to Top

License

This software is licensed under MIT License, See License for more information ©Leonardo Maldonado.