Skip to content
/ 33-js-concepts Public
forked from leonardomso/33-js-concepts

📜 33 JavaScript concepts every developer should know.

License

MIT license
0 stars 8.9k forks Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

Poornima2003/33-js-concepts

BranchesTags
 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

744 Commits
.github
.github
 
 
.gitignore
.gitignore
 
 
CONTRIBUTING.md
CONTRIBUTING.md
 
 
LICENSE
LICENSE
 
 
README.md
README.md
 
 
index.js
index.js
 
 
package.json
package.json
 
 

Repository files navigation


33 Concepts Every JS Developer Should Know

33 Concepts Every JavaScript Developer Should Know

Twitter

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:

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

Videos

Exercise

Call Stack Exercises

Here are some exercises to help you practice and understand the Call Stack concept. Exercises for the Call Stack:

Exercise 1: Write a simple recursive function and trace its execution in the call stack. This will help you visualize how the call stack works.

Exercise 2: Create a function that simulates asynchronous behavior using setTimeout and observe how it's managed in the call stack.

Exercise 3: Debug a code snippet with a call stack-related issue and identify the problem. This will improve your debugging skills.

Explanation for Exercise 1: In this exercise, you'll dive into the mechanics of the call stack by writing a recursive function. ...

Explanation for Exercise 2: Explore how asynchronous operations are handled in the call stack by creating a function that uses setTimeout. ...

Explanation for Exercise 3: Sharpen your debugging skills by identifying and fixing a call stack-related issue in a code snippet. ...

⬆ Back to Top

2. Primitive Types

Reference

Articles

Videos

Exercise 1: Define Primitive Types

Implement a simple program that defines and uses various primitive data types, such as integers, floats, characters, and booleans. This exercise aims to reinforce your understanding of how to work with these basic data types in your chosen programming language.

Exercise 2: Type Conversions and Casting

Challenge yourself with a more complex task. Write a program that requires you to perform type conversions or casting between different primitive data types. For example, convert an integer to a floating-point number and vice versa. This exercise will deepen your knowledge of data type manipulation.

Exercise 3: Questions on Primitive Types

Create a set of questions related to primitive data types. These questions can include both multiple-choice and open-ended questions. These can be used for self-assessment or in a classroom setting to test your grasp of primitive types in programming.

Explanation for Exercise 1: In this exercise, you'll gain practical experience in using primitive data types, a fundamental concept in programming. This will reinforce your understanding of how these types work in your code.

Explanation for Exercise 2: Working with type conversions and casting is a valuable skill. This exercise will challenge you to handle data type conversions efficiently, which is essential for real-world programming tasks.

Explanation for Exercise 3: Creating questions related to primitive types is a great way to self-assess your knowledge and ensure you have a solid understanding of the basics. It's also useful for educational settings to test students' comprehension of primitive types.

⬆ Back to Top

3. Value Types and Reference Types

Articles

Videos

Exercise 1: Value Types Usage

Implement a simple program that demonstrates the use of value types, such as integers, floating-point numbers, and characters. This exercise will help you understand how value types are stored and manipulated in your chosen programming language.

Exercise 2: Reference Types Practice

Challenge yourself with a more complex problem that involves reference types, such as arrays, lists, or custom objects. Write a program that requires you to create and manipulate reference types effectively. This exercise will deepen your knowledge of reference types.

Exercise 3: Questions on Value Types and Reference Types

Create a set of questions related to value types and reference types. These questions can include both multiple-choice and open-ended questions. They can be used for self-assessment or in a classroom setting to test your grasp of how value types and reference types work in programming.

Explanation for Exercise 1: In this exercise, you'll gain practical experience in using value types, understanding how they are stored, and how they behave in your code. This will reinforce your understanding of this essential concept.

Explanation for Exercise 2: Working with reference types is crucial in programming. This exercise will challenge you to create and manipulate reference types effectively, which is essential for real-world programming tasks.

Explanation for Exercise 3: Creating questions related to value types and reference types is an excellent way to self-assess your knowledge and ensure you have a solid understanding of the differences between these types. It's also useful for educational settings to test students' comprehension.

⬆ Back to Top

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

Articles

Videos

Books

Exercise 1: Value Types Usage

Implement a simple program that demonstrates the use of value types, such as integers, floating-point numbers, and characters. This exercise will help you understand how value types are stored and manipulated in your chosen programming language.

Exercise 2: Reference Types Practice

Challenge yourself with a more complex problem that involves reference types, such as arrays, lists, or custom objects. Write a program that requires you to create and manipulate reference types effectively. This exercise will deepen your knowledge of reference types.

Exercise 3: Questions on Value Types and Reference Types

Create a set of questions related to value types and reference types. These questions can include both multiple-choice and open-ended questions. They can be used for self-assessment or in a classroom setting to test your grasp of how value types and reference types work in programming.

Explanation for Exercise 1: In this exercise, you'll gain practical experience in using value types, understanding how they are stored, and how they behave in your code. This will reinforce your understanding of this essential concept.

Explanation for Exercise 2: Working with reference types is crucial in programming. This exercise will challenge you to create and manipulate reference types effectively, which is essential for real-world programming tasks.

Explanation for Exercise 3: Creating questions related to value types and reference types is an excellent way to self-assess your knowledge and ensure you have a solid understanding of the differences between these types. It's also useful for educational settings to test students' comprehension.

⬆ Back to Top

5. == vs === vs typeof

Articles

Videos

Exercise 1: Equality Operators Practice

Implement a simple program that compares values using both == and === operators. Explore the differences in behavior and results between these operators. This exercise will help you understand how type coercion affects comparisons in your chosen programming language.

Exercise 2: Using typeof for Type Checking

Challenge yourself with a more complex task. Write a program that checks the data type of variables using the typeof operator. Explore how typeof can be used for type checking and validation in your code.

Exercise 3: Questions on Comparison Operators

Create a set of questions related to ==, ===, and typeof comparisons. These questions can include both multiple-choice and open-ended questions. Use these to self-assess your knowledge or for educational purposes in a classroom setting.

Explanation for Exercise 1: In this exercise, you'll get hands-on experience in comparing values using different equality operators. Understanding the nuances between == and === is vital for making correct comparisons in your code.

Explanation for Exercise 2: The typeof operator is a valuable tool for type checking in your programs. This exercise will challenge you to use typeof effectively and understand its role in checking variable data types.

Explanation for Exercise 3: Creating questions related to comparison operators is an excellent way to self-assess your knowledge and ensure you have a solid grasp of how ==, ===, and typeof work in JavaScript or your chosen programming language.

⬆ Back to Top

6. Function Scope, Block Scope and Lexical Scope

Books

Articles

Videos

Exercise 1: Function Scope Exploration

Implement a simple program that demonstrates the concept of function scope. Create a variable inside a function and try to access it from outside the function. This exercise will help you understand how variables are scoped within functions.

Exercise 2: Block Scope Practice

Challenge yourself with a more complex problem that requires you to work with block scope. Create a program with multiple nested blocks (e.g., if statements, loops) and define variables within these blocks. Explore how variable scope changes within and outside these blocks.

Exercise 3: Scope-related Questions

Create a set of questions related to function scope, block scope, and lexical scope. These questions can include both multiple-choice and open-ended questions. Use them for

⬆ Back to Top

7. Expression vs Statement

Articles

Videos

Exercise 1: Identify Expressions and Statements

Implement a simple program that includes both expressions and statements. Identify and label these expressions and statements in your code. This exercise aims to reinforce your understanding of the fundamental difference between expressions and statements in programming.

Exercise 2: Convert Statements to Expressions

Challenge yourself with a more complex task. Take a program that primarily uses statements and refactor it to use expressions where possible. This exercise will deepen your knowledge of how to make your code more concise and expressive by using expressions effectively.

Exercise 3: Questions on Expressions and Statements

Create a set of questions related to expressions and statements. These questions can include both multiple-choice and open-ended questions. These can be used for self-assessment or in a classroom setting to test your grasp of this fundamental concept in programming.

Explanation for Exercise 1: In this exercise, you'll gain practical experience in identifying expressions and statements, a key distinction in programming. This will help reinforce your understanding of how these two elements work in your code.

Explanation for Exercise 2: Refactoring code is an important skill. This exercise will challenge you to convert statements to expressions, making your code more concise and readable.

Explanation for Exercise 3: Creating questions related to expressions and statements is a great way to self-assess your knowledge and ensure you have a solid understanding of this fundamental concept. It's also useful for educational settings to test students' comprehension of expressions vs. statements.

⬆ Back to Top

8. IIFE, Modules and Namespaces

Reference

Articles

Videos

-## Exercises for Understanding IIFE, Modules, and Namespaces

Exercise 1: Implement an IIFE

Create a simple program that demonstrates the use of an Immediately-Invoked Function Expression (IIFE). This can be a basic code snippet that showcases how IIFE works and its practical applications.

Exercise 2: Modularize Your Code

Challenge yourself with a more complex task. Take an existing project or write a new one and modularize it. Split your code into distinct modules, each addressing a specific aspect of your application. This exercise will help you understand the benefits of modular code structure.

Exercise 3: Namespaces and Organizing Code

Create a program where you use namespaces to organize your code. Implement different namespaces for various parts of your application, demonstrating how they help avoid naming conflicts and keep your code organized.

Exercise 4: Questions on IIFE, Modules, and Namespaces

Create a set of questions related to IIFE, Modules, and Namespaces. These questions can include both multiple-choice and open-ended questions.

⬆ Back to Top

9. Message Queue and Event Loop

Articles

Videos

Exercise 1: Simulate a Message Queue

Implement a simple program that simulates a message queue using your chosen programming language. Create tasks, add them to the queue, and demonstrate how they are executed in the order they are received. This exercise will help you understand the concept of a message queue in a practical way.

Exercise 2: Asynchronous Programming Practice

Challenge yourself with a more complex problem. Write a program that involves asynchronous operations, such as making API requests or reading/writing files. Use the event loop to manage these operations efficiently. This exercise will deepen your understanding of asynchronous programming and the event loop.

Exercise 3: Questions on Message Queue and Event Loop

Create a set of questions related to Message Queue and the Event Loop. These questions can include both multiple-choice and open-ended questions. They are useful for self-assessment or in an educational setting to test your understanding of these concepts.

Explanation for Exercise 1: In this exercise, you'll gain hands-on experience in simulating a message queue, which is a key component of asynchronous programming. You'll see how tasks are managed in the order they are received, helping you grasp the concept.

Explanation for Exercise 2: Asynchronous programming is a fundamental aspect of modern applications. This exercise challenges you to apply the event loop to manage asynchronous operations effectively, which is essential in many real-world scenarios.

Explanation for Exercise 3: Creating questions related to Message Queue and the Event Loop is a valuable way to test your knowledge and ensure you have a strong grasp of these concepts. It's also useful for educational purposes to assess understanding.

⬆ Back to Top

10. setTimeout, setInterval and requestAnimationFrame

Articles

Videos

Exercise 1: Using setTimeout

Implement a simple program that uses the setTimeout function to schedule a function to run after a specified delay. This exercise can involve creating a basic animation or executing a task with a delay.

Exercise 2: Repeating Actions with setInterval

Challenge yourself by creating a program that uses setInterval to repeat an action at regular intervals. This could be a simple clock, a real-time data updater, or any other application that requires periodic execution.

Exercise 3: Animation with requestAnimationFrame

Develop an animation using the requestAnimationFrame function. Create a smooth and efficient animation that utilizes this browser-native function for rendering. You can create a bouncing ball animation or a more complex graphical display.

Exercise 4: Questions on setTimeout, setInterval, and requestAnimationFrame

Create a set of questions related to setTimeout, setInterval, and requestAnimationFrame. These questions can include both multiple-choice and open-ended questions. They are useful for self-assessment or in an educational setting to test your understanding of these concepts.

Explanation for Exercise 1: In this exercise, you'll gain practical experience in using setTimeout to schedule code execution. You'll understand how to add delays to your code and create timed events.

Explanation for Exercise 2: Using setInterval is crucial for tasks that need to be repeated. This exercise will help you become proficient in setting up and managing periodic actions in your applications.

Explanation for Exercise 3: requestAnimationFrame is essential for smooth animations in web development. This exercise will enhance your skills in creating visually appealing and efficient animations.

Explanation for Exercise 4: Creating questions related to setTimeout, setInterval, and requestAnimationFrame is a great way to assess your knowledge of these concepts and ensure you have a solid grasp of them. It's also useful for educational purposes to test understanding.

⬆ Back to Top

11. JavaScript Engines

Articles

Videos

Exercises for Understanding JavaScript Engines

Exercise 1: Interacting with a JavaScript Engine

Implement a simple program that demonstrates interaction with a JavaScript engine. This can be a basic code snippet that showcases how JavaScript code is executed and processed by an engine.

Exercise 2: Performance Optimization

Challenge yourself with a more complex task. Take an existing JavaScript project or write a new one and focus on performance optimization. Identify parts of your code that can be optimized for execution by a JavaScript engine.

Exercise 3: Understanding Engine Features

Create a set of questions related to JavaScript engines. These questions can include both multiple-choice and open-ended questions. They are useful for self-assessment or in an educational setting to test your understanding of JavaScript engines.

Explanation for Exercise 1: In this exercise, you'll gain practical experience in interacting with a JavaScript engine, which is essential for understanding how JavaScript code is executed and how to work with engine-specific features.

Explanation for Exercise 2: Performance optimization is a critical aspect of working with JavaScript engines, especially in web development. This exercise will challenge you to make your code more efficient and responsive.

Explanation for Exercise 3: Creating questions related to JavaScript engines is a great way to assess your knowledge of how engines work and ensure you have a solid understanding of their features. It's also useful for educational purposes to test understanding.

⬆ Back to Top

12. Bitwise Operators, Type Arrays and Array Buffers

Article

Videos

Exercise 1: Bitwise Operations Practice

Implement a program that uses various bitwise operators (e.g., AND, OR, XOR, left shift, right shift) to manipulate binary data. This exercise will help you grasp the practical applications of bitwise operations.

Exercise 2: Working with Typed Arrays

Challenge yourself with a more complex task. Create a program that utilizes Typed Arrays to efficiently handle binary data, such as audio or image processing. Explore the benefits of using Typed Arrays over traditional JavaScript arrays.

Exercise 3: Array Buffers and Data Views

Implement a program that uses Array Buffers and Data Views to read and manipulate binary data. This exercise will demonstrate how Array Buffers can be used to share memory efficiently among different views of data.

Exercise 4: Questions on Bitwise Operators, Typed Arrays, and Array Buffers

Create a set of questions related to Bitwise Operators, Typed Arrays, and Array Buffers. These questions can include both multiple-choice and open-ended questions. They are useful for self-assessment or in an educational setting to test your understanding of these concepts.

Explanation for Exercise 1: In this exercise, you'll gain practical experience in using bitwise operators, a fundamental concept in low-level data manipulation. You'll understand how these operations are used for practical purposes.

Explanation for Exercise 2: Typed Arrays are crucial for handling binary data efficiently. This exercise will challenge you to work with them in real-world scenarios, demonstrating their advantages.

Explanation for Exercise 3: Array Buffers and Data Views provide a structured way to manipulate binary data. This exercise will help you understand how to work with them and share memory across different data views.

Explanation for Exercise 4: Creating questions related to Bitwise Operators, Typed Arrays, and Array Buffers is an effective way to assess your knowledge of these concepts and ensure you have a solid grasp of their applications. These questions are also useful for educational purposes to test understanding.

⬆ Back to Top

13. DOM and Layout Trees

Books

Articles

Videos

Exercise 1: Manipulate the DOM

Implement a simple program that demonstrates how to manipulate the Document Object Model (DOM) using JavaScript. You can create a basic web page and use JavaScript to change its content, style, or structure.

Exercise 2: Build a Layout Tree

Challenge yourself with a more complex task. Design a web page layout and create a program that builds a layout tree representing the page's structure. This exercise will help you understand how the DOM and layout trees are interconnected.

Exercise 3: Questions on DOM and Layout Trees

Create a set of questions related to the DOM and Layout Trees. These questions can include both multiple-choice and open-ended questions. They are useful for self-assessment or in an educational setting to test your understanding of these concepts.

Explanation for Exercise 1: In this exercise, you'll gain practical experience in manipulating the DOM, a crucial aspect of web development. You'll learn how to change web page content dynamically.

Explanation for Exercise 2: Building a layout tree is essential for understanding how web page elements are structured and presented. This exercise will deepen your knowledge of how the DOM and layout trees work together.

Explanation for Exercise 3: Creating questions related to the DOM and Layout Trees is a valuable way to test your understanding of these concepts. It's also useful for educational purposes to assess knowledge and comprehension.

⬆ Back to Top

14. Factories and Classes

Articles

Videos

Exercise

Exercises for Understanding Factories and Classes

Under the "Exercises" section, list the exercises for the Factories and Classes concepts:

Exercise 1: Create a Factory Function

Implement a simple program that demonstrates how to create and use a factory function. You can create an object or an instance of a class using a factory function. This exercise will help you understand how factories work in object-oriented programming.

Exercise 2: Design a Class

Challenge yourself with a more complex task. Design a class that represents an object or entity relevant to your programming domain. Instantiate the class and demonstrate how it can be used to model real-world entities. This exercise will deepen your knowledge of class-based object-oriented programming.

Exercise 3: Compare Factories and Classes

Create a program that highlights the differences and similarities between factory functions and classes. Discuss the advantages and disadvantages of each approach. This exercise will help you make informed decisions about when to use factories or classes in your projects.

⬆ Back to Top

15. this, call, apply and bind

Reference

Articles

Videos

Exercise 1: "this" in Different Contexts

Implement a program that explores the behavior of the "this" keyword in various contexts. Create and call functions within different objects, in the global scope, and inside event handlers. This exercise will help you grasp how "this" behaves depending on its context.

Exercise 2: Using "call" and "apply"

Challenge yourself with a complex task. Write a program where you utilize both the "call" and "apply" methods. You can simulate scenarios where these methods are useful, such as borrowing methods from other objects or dynamically passing arguments to functions. This exercise will deepen your understanding of function context manipulation.

Exercise 3: Working with "bind"

Create a program that demonstrates how the "bind" method can be used to set the context of a function. Apply "bind" to functions and use the resulting functions in different contexts. This exercise will reinforce your knowledge of how "bind" helps control the value of "this."

Exercise 4: Questions on "this," "call," "apply," and "bind"

Develop a set of questions related to "this," "call," "apply," and "bind." Include both multiple-choice and open-ended questions. These questions can be used for self-assessment or in a classroom setting to assess your understanding of these concepts.

Explanation for Exercise 1: This exercise is designed to help you understand how the "this" keyword behaves in different scenarios, a fundamental concept in JavaScript and many other programming languages.

Explanation for Exercise 2: Working with "call" and "apply" is a practical skill. This exercise challenges you to use these methods effectively, which is valuable for more advanced programming tasks.

Explanation for Exercise 3: The "bind" method is a powerful tool for managing the value of "this" in functions. This exercise will solidify your understanding of how to use "bind" effectively.

Explanation for Exercise 4: Creating questions related to "this," "call," "apply," and "bind" is an excellent way to test your knowledge of these concepts and ensure you have a strong grasp of how they work in JavaScript.

⬆ Back to Top

16. new, Constructor, instanceof and Instances

Articles

Exercise 1: Creating Instances with "new" and Constructors

Implement a simple program that demonstrates the use of the "new" keyword to create instances of custom Constructors. Create a Constructor function, instantiate objects using "new," and access their properties and methods.

Exercise 2: Using "instanceof" for Type Checking

Challenge yourself with a problem where you need to check the type of an object. Write a program that utilizes the "instanceof" operator to determine if an object belongs to a specific class or constructor function.

Exercise 3: Working with Instances

Create a more extensive project that requires working with multiple instances of custom Constructor functions. This could involve creating a mini-application, managing different objects, and demonstrating their interactions.

Exercise 4: Questions on "new," "Constructor," "instanceof," and Instances

Create a set of questions related to these concepts. These questions can include both multiple-choice and open-ended questions. These can be used for self-assessment or in a classroom setting to test your comprehension of these JavaScript concepts.

Explanation for Exercise 1: In this exercise, you'll practice using the "new" keyword to create instances and constructors. This is a fundamental concept in object-oriented programming, and it's essential to understand how it works.

Explanation for Exercise 2: Using "instanceof" is a valuable technique for type checking in JavaScript. This exercise will challenge you to apply it to real-world scenarios where you need to identify object types.

Explanation for Exercise 3: Working with multiple instances is a common task in programming. This exercise allows you to create a more extensive project, providing practical experience in managing objects and their interactions.

Explanation for Exercise 4: Creating questions related to these concepts is a great way to self-assess your knowledge and ensure you have a solid understanding of "new," "Constructor," "instanceof," and instances in JavaScript.

⬆ Back to Top

17. Prototype Inheritance and Prototype Chain

Reference

Articles

Videos

Exercise 1: Prototypal Inheritance

Implement a simple program that demonstrates prototypal inheritance in your chosen programming language. Create a base object and a derived object that inherits from the base object's prototype. This exercise aims to reinforce your understanding of how prototype inheritance works.

Exercise 2: Using the Prototype Chain

Challenge yourself with a more complex problem that requires the application of the prototype chain. Create a hierarchy of objects with different methods and properties, and then demonstrate how objects in the hierarchy can access and override methods and properties. This exercise will deepen your knowledge of the prototype chain.

Exercise 3: Questions on Prototype Inheritance

Create a set of questions related to prototype inheritance and the prototype chain. These questions can include both multiple-choice and open-ended questions. These can be used for self-assessment or in a classroom setting to test your grasp of this concept.

Explanation for Exercise 1: This exercise provides hands-on experience with prototypal inheritance, a core concept in many programming languages. By creating base and derived objects, you'll reinforce your understanding of how objects inherit properties and methods from their prototypes.

Explanation for Exercise 2: Working with a complex hierarchy of objects and demonstrating the prototype chain's behavior is an excellent way to deepen your understanding of how objects access and override methods and properties in a prototype-based language.

Explanation for Exercise 3: Creating questions related to prototype inheritance is a valuable way to self-assess your knowledge. It ensures you have a solid understanding of this concept and can apply it effectively in real-world coding scenarios.

Books

⬆ Back to Top

18. Object.create and Object.assign

Reference

Articles

Videos

Exercise 1: Creating Objects with Object.create

Implement a program that uses Object.create to create objects with a specified prototype. Explore how to set properties and methods on these objects. This exercise will help you understand the concept of prototypal inheritance.

Exercise 2: Object Cloning with Object.assign

Challenge yourself with a more complex task. Write a program that involves cloning objects using Object.assign. You can start with a source object and create a copy or merge multiple objects into a new one. This exercise will deepen your knowledge of object cloning and merging.

Exercise 3: Questions on Object.create and Object.assign

Create a set of questions related to the concepts of "Object.create" and "Object.assign." These questions can include both multiple-choice and open-ended questions. Use these questions for self-assessment or in a classroom setting to test your understanding of these object-related operations.

Explanation for Exercise 1: In this exercise, you'll gain hands-on experience in creating objects with Object.create and exploring the principles of prototypal inheritance. This is essential for mastering object-oriented programming in JavaScript.

Explanation for Exercise 2: Object cloning and merging are common tasks in JavaScript. This exercise will challenge you to efficiently clone or merge objects using `Object.assign," a valuable skill for real-world programming.

Explanation for Exercise 3: Creating questions related to "Object.create" and "Object.assign" will help you assess your knowledge of these concepts and ensure you have a solid understanding of how to work with objects in JavaScript.

⬆ Back to Top

19. map, reduce, filter

Articles

Videos

Exercise 1: Using map

Implement a simple program that uses the map function to transform an array of elements. For example, you can use map to double all the numbers in an array. This exercise is designed to reinforce your understanding of how map works and how it can be applied.

Exercise 2: Applying reduce

Challenge yourself with a more complex problem that requires the application of the reduce function. Write a program that uses reduce to calculate the sum or product of an array's elements. This exercise will deepen your knowledge of reduce and its applications.

Exercise 3: Utilizing filter

Create a program that utilizes the filter function to extract specific elements from an array. For instance, you can filter out all even numbers or all names starting with a particular letter. This exercise aims to enhance your skills in using filter effectively.

Exercise 4: Questions on map, reduce, and filter

Create a set of questions related to the concepts of map, reduce, and filter. These questions can include both multiple-choice and open-ended questions. Use them for self-assessment or in educational settings to test your understanding of these functions.

Explanation for Exercise 1: This exercise provides hands-on experience in using the map function to transform data in an array. It helps solidify your understanding of how to apply map effectively.

Explanation for Exercise 2: Working on a problem that requires reduce is a valuable exercise. It deepens your understanding of how to use reduce for various operations, such as calculating sums or products.

Explanation for Exercise 3: By creating a program that utilizes the filter function, you gain practical experience in extracting specific data from an array, a common use case in data manipulation.

Explanation for Exercise 4: Creating questions related to map, reduce, and filter is a useful tool for self-assessment or classroom settings. It allows you to test your comprehension of these important array manipulation functions.

⬆ Back to Top

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

Articles

Videos

Exercise

Exercises for Pure Functions:

Exercise 1: Implement a simple program using Pure Functions. Create a function that takes input and returns an output, without affecting external state. This reinforces the idea of purity.

Exercise 2: Challenge yourself with a more complex problem. Write a series of Pure Functions to solve a problem without altering any external variables or state.

Exercise 3: Create a set of questions related to Pure Functions. These can be used for self-assessment or in a classroom setting. Include both multiple-choice and open-ended questions.

Exercises for Side Effects:

Exercise 1: Identify side effects in an existing codebase. Analyze a piece of code and identify any side effects that may be present.

Exercise 2: Write a function with side effects. Create a function that intentionally produces side effects. Discuss the consequences of these effects on the program.

Exercise 3: Explore mitigating side effects. Propose ways to reduce or eliminate side effects in code, focusing on creating more predictable behavior.

Exercises for State Mutation:

Exercise 1: Modify a variable's state. Create a program that involves state mutation. Observe the implications of altering the state directly.

Exercise 2: Implement a state management solution. Apply a state management pattern (e.g., Redux, Mobx) to handle state changes more predictably.

Exercise 3: Design a scenario with minimal state mutation. Challenge yourself to design a program where state mutations are kept to a minimum, emphasizing immutability.

Exercises for Event Propagation:

Exercise 1: Build an event-driven application. Create a simple event-driven program where different components communicate using event propagation.

Exercise 2: Investigate event bubbling and capturing. Explore the concepts of event propagation in the context of the DOM and explain the differences between event bubbling and capturing.

Exercise 3: Solve a real-world problem using event propagation. Tackle a more complex problem by designing a solution that relies on event propagation to handle various events and interactions.

... (repeat the structure for other concepts)

⬆ Back to Top

21. Closures

Reference

Articles

Videos

Exercises for Closures:

Exercise 1: Write a function that uses a closure to maintain a counter. The function should return the current count, and you should be able to increment it with each call. This exercise will help you understand how closures encapsulate state.

Exercise 2: Create a closure that generates a unique identifier for each call. You can use this identifier to label items in a list or provide unique keys for elements in a web page.

Exercise 3: Develop a function that takes advantage of closures to create a private variable, which can only be modified by the functions within the closure. This exercise demonstrates the concept of data encapsulation with closures.

⬆ Back to Top

22. High Order Functions

Books

Articles

Videos

Exercise 1: Implement a simple program using High Order Functions. This can be a basic example or a small project to reinforce understanding.

Exercise 2: Challenge yourself with a more complex problem that requires the application of High Order Functions. It could be a problem-solving task or a larger project.

Exercise 3: Create a set of questions related to High Order Functions. These questions can be used for self-assessment or in a classroom setting. Include both multiple-choice and open-ended questions.

⬆ Back to Top

23. Recursion

Articles

Videos

Exercise 1: Implement a simple program using recursion. This could be a basic code snippet that calculates the factorial of a number or computes the Fibonacci sequence. It's a practical way to reinforce your understanding of recursive functions.

Exercise 2: Challenge yourself with a more complex problem that requires the application of recursion. Consider creating a recursive function that solves a complex mathematical problem or navigates a data structure. This will deepen your comprehension of recursive techniques.

Exercise 3: Create a set of questions related to recursion. These questions can be multiple-choice or open-ended and should assess your knowledge of recursion, its strengths, and best practices. Use these questions for self-assessment or in an educational setting.

⬆ Back to Top

24. Collections and Generators

Reference

Articles

Videos

-Exercises for Collections and Generators:

Exercise 1: Implement a simple program using Collections and Generators. This can be a basic code snippet that demonstrates the creation and usage of collections or generators. This exercise will help you get familiar with the basics.

Exercise 2: Challenge yourself with a more complex problem that requires the application of Collections and Generators. This could be a task where you need to manipulate and process data using these concepts.

Exercise 3: Create a set of questions related to Collections and Generators. These questions can be both multiple-choice and open-ended and should assess your knowledge of these concepts. These questions can be used for self-assessment or in a classroom setting.

⬆ Back to Top

25. Promise

Reference

Articles

Videos

Exercise 1: Implement a simple program using Promises. This can be a basic code snippet that demonstrates the use of a Promise to handle asynchronous tasks, such as simulating a delayed operation or fetching data from an API.

Exercise 2: Challenge yourself with a more complex problem that requires the application of Promises. Create a project where you perform multiple asynchronous operations using Promises, such as making multiple API requests and handling the results.

Exercise 3: Create a set of questions related to Promises. These questions can include both multiple-choice and open-ended questions. They should test your understanding of how Promises work, how to handle Promise rejections, and how to chain multiple Promises. These questions can be used for self-assessment or in a classroom setting.

⬆ Back to Top

26. async/await

Reference

Books

Articles

Videos

Exercise 1: Implement a simple program using async/await. This can be a basic code snippet that demonstrates asynchronous programming with async functions and await. You can create a simple asynchronous task, such as fetching data from an API or reading a file.

Exercise 2: Challenge yourself with a more complex problem that requires the application of async/await. It could be a problem-solving task, like making multiple parallel API requests and processing the results using async/await. This exercise will deepen your understanding of handling asynchronous operations.

Exercise 3: Create a set of questions related to async/await. These questions can be multiple-choice or open-ended and should test your knowledge of how to work with asynchronous code, error handling, and best practices with async/await. These questions can be used for self-assessment or in a classroom setting.

⬆ Back to Top

27. Data Structures

Articles

Videos

Exercise 1: Implement a simple program using High Order Functions. This can be a basic code snippet that uses functions like map, filter, or reduce to operate on an array of numbers. This exercise will help you get familiar with these functions and their usage.

Exercise 2: Take on a more complex problem that necessitates the application of High Order Functions. You could, for instance, write a program that filters and processes data from a JSON dataset using these functions. This will deepen your understanding of how to use High Order Functions for practical tasks.

Exercise 3: Create a set of questions related to High Order Functions. These questions can be multiple-choice or open-ended and should test your knowledge of how High Order Functions work and how they can be used in real-world scenarios. These questions can be used for self-assessment or in a classroom setting.

⬆ Back to Top

28. Expensive Operation and Big O Notation

Articles

Videos

Exercise 1: Implement a simple program using Expensive Operation and Big O Notation. This can be a basic code snippet or a small project to illustrate the concept. Focus on a real-world scenario where efficient algorithms are crucial.

Exercise 2: Challenge yourself with a more complex problem that requires the application of Expensive Operation and understanding Big O Notation. Develop a program that solves a computational problem, and analyze its time and space complexity.

Exercise 3: Create a set of questions related to Expensive Operation and Big O Notation. These questions can be used for self-assessment or in a classroom setting. Include both multiple-choice and open-ended questions. Test your knowledge of how to analyze algorithm efficiency and choose the most suitable data structures for various scenarios.

⬆ Back to Top

29. Algorithms

Articles

Videos

Exercises for Algorithms:

Exercise 1: Implement a simple algorithm using the principles of Algorithms. This can be a basic code snippet that demonstrates an algorithm for sorting, searching, or other common operations. This exercise will help you grasp the fundamental concepts of Algorithms.

Exercise 2: Take on a more complex problem that requires the application of Algorithmic thinking. You could, for instance, implement a more advanced sorting algorithm like QuickSort or solve a challenging problem using dynamic programming. This exercise will deepen your understanding of how to apply advanced algorithms in practical scenarios.

Exercise 3: Create a set of questions related to Algorithms. These questions can be multiple-choice or open-ended and should test your knowledge of different types of algorithms, their time complexity, and when to use them. These questions can be used for self-assessment or in a classroom setting.

⬆ Back to Top

30 Inheritance in JavaScript

Reference

Articles

Videos

Exercise 1: Implement a simple program using Inheritance in JavaScript. This can be a basic code snippet that demonstrates inheritance between two classes. For example, you can create a Person and Student class to showcase inheritance.

Exercise 2: Challenge yourself with a more complex problem that requires the application of Inheritance in JavaScript. This could involve multiple levels of inheritance. Create a scenario, like a class hierarchy for shapes or vehicles, and demonstrate inheritance in a real-world context.

Exercise 3: Create a set of questions related to Inheritance in JavaScript. These questions can be multiple-choice or open-ended and should test your knowledge of how inheritance works in JavaScript. These questions can be used for self-assessment or in a classroom setting.

⬆ Back to Top

31. Design Patterns

Reference

Books

Articles

Videos

Exercise 1: Implement a simple program using Design Patterns. This can be a basic code snippet or a small project that applies a commonly used design pattern to reinforce your understanding.

Exercise 2: Challenge yourself with a more complex problem that necessitates the application of Design Patterns. It could be a problem-solving task or a larger project that involves multiple design patterns.

Exercise 3: Create a set of questions related to Design Patterns. These questions can be used for self-assessment or in a classroom setting. Include both multiple-choice and open-ended questions to test your knowledge of various design patterns and their applications.

⬆ Back to Top

32. Partial Applications, Currying, Compose and Pipe

Books

Articles

Videos

Here are some exercises to practice and understand the concepts discussed in the repository. Exercises for Partial Applications:

Exercise 1: Implement a simple program using Concept #141. This can be a basic code snippet or a small project to reinforce understanding.

Exercise 2: Challenge yourself with a more complex problem that requires the application of Concept #141. It could be a problem-solving task or a larger project.

Exercise 3: Create a set of questions related to Concept #141. These can be used for self-assessment or in a classroom setting. Include both multiple-choice and open-ended questions.

Explanation for Exercise 1: In this exercise, you'll practice implementing a simple function and creating a partial application of it. ...

Explanation for Exercise 2: For this exercise, you'll work with a more complex problem that will require currying. ...

Explanation for Exercise 3: This exercise focuses on creating a set of questions to reinforce your understanding of these concepts. ..

⬆ Back to Top

33. Clean Code

Articles

Videos

Exercise 1: Implement a program following Clean Code principles. Write a code snippet or a small project that demonstrates clean and readable code practices, such as meaningful variable names and proper indentation.

Exercise 2: Take on a more complex coding task and apply Clean Code principles. Challenge yourself to refactor an existing codebase, making it more maintainable and readable while following clean coding standards.

Exercise 3: Create a set of questions related to Clean Code. These questions can cover topics like naming conventions, code comments, and code structure. Include both multiple-choice and open-ended questions. These can be used for self-assessment or in a classroom setting.

⬆ Back to Top

License

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

About

📜 33 JavaScript concepts every developer should know.

Resources

Readme

License

MIT license
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 100.0%