Complete Guide to All Javascript Concepts (A-Z): Basic to Advanced

fireflash

1. Variables & Data Types

Variable Declarations: var, let, const
Primitive Data Types:string, number, boolean, null, undefined, symbol

2. Null vs Undefined

null:
Explicitly assigned to indicate an empty or non-existent value.
Type: object (a historical quirk in JavaScript).
Usage: Used to intentionally set a variable to “empty.”
undefined:
Indicates a variable has been declared but not assigned a value or when a function doesn’t return anything.
Type: undefined.
Usage: Default value for uninitialized variables or missing function arguments.

3. Reference Data Types

object, array, function

4. Control Structures

if, else, switch

5. Loops

for, while, do-while, for…of, for…in

6. Functions

Types:Function declarations and expressions
Arrow functions
Immediately Invoked Function Expression (IIFE)
Higher-order functions (functions taking or returning other functions)
Callback functions

7. Promises

Handle asynchronous operations.Methods:Promise.all(), Promise.resolve(), Promise.then(), Promise.any(), Promise.race(), Promise.reject()

8. Async/Await

Simplifies writing asynchronous code, making it resemble synchronous code.

9. Callback Functions

A function passed as an argument to another function, executed after the main function completes.

10. Closures

A closure is a function that retains access to its parent scope variables even after the parent function exits.

11. Scope

Types:Global vs. Local Scope
Function scope and block scope (with let and const)

12. Hoisting

Variable Hoisting: Variables declared with var are hoisted and partially initialized.
Function Hoisting: Functions declared with function are hoisted with their definitions.

13. Event Loop and Task Queue

Manages asynchronous operations via microtasks and macrotasks.

14. Execution Context

The environment in which code is executed.Global Execution Context (GEC)
Function Execution Context

15. Scope Chain & Execution Context

Scope Chain: Determines variable lookup order in nested contexts.
Execution Context: Represents the environment for evaluating and executing code.

16. Memoization

Optimizes functions by caching results of expensive operations for repeated inputs, reducing redundant computations.

17. Debouncing

Limits function invocation by delaying its execution until after a specified time has passed since the last trigger.

18. Throttling

Restricts a function to execute at most once within a specified time interval, regardless of how often it is triggered.

19. Currying

Converts a function with multiple arguments into a sequence of functions, each accepting a single argument.Uses: Functional programming, partial application of arguments.

20. Timers

setTimeout(): Executes a function after a delay.
setInterval(): Repeatedly executes a function at fixed intervals.
clearTimeout(): Cancels a scheduled setTimeout() operation.

21. Template Literals

Simplifies string interpolation and multi-line strings using backticks (`).

22. LocalStorage & SessionStorage

localStorage: Persistent data across sessions.
sessionStorage: Data cleared when the browser or tab closes.

23 . Regular Expressions (RegExp)

Define search patterns for matching, replacing, or manipulating strings.

24. this Keyword

Context-sensitive keyword for the execution context:In the global scope, this refers to the global object (window in browsers).
In a regular function, this also refers to the global object unless in strict mode.
In an object method, this refers to the object the method belongs to.

25. OOPs in JavaScript

Classes, inheritance, encapsulation, static methods, and getters/setters.

26. Operators

a. Arithmetic Operators: +, -, *, /, %
b. Comparison Operators: ==, ===, !=, !==, >, <, >=, <=
c. Logical Operators: &&, ||, !
d. Assignment Operators: =, +=, -=, *=, /=
e. Unary Operators: ++, --, typeof, delete
f. Ternary Operator: condition ? expr1 : expr2

27. Break and Continue

break: Exits a loop.
continue: Skips the current iteration.

28. Parameters and Arguments

Parameters: Defined in function declarations.
Arguments: Actual values passed to functions.

29.Destructuring

Simplifies extracting values from arrays and objects:
a. Array Destructuring
b. Object Destructuring

30. Rest and Spread Operator

Rest (...): Collects elements into an array or object.
Spread (...): Expands arrays or objects into individual elements.

31. Event Delegation

Using event listeners on parent elements to handle child element events.

32.Higher-Order Functions

Functions that take other functions as arguments or return functions.

33. Anonymous Functions

Functions without a name, often used as callbacks or inline.

34. Lexical Scoping

Determines variable scope based on the function's location in the source code.

35. Array Methods

push(), pop(), shift(), unshift()
concat(), slice(), splice()
map(), filter(), reduce(), forEach()
find(), findIndex()
sort(), reverse()
join(), split()
indexOf(), includes(), lastIndexOf()

36. Object Methods

Object.assign(), Object.create(), Object.keys(), Object.values(), Object.entries(), Object.hasOwn(), Object.freeze(), Object.seal()

37. Prototypes

Prototype chain and inheritance using prototypes.

38. Classes

Syntax, constructors, methods, and inheritance using extends.

39. call(), apply(), and bind()

Control the this context in functions.

40. Event Bubbling and Capturing

Event Bubbling: Events propagate from target to root.
Event Capturing: Events propagate from root to target.

41. Generators & Iterators

Generators: Functions that can pause and resume (function*).
Iterators: Protocol for sequential access to data.

42. WeakMap and WeakSet

Used for memory management by allowing garbage collection of unused objects.

43. Polyfill

Code that provides modern functionality in older browsers.

44. Prototypal Inheritance

JavaScript’s inheritance model using prototypes.

45. Cookies

Storing and retrieving browser cookies in JavaScript.

46. Advanced Array Methods

find(), filter(), reduce(), map(), sort().

47. Design Patterns

Module Pattern: Encapsulation into modules.
Singleton Pattern: Ensures a class has one instance.
Observer Pattern: Notifies multiple objects of state changes.
Factory Pattern: Centralizes object creation.
Strategy Pattern: Dynamically changes algorithms.
Decorator Pattern: Adds behavior dynamically.

48. Lazy Loading

Delays loading content until it’s needed.

50. Working with JSON :

JSON Basics
JSON syntax, parsing with JSON.parse(), stringifying with JSON.stringify()
Working with APIs
Fetching data from an API using fetch()
Handling API responses with Promises or Async/Await

51. DOM Manipulation :

DOM Selection
document.getElementById(), document.querySelector(), document.querySelectorAll()
Event Handling
Event listeners: addEventListener(), removeEventListener()
event.target, event.preventDefault(), event.stopPropagation()
Modifying DOM Elements
Changing text, HTML, attributes, styles
Adding/removing elements dynamically (createElement(), appendChild(), removeChild())
DOM Traversal
parentNode, childNodes, nextSibling, previousSibling

52. Error Handling :

try...catch...finally: Handling errors in synchronous code
Custom Errors: Creating custom error classes
Throwing Errors: throw keyword for throwing errors manually

53. String Methods :

charAt(), charCodeAt(), concat(), includes(), indexOf(), lastIndexOf(), slice(), split(), toLowerCase(), toUpperCase(), trim(), replace(), search(), match(), repeat(), startsWith(), endsWith(), padStart(), padEnd(), localeCompare(), fromCharCode().

54. Date methods :

Date.now(), Date.parse(), Date.UTC(), getDate(), getDay(), getFullYear(), getHours(), getMilliseconds(), getMinutes(), getMonth(), getSeconds(), getTime(), getTimezoneOffset(), setDate(), setFullYear(), setHours(), setMilliseconds(), setMinutes(), setMonth(), setSeconds(), setTime(), toDateString(), toISOString(), toLocaleDateString(), toLocaleTimeString(), toString().

55. Generator: A generator in JavaScript is a special type of function that allows you to pause and resume its execution.

function*, yield, next(), return(), throw().

56. JavaScript Proxy : A Proxy in JavaScript is a special object that allows you to intercept and customize operations on objects, such as property access, assignment, function calls, and more. It acts as a wrapper for another object and can redefine fundamental operations (like get, set, deleteProperty, etc.) on that object.

Commonly Used Traps (Methods):

get(target, prop, receiver): Intercepts property access.
set(target, prop, value, receiver): Intercepts property assignment.
has(target, prop): Intercepts the in operator.
deleteProperty(target, prop): Intercepts property deletion.
apply(target, thisArg, argumentsList): Intercepts function calls.
construct(target, args): Intercepts the new operator.
defineProperty(target, prop, descriptor): Intercepts property definition.

57. Javascript Array and Object Cloning : Shallow or Deep ?

A shallow clone of an object or array creates a new instance, but it only copies the top-level properties or elements. If the original object or array contains references to other objects (nested objects or arrays), these inner objects are not copied. Instead, the shallow clone will reference the same objects.

A deep clone creates a completely independent copy of the original object or array. It recursively copies all the properties or elements, including nested objects or arrays. This means that deep cloning ensures that no references to nested objects are shared between the original and the clone.

58. loose equality (==) and strict equality (===) :

Loose equality compares two values for equality after performing type coercion. This means that the values are converted to a common type (if they are of different types) before making the comparison.

When using ==, JavaScript attempts to convert the operands to the same type before comparing them.

Strict equality compares two values without performing any type conversion. It checks both the value and the type of the operands.

For ===, the operands must be of the same type and value to be considered equal.

59. Call by Value Vs Call by Reference :

Call by Value : When an argument is passed to a function by value, a copy of the actual value is passed. Any changes made to the argument inside the function do not affect the original variable outside the function.

When it happens: This occurs when primitive types (like numbers, strings, booleans, null, undefined, and symbols) are passed to a function.

Call by Reference : When an argument is passed by reference, the reference (or memory address) of the actual object is passed to the function. This means any changes made to the argument inside the function will directly modify the original object outside the function.

When it happens: This occurs when non-primitive types (like objects, arrays, and functions) are passed to a function.

60. JavaScript Set : A Set in JavaScript is a built-in collection object that allows you to store unique values of any type, whether primitive or object references.

Key Characteristics of a Set:

Unique Elements: A Set automatically ensures that each value it contains is unique. If you try to add a duplicate value, it will be ignored.
Ordered: The elements in a Set are ordered, meaning the values are stored in the order they were added. However, Sets do not allow duplicate entries.
Iterable: Sets are iterable, so you can loop over the elements in a Set using for...of, or methods like .forEach().
No Indexes: Unlike Arrays, Set elements are not accessed by an index. They are stored by insertion order, but you can’t reference them by a number.

Basic Methods of a Set :

add(value): Adds a value to the Set. If the value already exists, it does nothing (no duplicates).
has(value): Checks if the Set contains the specified value. Returns true or false.
delete(value): Removes the specified value from the Set.
clear(): Removes all elements from the Set.
size: Returns the number of elements in the Set.
forEach(callback): Executes a provided function once for each value in the Set.

61. JavaScript Map : A Map in JavaScript is a built-in object that stores key-value pairs. Unlike regular JavaScript objects, Maps allow keys of any data type (including objects, functions, and primitive types like strings and numbers) to be used.

Maps also maintain the insertion order of their keys, making them useful in scenarios where order matters.

Basic Methods of a Map :

set(key, value): Adds or updates an element with the specified key and value in the Map.
get(key): Retrieves the value associated with the specified key.
has(key): Checks if a Map contains a key.
delete(key): Removes the element associated with the specified key.
clear(): Removes all elements from the Map.
size: Returns the number of key-value pairs in the Map.
forEach(callback): Executes a provided function once for each key-value pair in the Map.
keys(): Returns an iterator object containing all the keys in the Map.
values(): Returns an iterator object containing all the values in the Map.
entries(): Returns an iterator object containing an array of [key, value] pairs.

62. The Fetch API : The Fetch API allows us to make async requests to web servers from the browser. It returns a promise every time a request is made which is then further used to retrieve the response of the request.

63. Import/Export :

Modules: In JavaScript, a module is a file that contains code you want to reuse. Instead of having everything in one file, you can split your code into separate files and then import what you need. This keeps the code clean, organized, and maintainable.

Imports: This is how you bring in functionality from other modules into your current file.
Exports: This is how you make variables, functions, classes, or objects from one module available for use in other modules.

64. Pure Functions, Side Effects, State Mutation and Event Propagation:

65. Recursion:

Recursion is a fundamental programming concept where a function calls itself in order to solve a problem. Recursion is often used when a problem can be broken down into smaller, similar sub-problems. In JavaScript, recursion is useful for tasks like traversing trees, solving puzzles, and more.

Key Concepts:

Base Case: The condition that stops the recursion. Without a base case, recursion can lead to infinite function calls, causing a stack overflow error.
Recursive Case: The part of the recursion where the function calls itself with a smaller or simpler version of the problem.

66. The apply, call, and bind methods:

67. window methods:

alert(), confirm(), prompt(), setTimeout(), setInterval(), clearTimeout(), clearInterval(), open(), close(), requestAnimationFrame().

68. Mouse events:

click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, contextmenu.

69. Keyboard events:

keydown, keypress, keyup.

70. Form events:

submit, change, focus, blur, input, reset, select, keypress, keydown, keyup.

71. Debugging :

72. Cross-Origin Resource Sharing (CORS):

73. Web Workers: A mechanism for running scripts in background threads, allowing JavaScript to perform computationally expensive tasks without blocking the main thread.

74. Service Workers: A script that runs in the background of your browser, enabling features like push notifications, background sync, and caching for offline functionality.

75. Lazy Loading or Infinite Scrolling) :

Lazy Loading and Infinite Scrolling are two techniques commonly used to enhance performance and user experience in web applications, especially when dealing with large amounts of data or media (like images, lists, or articles).

Lazy Loading is a design pattern in web development where resources (such as images, scripts, videos, or even content) are loaded only when they are required.

The main goal of lazy loading is to improve the initial loading time of a webpage by reducing the number of resources loaded initially.

Infinite Scrolling is a technique that automatically loads more content as the user scrolls down the page, typically without the need for pagination. This is widely used in social media platforms, news sites, and any web application that needs to display large datasets (e.g., Instagram, Twitter, Facebook).

76: Progressive Web Apps (PWAs): Building web applications that work offline, provide push notifications, and have native-like performance (through service workers and other browser APIs).

77. Server-sent events : Server-sent events (SSE) are a simple and efficient technology for enabling real-time updates from the server to the client over a single HTTP connection.

78.Strict Mode : Strict Mode is a feature in JavaScript that ensures that you avoid errors and problematic features.

79. Security: (Not a JavaScript concept, but important to know)

80. Temporal Dead Zone (TDZ) : It is a term that refers to the period of time between the creation of a variable and its initialization in the execution context. During this time, the variable exists but cannot be accessed — attempting to do so will result in a ReferenceError.

The TDZ occurs for variables declared using let and const but not for var because var declarations are hoisted and initialized with undefined.

Thats it guys.

Learning JavaScript, or any programming language, can feel overwhelming at first. If you don’t understand a topic on the first go, that’s completely okay! No one becomes an expert overnight. The key is consistency, practice, and persistence.

Remember, every developer started from the basics. Take your time to understand each topic thoroughly, especially if you’re a beginner. Don’t rush the process, and don’t get discouraged by the number of concepts to master. Keep practicing, and gradually, things will start to click.

Stay patient, stay curious, and most importantly, keep coding !

Thank you for taking the time to read my blog! I hope you found it helpful and informative. If I missed any important topics or concepts, I sincerely apologize. Feel free to leave a comment or reach out if you have any questions or suggestions. Your feedback is always appreciated!

And don’t forget to clap if you found this helpful! 👏