mirror of
https://github.com/kamranahmedse/developer-roadmap.git
synced 2026-09-24 15:00:31 +08:00
feat: clean roadmap content and sync scripts (#10181)
* refactor: clean to roadmap content * refactor: move shared helpers into scripts/lib
This commit is contained in:
@@ -0,0 +1,7 @@
|
||||
# ==
|
||||
|
||||
The `==` operator compares two values for equality after performing type coercion if the types differ. For example, `"5" == 5` returns `true` because the string is converted to a number before comparison. This can produce surprising results and is generally avoided in favor of `===`.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Equality comparisons and sameness - MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness#same-value_equality_using_object.is)
|
||||
@@ -0,0 +1,7 @@
|
||||
# ===
|
||||
|
||||
The `===` operator compares two values for equality without type coercion. Both the value and the type must match for the comparison to return `true`. It is the recommended equality operator for most cases because it produces predictable results.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Strict equality - MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Strict_equality)
|
||||
@@ -0,0 +1,8 @@
|
||||
# All about Variables
|
||||
|
||||
Variables are named containers for storing data values in a program. In JavaScript, variables are declared using `var`, `let`, or `const`, each with different scoping and reassignment rules. Choosing the right declaration keyword affects how the variable behaves throughout the code.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@JavaScript Variables](https://javascript.info/variables)
|
||||
- [@article@Storing the information you need — Variables](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Variables)
|
||||
@@ -0,0 +1,7 @@
|
||||
# apply
|
||||
|
||||
The apply() method of Function instances calls this function with a given this value, and arguments provided as an array (or an array-like object).
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@apply() - MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply)
|
||||
@@ -0,0 +1,7 @@
|
||||
# Arguments object
|
||||
|
||||
The arguments object is an Array-like object accessible inside functions that contains the values of the arguments passed to that function, available within all non-arrow functions. You can refer to a function's arguments inside that function by using its arguments object. It has entries for each argument the function was called with, with the first entry's index at 0. But, in modern code, rest parameters should be preferred.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@The arguments object - MDN Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments)
|
||||
@@ -0,0 +1,8 @@
|
||||
# Arithmetic Operators
|
||||
|
||||
Arithmetic operators perform mathematical operations on numbers. They include `+` (addition), `-` (subtraction), `*` (multiplication), `/` (division), `%` (remainder), and `**` (exponentiation). The `+` operator is also used for string concatenation, which can cause issues when operands are mixed types.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Arithmetic Operators - MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#arithmetic_operators)
|
||||
- [@article@Arithmetic Operators - JavaScript.info](https://javascript.info/operators#maths)
|
||||
@@ -0,0 +1,9 @@
|
||||
# Arrays
|
||||
|
||||
Arrays are ordered, indexed collections that can hold values of any type. JavaScript arrays are dynamic, meaning they can grow and shrink, and provide a rich set of built-in methods like `map()`, `filter()`, `reduce()`, `push()`, and `pop()`. They are one of the most used data structures in JavaScript.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Working with Arrays in JavaScript](https://javascript.info/array)
|
||||
- [@article@JavaScript Arrays](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)
|
||||
- [@video@JavaScript Arrays](https://www.youtube.com/watch?v=oigfaZ5ApsM)
|
||||
@@ -0,0 +1,7 @@
|
||||
# Arrow Functions
|
||||
|
||||
Arrow functions are a concise syntax for writing function expressions introduced in ES6. They use `=>` instead of the `function` keyword and do not have their own `this`, `arguments`, or `super` bindings. They are commonly used for callbacks and short expressions, but are not suitable as object methods or constructors.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@MDN - Arrow Function Expressions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)
|
||||
@@ -0,0 +1,8 @@
|
||||
# Assignment Operators
|
||||
|
||||
An assignment operator assigns a value to its left operand based on the value of its right operand. The simple assignment operator is equal (`=`), which assigns the value of its right operand to its left operand. That is, `x = f()` is an assignment expression that assigns the value of `f()` to `x`.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Assignment Operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment_operators)
|
||||
- [@article@Basic Operators](https://javascript.info/operators#assignment)
|
||||
@@ -0,0 +1,9 @@
|
||||
# Async/Await
|
||||
|
||||
`async/await` is a special syntax to work with promises in a more comfortable fashion. We use `async` keyword to declare a async function that return a Promise, and the `await` keyword makes a function wait for a Promise.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Async/await](https://javascript.info/async-await)
|
||||
- [@article@async function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function)
|
||||
- [@article@JavaScript Promises - Chaining](https://www.codeguage.com/courses/advanced-js/promises-chaining)
|
||||
@@ -0,0 +1,9 @@
|
||||
# Asynchronous JavaScript
|
||||
|
||||
Asynchronous JavaScript allows code to start long-running operations, like network requests or timers, and continue executing other code while waiting for them to complete. JavaScript is single-threaded, so asynchronous patterns prevent the main thread from blocking. The main mechanisms are callbacks, Promises, and async/await.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Asynchronous JavaScript - MDN](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Introducing)
|
||||
- [@video@What The Hack is Event Loop and Asynchronous JavaScript - JSConf](https://youtu.be/8aGhZQkoFbQ)
|
||||
- [@video@Asynchronous JavaScript - JavaScript Visualized](https://youtu.be/eiC58R16hb8)
|
||||
@@ -0,0 +1,7 @@
|
||||
# BigInt Operators
|
||||
|
||||
Most operators that can be used with the `Number` data type will also work with `BigInt` values (e.g. arithmetic, comparison, etc.). However, the unsigned right shift `>>>` operator is an exception and is not supported. Similarly, some operators may have slight differences in behaviour (for example, division with `BigInt` will round towards zero).
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@BigInt Operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#bigint_operators)
|
||||
@@ -0,0 +1,8 @@
|
||||
# bigint
|
||||
|
||||
`BigInt` is a primitive type for representing integers of arbitrary size, beyond the safe integer limit of the `number` type. A BigInt is created by appending `n` to an integer literal or using the `BigInt()` function. It is used when precise integer arithmetic is needed for very large numbers, such as in cryptography or financial calculations.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@BigInt](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt)
|
||||
- [@video@The Whys and Hows Of BigInt](https://youtu.be/6I650PQfhMg?si=XyVGrmp4KWLRcHVj)
|
||||
@@ -0,0 +1,8 @@
|
||||
# bind()
|
||||
|
||||
The `bind()` method in JavaScript allows you to create a new function with a specific context and optionally preset arguments. Unlike `call()` or `apply()`, `bind()` does not immediately invoke the function. Instead, it returns a new function that can be called later, either as a regular function or with additional arguments. This is particularly useful when you want to ensure that a function retains a specific context, regardless of how or when it's invoked.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@bind()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind)
|
||||
- [@article@Function binding](https://javascript.info/bind)
|
||||
@@ -0,0 +1,8 @@
|
||||
# Bitwise Operators
|
||||
|
||||
Bitwise operators treat their operands as 32-bit integers and perform operations at the bit level. They include `&` (AND), `|` (OR), `^` (XOR), `~` (NOT), `<<` (left shift), `>>` (right shift), and `>>>` (unsigned right shift). They are used in low-level programming, flag manipulation, and performance-critical code.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Bitwise Operators - MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#bitwise_operators)
|
||||
- [@article@Bitwise Operators - JavaScript.info](https://javascript.info/operators#bitwise-operators)
|
||||
@@ -0,0 +1,7 @@
|
||||
# Block
|
||||
|
||||
Block scope limits a variable's visibility to the block of code enclosed in curly braces `{}` where it is declared. Variables declared with `let` and `const` are block-scoped. A variable inside an `if` statement or `for` loop with block scope is not accessible outside that block.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@JavaScript Scope](https://www.w3schools.com/js/js_scope.asp)
|
||||
@@ -0,0 +1,8 @@
|
||||
# boolean
|
||||
|
||||
A boolean is a primitive type with only two possible values: `true` or `false`. Booleans are used in conditions, comparisons, and logical operations. JavaScript also has truthy and falsy values, where non-boolean values are implicitly converted to `true` or `false` in a boolean context.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@JavaScript Boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)
|
||||
- [@video@Booleans in JavaScript](https://www.youtube.com/watch?v=B4ZCFdrBmbE)
|
||||
@@ -0,0 +1,8 @@
|
||||
# break / continue
|
||||
|
||||
`break` exits a loop or switch statement immediately, skipping any remaining iterations. `continue` skips the rest of the current iteration and moves to the next one. Both can be used with labels to control nested loops.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@JavaScript MDN Docs - continue statement](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/continue)
|
||||
- [@article@JavaScript MDN Docs - break statement](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/break)
|
||||
@@ -0,0 +1,9 @@
|
||||
# Built in functions
|
||||
|
||||
JavaScript offers a variety of built-in functions that simplify common tasks, available globally or within specific objects without requiring explicit definition. Functions like parseInt(), setTimeout(), and Math.random() can be used directly, while objects like Array, String, and Date include built-in methods for efficient data manipulation. Understanding these functions enhances development by leveraging JavaScript’s core features without reinventing the wheel.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@JavaScript Built-in Functions](https://www.tutorialspoint.com/javascript/javascript_builtin_functions.htm)
|
||||
- [@article@Built-in Methods in Javascript](https://dev.to/elpepebenitez/built-in-methods-in-javascript-4bll)
|
||||
- [@article@Built-in Functions:](https://www.tutorialride.com/javascript/javascript-built-in-functions.htm)
|
||||
@@ -0,0 +1,8 @@
|
||||
# Built-in Objects
|
||||
|
||||
JavaScript provides a set of built-in objects that are available without any imports. These include `Math`, `Date`, `JSON`, `Array`, `RegExp`, `Promise`, and others. They provide standard functionality for common tasks like math operations, date manipulation, and data serialization.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects)
|
||||
- [@article@JavaScript Built-in Objects](https://www.tutorialride.com/javascript/javascript-built-in-objects.htm)
|
||||
@@ -0,0 +1,7 @@
|
||||
# call()
|
||||
|
||||
The `call()` method allows you to invoke a function with a given `this` value, and arguments provided individually.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Call Method - MDN Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call)
|
||||
@@ -0,0 +1,7 @@
|
||||
# Callback Hell
|
||||
|
||||
The callback hell is when we try to write asynchronous JavaScript in a way where execution happens visually from top to bottom, creating a code that has a pyramid shape with many **})** at the end.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Callbacks in Callbacks - Pyramid of Doom](https://javascript.info/callbacks#pyramid-of-doom)
|
||||
@@ -0,0 +1,8 @@
|
||||
# Callbacks
|
||||
|
||||
A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Callbacks in JavaScript](https://javascript.info/callbacks)
|
||||
- [@article@Callback Functions](https://developer.mozilla.org/en-US/docs/Glossary/Callback_function)
|
||||
@@ -0,0 +1,8 @@
|
||||
# Classes
|
||||
|
||||
Classes are a template for creating objects. They encapsulate data with code to work on that data. Classes in JS are built on prototypes but have some syntax and semantics that are not shared with ES5 class-like semantics.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Classes in JavaScript](https://javascript.info/classes)
|
||||
- [@article@JavaScript Classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes)
|
||||
@@ -0,0 +1,8 @@
|
||||
# Closures
|
||||
|
||||
Function closures are one of the most powerful, yet most misunderstood, concepts of JavaScript that are actually really simple to understand. A closure refers to a function along with its lexical environment. It is essentially what allows us to return a function `A`, from another function `B`, that remembers the local variables defined in `B`, even after `B` exits. The idea of closures is employed in nearly every other JavaScript program, hence, it's paramount for a JavaScript developer to know it really well.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@JavaScript Closures - The Simplest Explanation](https://www.codeguage.com/courses/js/functions-closures)
|
||||
- [@article@JavaScript Closures Explained in 3 Minutes](https://medium.com/learning-new-stuff/javascript-closures-explained-in-3-minutes-5aae8dce2014)
|
||||
@@ -0,0 +1,7 @@
|
||||
# Comma operators
|
||||
|
||||
The comma operator (`,`) evaluates each of its operands (from left to right) and returns the value of the last operand. This lets you create a compound expression in which multiple expressions are evaluated, with the compound expression's final value being the value of the rightmost of its member expressions. This is commonly used to provide multiple parameters to a `for` loop.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Comma operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comma_Operator)
|
||||
@@ -0,0 +1,8 @@
|
||||
# CommonJS
|
||||
|
||||
CommonJS modules are the original way to package JavaScript code for Node.js. Node.js also supports the ESModules standard used by browsers and other JavaScript run-times, but CJS is still widely used in backend Node.js applications. Sometimes these modules will be written with a .cjs extension.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@How the CJS Module System Works](https://blog.risingstack.com/node-js-at-scale-module-system-commonjs-require/)
|
||||
- [@video@How to Import and Export Modules in CJS](https://www.youtube.com/watch?v=XTND4rjATXA)
|
||||
@@ -0,0 +1,7 @@
|
||||
# Comparison Operators
|
||||
|
||||
Comparison operators are the operators that compare values and return true or false. The operators include: `>`, `<`, `>=`, `<=`, `==`, `===`, `!=` and `!==`
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@JavaScript MDN Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#comparison_operators)
|
||||
@@ -0,0 +1,7 @@
|
||||
# Conditional Operators
|
||||
|
||||
The conditional (ternary) operator is the only JavaScript operator that takes three operands: `condition ? valueIfTrue : valueIfFalse`. It is a concise alternative to `if...else` for simple conditional assignments or expressions. Nesting ternary operators deeply is discouraged because it reduces readability.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@JavaScript MDN Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#conditional_operator)
|
||||
@@ -0,0 +1,8 @@
|
||||
# Conditional statements
|
||||
|
||||
When you write code, you often want to perform different actions for different decisions. You can use conditional statements in your code to do this. In JavaScript, we have three conditional statements: `if`, `if...else`, and `switch`.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Making decisions in your code — conditionals](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/conditionals)
|
||||
- [@article@Conditional branching: if, ?](https://javascript.info/ifelse)
|
||||
@@ -0,0 +1,9 @@
|
||||
# [const] keyword
|
||||
|
||||
Constants are block-scoped, much like variables declared using the `let` keyword. The value of a constant can't be changed through reassignment (i.e. by using the assignment operator), and it can't be re-declared (i.e. through a variable declaration). However, if a constant is an object or array its properties or items can be updated or removed.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@JavaScript Constants - CodeGuage](https://www.codeguage.com/courses/js/constants)
|
||||
- [@article@const keyword - MDN Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const)
|
||||
- [@article@JavaScript Variables](https://javascript.info/variables)
|
||||
@@ -0,0 +1,7 @@
|
||||
# Control Flow
|
||||
|
||||
Control flow refers to the order in which statements are executed in a program. JavaScript provides conditional statements (`if...else`, `switch`) to branch logic, and exception handling (`try/catch/finally`, `throw`) to manage errors. Writing clear control flow makes code easier to follow and debug.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Control Flow - MDN](https://developer.mozilla.org/en-US/docs/Glossary/Control_flow)
|
||||
@@ -0,0 +1,9 @@
|
||||
# Data Structures
|
||||
|
||||
A Data structure is a format to organize, manage and store data in a way that allows efficient access and modification. JavaScript has primitive (built-in) and non-primitive (not built-in) data structures. Primitive data structures come by default with the programming language and you can implement them out of the box (like arrays and objects). Non-primitive data structures don't come by default and you have to code them up if you want to use them.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@video@Introduction to the Stack Data Structure](https://youtu.be/4F-BnR2XwqU)
|
||||
- [@video@Intro to Recursion: Anatomy of a Recursive Solution](https://youtu.be/yBWlPte6FhA)
|
||||
- [@video@Dynamic Programming - Learn to Solve Algorithmic Problems & Coding Challenges](https://youtu.be/oBt53YbR9Kk)
|
||||
@@ -0,0 +1,9 @@
|
||||
# Datatypes
|
||||
|
||||
Data type refers to the type of data that a JavaScript variable can hold. There are seven primitive data types in JavaScript (Number, BigInt, String, Boolean, Null, Undefined and Symbol). Objects are non-primitives.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@JavaScript Data Types - CodeGuage](https://www.codeguage.com/courses/js/data-types)
|
||||
- [@article@JavaScript data types and data structures](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures)
|
||||
- [@article@JavaScript Data Types](https://javascript.info/types)
|
||||
@@ -0,0 +1,7 @@
|
||||
# Debugging Issues
|
||||
|
||||
The browser DevTools debugger allows developers to set breakpoints, step through code, inspect variable values, and trace the call stack. The console allows logging values and evaluating expressions in the current scope. These tools make it possible to understand what code is doing at runtime and identify the source of bugs.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Debugging JavaScript in the sources panel](https://developer.chrome.com/docs/devtools/javascript/)
|
||||
@@ -0,0 +1,10 @@
|
||||
# Debugging Memory Leaks
|
||||
|
||||
In JavaScript, memory leaks commonly occur within heap allocated memory, where short lived objects are attached to long lived ones and the Garbage Collector cannot safely de-allocate that memory as it is still referenced from the root set (the global object).
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Catching memory leaks with Chrome DevTools](https://medium.com/coding-blocks/catching-memory-leaks-with-chrome-devtools-57b03acb6bb9)
|
||||
- [@article@Effective Javascript Debugging](https://medium.com/swlh/effective-javascript-debugging-memory-leaks-75059b2436f6)
|
||||
- [@article@Debugging JavaScript memory leaks](https://www.debugbear.com/blog/debugging-javascript-memory-leaks)
|
||||
- [@video@JavaScript Memory Leaks Visualized and How To Fix Them](https://youtu.be/IkoGmbNJolo)
|
||||
@@ -0,0 +1,7 @@
|
||||
# Debugging performance
|
||||
|
||||
Enter the dev tools and check out the Lighthouse tab. This is essentially a series of tests that analyses the currently open website on a bunch of metrics related to performance, page speed, accessibility, etc. Feel free to run the tests by clicking the **Analyze Page Load** button (you might want to do this in an incognito tab to avoid errors arising from extensions you're using). Once you have the results, take your time and read through them (and do click through to the reference pages mentioned alongside each test result to know more about it!)
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Analyze runtime performance](https://developer.chrome.com/docs/devtools/performance)
|
||||
@@ -0,0 +1,7 @@
|
||||
# Default Parameters
|
||||
|
||||
Default function parameters allow named parameters to be initialized with default values if no value or `undefined` is passed.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Default Parameters - MDN Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters)
|
||||
@@ -0,0 +1,7 @@
|
||||
# DOM APIs
|
||||
|
||||
With HTML DOM, JavaScript can access and change all the elements of an HTML document such as its attributes, CSS styles, remove elements, add and create new elements on the page. Web API means application programming interface for the web. All browsers have a set of built-in Web APIs to support complex operations, and to help accessing data. Like Geo-location API, Web Storage, Web History and others.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@DOM- MDN Docs](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model)
|
||||
@@ -0,0 +1,7 @@
|
||||
# do...while statement
|
||||
|
||||
The `do...while` statement creates a loop that executes a specified statement until the test condition evaluates to `false`. The condition is evaluated after executing the statement, resulting in the specified statement executing at least once.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@do...while - MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/do...while)
|
||||
@@ -0,0 +1,7 @@
|
||||
# Equality Comparisons
|
||||
|
||||
Comparison operators are used in logical statements to determine equality or difference between variables or values. Comparison operators can be used in conditional statements to compare values and take action depending on the result.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@JavaScript Equality Operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#equality_operators)
|
||||
@@ -0,0 +1,8 @@
|
||||
# Error Objects
|
||||
|
||||
JavaScript provides a set of built-in error types that extend the base `Error` class. These include `TypeError`, `RangeError`, `SyntaxError`, `ReferenceError`, and others. Each has a `message` property and a `stack` trace. Using specific error types makes it easier to catch and handle different failure modes separately.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Error Object - MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error)
|
||||
- [@article@Control flow & Error handling - MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling)
|
||||
@@ -0,0 +1,10 @@
|
||||
# ESModules
|
||||
|
||||
ESModules is a standard that was introduced with ES6 (2015). The idea was to standardize how JS modules work and implement these features in browsers. This standard is widely used with frontend frameworks such as react and can also be used in the backend with Node.js. Sometimes these modules will be written with a .mjs extension.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Full ESM module overview from MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules)
|
||||
- [@article@Full ESM module overview from js.info](https://javascript.info/modules)
|
||||
- [@article@Node.js documentation for ESModules](https://nodejs.org/api/esm.html)
|
||||
- [@video@JavaScript ES6 Modules Simplified](https://www.youtube.com/watch?v=cRHQNNcYf6s)
|
||||
@@ -0,0 +1,10 @@
|
||||
# Event Loop
|
||||
|
||||
The Event Loop is one of the most important aspects to understand about Node.js. Why is this so important? Because it explains how Node.js can be asynchronous and have non-blocking I/O, it explains the "killer feature" of Node.js, which made it this successful.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@The Node.Js Event Loop](https://nodejs.org/learn/asynchronous-work/event-loop-timers-and-nexttick)
|
||||
- [@article@JavaScript Visualized: Event Loop](https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif)
|
||||
- [@video@What the heck is the event loop anyway?](https://www.youtube.com/watch?v=8aGhZQkoFbQ)
|
||||
- [@video@In the loop: JS conf 2018](https://www.youtube.com/watch?v=cCOL7MC4Pl0)
|
||||
@@ -0,0 +1,8 @@
|
||||
# Exception Handling
|
||||
|
||||
In JavaScript, all exceptions are simply objects. While the majority of exceptions are implementations of the global Error class, any old object can be thrown. With this in mind, there are two ways to throw an exception: directly via an Error object, and through a custom object. (excerpt from Rollbar)
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Throwing Exceptions in JavaScript](https://rollbar.com/guides/javascript/how-to-throw-exceptions-in-javascript)
|
||||
- [@video@try, catch, finally, throw (video)](https://youtu.be/cFTFtuEQ-10)
|
||||
@@ -0,0 +1,8 @@
|
||||
# Explicit binding
|
||||
|
||||
Explicit binding is when you use the `call` or `apply` methods to explicitly set the value of `this` in a function. Explicit Binding can be applied using `call()`, `apply()`, and `bind()`.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Explicit Binding](https://medium.com/swlh/javascript-this-ac28f8e0f65d)
|
||||
- [@article@Explicit Binding rule for this keyword](https://medium.com/@msinha2801/explicit-binding-rule-for-this-keyword-in-js-712405b0a11)
|
||||
@@ -0,0 +1,9 @@
|
||||
# Explicit Type Casting
|
||||
|
||||
Type casting means transferring data from one data type to another by explicitly specifying the type to convert the given data to. Explicit type casting is normally done to make data compatible with other variables. Examples of typecasting methods are `parseInt()`, `parseFloat()`, `toString()`.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Type Conversion](https://www.c-sharpcorner.com/article/type-conversions-in-javascript/)
|
||||
- [@article@Type conversion](https://developer.mozilla.org/en-US/docs/Glossary/Type_Conversion)
|
||||
- [@video@Data Type Conversion](https://youtu.be/VQLYiFqetZM)
|
||||
@@ -0,0 +1,7 @@
|
||||
# Expressions & Operators
|
||||
|
||||
Expressions are combinations of values, variables, and operators that evaluate to a value. Operators perform operations on values and include arithmetic, comparison, logical, assignment, and bitwise operators. Understanding operator precedence and behavior is necessary for writing correct expressions.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Expressions and operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators)
|
||||
@@ -0,0 +1,9 @@
|
||||
# Fetch
|
||||
|
||||
The `fetch()` method in JavaScript is used to request to the server and load the information on the webpages. The request can be of any APIs that return the data of the format JSON or XML. This method returns a promise.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Fetch MDN Docs](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
|
||||
- [@article@Network request - Fetch](https://javascript.info/fetch)
|
||||
- [@article@Abort a fetch request manually in JavaScript](https://www.amitmerchant.com/abort-fetch-request-manually-in-javascript/)
|
||||
@@ -0,0 +1,8 @@
|
||||
# The for loop
|
||||
|
||||
The `for` loop is a standard control-flow construct in many programming languages, including JavaScript. It's commonly used to iterate over given sequences or iterate a known number of times and execute a piece of code for each iteration.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@JavaScript for Loop - CodeGuage](https://www.codeguage.com/courses/js/loops-for-loop)
|
||||
- [@article@The for Loop - MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for)
|
||||
@@ -0,0 +1,8 @@
|
||||
# for...in loop
|
||||
|
||||
The `for...in` loop iterates over the enumerable properties of an object, including inherited ones. It is mainly used for iterating over object keys. It is not recommended for arrays because it iterates over all enumerable properties, not just numeric indexes, and does not guarantee order.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@for...in statement - MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in)
|
||||
- [@article@The for..in loop with examples](https://javascript.info/object#forin)
|
||||
@@ -0,0 +1,7 @@
|
||||
# for...of statement
|
||||
|
||||
The for...of statement executes a loop that operates on a sequence of values sourced from an iterable object. Iterable objects include instances of built-ins such as Array, String, TypedArray, Map, Set, NodeList (and other DOM collections), and the arguments object, generators produced by generator functions, and user-defined iterables.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@for...of statement - MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of)
|
||||
@@ -0,0 +1,8 @@
|
||||
# Function Borrowing
|
||||
|
||||
Function borrowing allows us to use the methods of one object on a different object without having to make a copy of that method and maintain it in two separate places. It is accomplished through the use of `.call()`, `.apply()`, or `.bind()`, all of which exist to explicitly set this on the method we are borrowing.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Function borrowing](https://medium.com/@ensallee/function-borrowing-in-javascript-4bd671e9d7b4)
|
||||
- [@article@When would I use function borrowing](https://stackoverflow.com/questions/69892281/when-would-i-use-function-borrowing)
|
||||
@@ -0,0 +1,8 @@
|
||||
# Function Parameters
|
||||
|
||||
The parameter is the name given to the variable declared inside the definition of a function. There are two special kinds of syntax: default and rest parameters.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Function Parameters](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions#function_parameters)
|
||||
- [@article@Unlimited function parameters using Rest](https://www.amitmerchant.com/unlimited-function-parameters-with-using-rest-in-java-script/)
|
||||
@@ -0,0 +1,7 @@
|
||||
# Function
|
||||
|
||||
Function scope means a variable declared inside a function is only accessible within that function. Variables declared with `var` are function-scoped. Each function call creates a new scope, so variables inside a function do not conflict with variables of the same name in other functions.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Function Scope & Block Scope in JS](https://medium.com/nerd-for-tech/function-scope-block-scope-in-js-d29c8e7cd216)
|
||||
@@ -0,0 +1,8 @@
|
||||
# Functions
|
||||
|
||||
Functions exist so we can reuse code. They are blocks of code that execute whenever they are invoked. Each function is typically written to perform a particular task, like an addition function used to find the sum of two or more numbers. When numbers need to be added anywhere within your code, the addition function can be invoked as many times as necessary.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Functions - MDN Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions)
|
||||
- [@article@JavaScript Functions in Detail - CodeGuage](https://www.codeguage.com/courses/js/functions-basics)
|
||||
@@ -0,0 +1,8 @@
|
||||
# Garbage Collection
|
||||
|
||||
Memory management in JavaScript is performed automatically and invisibly to us. We create primitives, objects, functions… All that takes memory. The main concept of memory management in JavaScript is reachability.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@JavaScript Garbage Collection](https://javascript.info/garbage-collection)
|
||||
- [@article@Memory Management in JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management)
|
||||
@@ -0,0 +1,7 @@
|
||||
# Global
|
||||
|
||||
Global scope refers to variables declared outside any function or block, making them accessible from anywhere in the program. In browsers, global variables become properties of the `window` object. Overusing global variables is discouraged because it increases the risk of naming conflicts and makes code harder to maintain.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Scope in JavaScript – Global vs Local vs Block Scope Explained](https://www.freecodecamp.org/news/scope-in-javascript-global-vs-local-vs-block-scope/)
|
||||
@@ -0,0 +1,8 @@
|
||||
# History of JavaScript
|
||||
|
||||
JavaScript was initially created by Brendan Eich of NetScape and was first announced in a press release by Netscape in 1995. It has a bizarre history of naming; initially, it was named Mocha by the creator, which was later renamed LiveScript. In 1996, about a year later after the release, NetScape decided to rename it to JavaScript with hopes of capitalizing on the Java community (although JavaScript did not have any relationship with Java) and released Netscape 2.0 with the official support of JavaScript.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Brief History of JavaScript](https://roadmap.sh/guides/history-of-javascript)
|
||||
- [@article@The Weird History of JavaScript](https://dev.to/codediodeio/the-weird-history-of-javascript-2bnb)
|
||||
@@ -0,0 +1,9 @@
|
||||
# Hoisting
|
||||
|
||||
Hoisting is JavaScript's behavior of moving variable and function declarations to the top of their containing scope before code execution. Variables declared with `var` are hoisted and initialized as `undefined`. Function declarations are fully hoisted, meaning they can be called before they appear in the source code. `let` and `const` are hoisted but not initialized, resulting in a temporal dead zone.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@What is Hoisting - MDN Docs](https://developer.mozilla.org/en-US/docs/Glossary/Hoisting)
|
||||
- [@article@Understanding Hoisting](https://www.digitalocean.com/community/tutorials/understanding-hoisting-in-javascript)
|
||||
- [@video@Learn JavaScript Hoisting In 5 Minutes](https://www.youtube.com/watch?v=EvfRXyKa_GI)
|
||||
@@ -0,0 +1,9 @@
|
||||
# How to run JavaScript
|
||||
|
||||
JavaScript can be run directly in a browser's developer console, embedded in an HTML page using a `<script>` tag, or executed on the server with Node.js. For development, tools like VS Code with a live server extension or online environments like CodePen and JSFiddle make it easy to write and run JavaScript immediately.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@How To Add JavaScript to HTML](https://www.digitalocean.com/community/tutorials/how-to-add-javascript-to-html)
|
||||
- [@article@How To Write Your First JavaScript Program](https://www.digitalocean.com/community/tutorials/how-to-write-your-first-javascript-program)
|
||||
- [@article@How To Use the JavaScript Developer Console](https://www.digitalocean.com/community/tutorials/how-to-use-the-javascript-developer-console)
|
||||
@@ -0,0 +1,8 @@
|
||||
# if...else
|
||||
|
||||
The `if...else` statement executes a block of code if a condition is true, and an optional `else` block if it is false. Additional conditions can be checked with `else if`. It is the most basic form of conditional logic in JavaScript.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@if...else - MDN docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else)
|
||||
- [@article@Conditional branching: if, ? - javascript.info](https://javascript.info/ifelse)
|
||||
@@ -0,0 +1,8 @@
|
||||
# IIFEs
|
||||
|
||||
An IIFE (Immediately Invoked Function Expression) is a function that is defined and called at the same time. It is written as `(function() { ... })()` or `(() => { ... })()`. IIFEs are used to create a private scope, avoiding polluting the global namespace, and were common before ES6 modules.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@IIFE — MDN Docs](https://developer.mozilla.org/en-US/docs/Glossary/IIFE)
|
||||
- [@article@JavaScript in Plain English - IIFE](https://javascript.plainenglish.io/https-medium-com-javascript-in-plain-english-stop-feeling-iffy-about-using-an-iife-7b0292aba174)
|
||||
@@ -0,0 +1,8 @@
|
||||
# Implicit Type Casting
|
||||
|
||||
Implicit type conversion happens when the compiler or runtime automatically converts data types. JavaScript is loosely typed language and most of the time operators automatically convert a value to the right type.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@TutorialsPoint - JavaScript Tutorials](https://www.tutorialspoint.com/explain-typecasting-in-javascript)
|
||||
- [@article@What you need to know about JavaScript Implicit Coercion](https://dev.to/promisetochi/what-you-need-to-know-about-javascripts-implicit-coercion-e23)
|
||||
@@ -0,0 +1,3 @@
|
||||
# in a method
|
||||
|
||||
When a function is called as a method of an object, `this` refers to the object before the dot. For example, in `user.greet()`, `this` inside `greet` refers to `user`. This is the most intuitive use of `this`.
|
||||
@@ -0,0 +1,7 @@
|
||||
# this in a method
|
||||
|
||||
Methods are properties of an object which are functions. The value of this inside a method is equal to the calling object. In simple words, this value is the object “before dot”, the one used to call the method.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@this in methods](https://javascript.info/object-methods#this-in-methods)
|
||||
@@ -0,0 +1,7 @@
|
||||
# in arrow functions
|
||||
|
||||
Arrow functions do not have their own `this` binding. Instead, they inherit `this` from the lexical scope where they were defined. This makes arrow functions predictable in callbacks and event handlers where regular functions would lose their intended `this` context.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@this keyword and arrow function](https://stackoverflow.com/questions/66518020/javascript-this-keyword-and-arrow-function)
|
||||
@@ -0,0 +1,3 @@
|
||||
# in event handlers
|
||||
|
||||
In an event handler attached to a DOM element, `this` refers to the element that received the event. For example, in a click handler, `this` is the button or element that was clicked. Arrow functions do not have their own `this`, so they inherit it from the surrounding scope instead.
|
||||
@@ -0,0 +1,9 @@
|
||||
# Indexed collections
|
||||
|
||||
Indexed Collections are collections that have numeric indices i.e. the collections of data that are ordered by an index value. In JavaScript, an array is an indexed collection. An array is an ordered set of values that has a numeric index.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@What is Indexed collections?](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Indexed_collections)
|
||||
- [@article@Indexed collections in JavaScript](https://www.tutorialspoint.com/indexed-collections-in-javascript)
|
||||
- [@video@Javascript Arrays](https://youtu.be/XYq9QpgAx8g)
|
||||
@@ -0,0 +1,10 @@
|
||||
# Introduction to JavaScript
|
||||
|
||||
JavaScript is a high-level, interpreted programming language created to add interactivity to web pages. It runs in the browser and, with Node.js, on the server as well. JavaScript is the only language that runs natively in web browsers, making it the foundation of frontend web development.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@opensource@You Don't Know JS Yet (book series)](https://github.com/getify/You-Dont-Know-JS)
|
||||
- [@article@JavaScript MDN Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
|
||||
- [@article@The Modern JavaScript Tutorial](https://javascript.info/)
|
||||
- [@video@JavaScript Crash Course for Beginners](https://youtu.be/hdI2bqOjy3c?t=2)
|
||||
@@ -0,0 +1,8 @@
|
||||
# isLooselyEqual
|
||||
|
||||
The abstract equality comparison (loose equality) is the algorithm behind the `==` operator. It defines the rules for how values of different types are coerced before comparison. For example, `null == undefined` is `true`, but `null == 0` is `false`. Understanding this algorithm explains many of JavaScript's surprising equality behaviors.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Loosely Equality (==) Operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Equality)
|
||||
- [@article@Comparison - javascript.info](https://javascript.info/comparison)
|
||||
@@ -0,0 +1,8 @@
|
||||
# isStrictlyEqual
|
||||
|
||||
The strict equality comparison is the algorithm behind the `===` operator. It returns `false` if the types differ, without any coercion. For the same type, it compares values directly, with the exception that `NaN === NaN` is `false`.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Strictly Equality (===) Operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Strict_equality)
|
||||
- [@article@Comparison - javascript.info](https://javascript.info/comparison)
|
||||
@@ -0,0 +1,9 @@
|
||||
# Javascript Iterators and Generators
|
||||
|
||||
Iterators and generators, introduced into JavaScript with ECMAScript 6, represent an extremely useful concept related to iteration in the language. Iterators are objects, abiding by the iterator protocol, that allows us to easily iterate over a given sequence in various ways, such as using the `for...of` loop. Generators, on the other hand, allow us to use functions and the `yield` keyword to easily define iterable sequences that are iterators as well.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Introduction to Iterators - Advanced JavaScript](https://www.codeguage.com/courses/advanced-js/iteration-introduction)
|
||||
- [@article@A Detailed Discussion on Iterators - Advanced JavaScript](https://www.codeguage.com/courses/advanced-js/iteration-iterators)
|
||||
- [@article@What Exactly Are Generators? - Advanced JavaScript](https://www.codeguage.com/courses/advanced-js/iteration-generators)
|
||||
@@ -0,0 +1,8 @@
|
||||
# Javascript Versions
|
||||
|
||||
JavaScript, invented by Brendan Eich, achieved the status of an ECMA standard in 1997 and adopted the official name ECMAScript. This language has evolved through several versions, namely ES1, ES2, ES3, ES5, and the transformative ES6. These updates have played a crucial role in improving and standardizing JavaScript, making it widely used and valuable in the ever-changing field of web development.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@JavaScript Versions: How JavaScript has changed over the years](https://www.educative.io/blog/javascript-versions-history)
|
||||
- [@article@Brief History of JavaScript](https://roadmap.sh/guides/history-of-javascript)
|
||||
@@ -0,0 +1,8 @@
|
||||
# JSON
|
||||
|
||||
JavaScript Object Notation (JSON) is a standard text-based format for representing structured data based on JavaScript object syntax. It is commonly used for transmitting data in web applications (e.g., sending some data from the server to the client, so it can be displayed on a web page, or vice versa).
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Working with JSON](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/JSON)
|
||||
- [@video@JSON Tutorial for Beginners](https://www.youtube.com/watch?v=iiADhChRriM)
|
||||
@@ -0,0 +1,9 @@
|
||||
# Keyed Collections
|
||||
|
||||
Keyed collections are data structures that store values indexed by keys. In JavaScript, `Map` and `WeakMap` are keyed collections that allow any value, including objects and functions, to be used as a key. Unlike plain objects, Maps maintain insertion order and provide methods like `get()`, `set()`, and `has()`.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Keyed collections](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Keyed_collections)
|
||||
- [@article@ES6 keyed collections- Maps and sets](https://blog.logrocket.com/es6-keyed-collections-maps-and-sets/)
|
||||
- [@video@Creating keyed collection](https://youtu.be/4UqSqF4foy4)
|
||||
@@ -0,0 +1,8 @@
|
||||
# let
|
||||
|
||||
`let` declares a block-scoped variable that can be reassigned after declaration. Unlike `var`, it is limited to the block, statement, or expression where it is defined. `let` is the standard choice when a variable's value needs to change over time.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@let keyword - MDN Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let)
|
||||
- [@article@JavaScript Variables](https://javascript.info/variables)
|
||||
@@ -0,0 +1,8 @@
|
||||
# Lexical scoping
|
||||
|
||||
Before one can make an intuition of closures in JavaScript, it's important to first get the hang of the term '**_lexical environment_**'. In simple words, the lexical environment for a function `f` simply refers to the environment enclosing that function's definition in the source code.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@What is a lexical environment? - JavaScript - CodeGuage](https://www.codeguage.com/courses/js/functions-closures#What_is_a_lexical_environment)
|
||||
- [@article@Lexical scoping - JavaScript - MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures#lexical_scoping)
|
||||
@@ -0,0 +1,7 @@
|
||||
# Logical Operators
|
||||
|
||||
Logical operators combine or invert boolean expressions. The main logical operators are `&&` (AND), `||` (OR), and `!` (NOT). In JavaScript, `&&` and `||` return one of their operands rather than a strict boolean, which makes them useful for short-circuit evaluation and default value patterns.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Logical Operators - MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#binary_logical_operators)
|
||||
@@ -0,0 +1,7 @@
|
||||
# Loops and Iterations
|
||||
|
||||
Loops and iterations allow code to execute repeatedly based on a condition or over a collection of values. JavaScript provides several loop constructs for different use cases: `while`, `do...while`, `for`, `for...in`, and `for...of`. Choosing the right loop depends on what is being ite
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration)
|
||||
@@ -0,0 +1,8 @@
|
||||
# Map
|
||||
|
||||
A `Map` is a keyed collection that stores key-value pairs and remembers insertion order. Unlike plain objects, Map keys can be of any type, including objects and functions. Maps are preferred over plain objects when keys are dynamic or when the order of entries matters.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Map - Keyed Collections](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map)
|
||||
- [@article@Map Data Type](https://javascript.info/map-set#map)
|
||||
@@ -0,0 +1,8 @@
|
||||
# Memory Lifecycle
|
||||
|
||||
The memory lifecycle has three stages: allocation (memory is reserved when a value is created), use (memory is read and written during execution), and release (memory is freed when it is no longer reachable). In JavaScript, allocation happens implicitly, and release is handled by the garbage collector.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@MDN docs - Memory Management](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management)
|
||||
- [@article@Lifecycle in Memory Management](https://medium.com/swlh/the-lifecycle-of-memory-in-javascript-5b5bffc5ff4c)
|
||||
@@ -0,0 +1,8 @@
|
||||
# Memory Management
|
||||
|
||||
Low-level languages like C, have manual memory management primitives such as `malloc()` and `free()`. In contrast, JavaScript automatically allocates memory when objects are created and frees it when they are not used anymore (garbage collection). This automaticity is a potential source of confusion: it can give developers the false impression that they don't need to worry about memory management.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@JavaScript Garbage Collection](https://javascript.info/garbage-collection)
|
||||
- [@article@Memory Management in JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management)
|
||||
@@ -0,0 +1,9 @@
|
||||
# Modules
|
||||
|
||||
Modules encapsulate all sorts of code like functions and variables and expose all this to other files. Generally, we use it to break our code into separate files to make it more maintainable. They were introduced into JavaScript with ECMAScript 6.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Modules, introduction](https://javascript.info/modules-intro)
|
||||
- [@article@Export and Import](https://javascript.info/import-export)
|
||||
- [@article@Dynamic imports](https://javascript.info/modules-dynamic-imports)
|
||||
@@ -0,0 +1,8 @@
|
||||
# null
|
||||
|
||||
`null` is a primitive value that explicitly represents the absence of any value or object. It is typically used to indicate that a variable intentionally holds no value. `typeof null` returns `"object"`, which is a known quirk of the language from its original implementation.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@What is null in JavaScript](https://www.altcademy.com/blog/what-is-null-in-javascript/)
|
||||
- [@article@null in JavaScript](https://masteringjs.io/tutorials/fundamentals/null)
|
||||
@@ -0,0 +1,7 @@
|
||||
# number
|
||||
|
||||
The `number` type represents both integers and floating-point values in JavaScript. It uses the IEEE 754 double-precision format, which means all numbers are stored as floats. Special values include `Infinity`, `-Infinity`, and `NaN` (Not a Number), which result from certain arithmetic operations.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Number - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)
|
||||
@@ -0,0 +1,10 @@
|
||||
# Prototypes
|
||||
|
||||
JavaScript is an object-oriented language built around a prototype model. In JavaScript, every object inherits properties from its prototype, if there are any. A prototype is simply an object from which another object inherits properties. To create complex programs using JavaScript, one has to be proficient in working with prototypes — they form the very core of OOP in the language.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Prototypes in JavaScript - A Comprehensive Guide](https://www.codeguage.com/courses/js/objects-prototypes)
|
||||
- [@article@Prototypes, Inheritance](https://javascript.info/prototypes)
|
||||
- [@article@Object prototypes - MDN](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object_prototypes)
|
||||
- [@video@Prototype in Javascript - Object Prototype](https://www.youtube.com/watch?v=583MGxjypgU)
|
||||
@@ -0,0 +1,9 @@
|
||||
# Object
|
||||
|
||||
JavaScript object is a data structure that allows us to have key-value pairs; so we can have distinct keys and each key is mapped to a value that can be of any JavaScript data type. Comparing it to a real-world object, a pen is an object with several properties such as color, design, the material it is made of, etc. In the same way, JavaScript objects can have properties that define their characteristics.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Objects](https://javascript.info/object)
|
||||
- [@article@Working with Objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects)
|
||||
- [@article@Destructuring Objects](https://javascript.info/destructuring-assignment)
|
||||
@@ -0,0 +1,7 @@
|
||||
# Object.is
|
||||
|
||||
`Object.is()` is a method for comparing two values with stricter behavior than `===`. It handles two edge cases differently: `Object.is(NaN, NaN)` returns `true` (while `NaN === NaN` is `false`), and `Object.is(+0, -0)` returns `false` (while `+0 === -0` is `true`). It is useful when exact value identity is needed.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Object.is() - MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is)
|
||||
@@ -0,0 +1,8 @@
|
||||
# Promises
|
||||
|
||||
Promises are a much better way to work with asynchronous code in JavaScript than the old and error-prone callback approach. They were introduced into JavaScript with ECMAScript 6. Using promises, we can manage extremely complex asynchronous code with rigorous error-handling setup, write code in a more or less synchronous style, and keep ourselves from running into the so-called callback hell.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@A Detailed Introduction to Promises](https://www.codeguage.com/courses/advanced-js/promises-introduction)
|
||||
- [@video@JavaScript Promises - Visualized](https://youtu.be/Xs1EMmBLpn4)
|
||||
@@ -0,0 +1,8 @@
|
||||
# Prototypal Inheritance
|
||||
|
||||
The Prototypal Inheritance is a feature in javascript used to add methods and properties in objects. It is a method by which an object can inherit the properties and methods of another object. Traditionally, in order to get and set the Prototype of an object, we use Object.getPrototypeOf and Object.setPrototypeOf.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@JavaScript MDN Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain)
|
||||
- [@article@Prototype Inheritance](https://javascript.info/prototype-inheritance)
|
||||
@@ -0,0 +1,9 @@
|
||||
# Recursion
|
||||
|
||||
One of the most powerful and elegant concept of functions, recursion is when a function invokes itself. Such a function is called a **_recursive function_**. As recursion happens, the underlying code of the recursive function gets executed again and again until a terminating condition, called the _base case_, gets fulfilled. As you dive into the world of algorithms, you'll come across recursion in many many instances.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Recursion and Stack](https://javascript.info/recursion)
|
||||
- [@article@JavaScript Function Recursions - CodeGuage](https://www.codeguage.com/courses/js/functions-recursions)
|
||||
- [@article@Recursion - MDN](https://developer.mozilla.org/en-US/docs/Glossary/Recursion)
|
||||
@@ -0,0 +1,7 @@
|
||||
# Rest
|
||||
|
||||
The rest parameter syntax allows a function to accept an indefinite number of arguments as an array. It is defined by prefixing the last parameter with `...`, such as `function sum(...numbers)`. Unlike the `arguments` object, rest parameters are a true array and work with arrow functions.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Rest Parameters - MDN Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters)
|
||||
@@ -0,0 +1,7 @@
|
||||
# SameValue
|
||||
|
||||
SameValue is the equality algorithm used by `Object.is()`. It is the strictest equality comparison in JavaScript: it returns `true` only when two values are identical, treating `NaN` as equal to `NaN` and `+0` as not equal to `-0`. It is used in a few specific internal operations.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Same-value equality using Object.is()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness#same-value_equality_using_object.is)
|
||||
@@ -0,0 +1,7 @@
|
||||
# SameValueZero
|
||||
|
||||
SameValueZero is an equality algorithm used internally by JavaScript in methods like `Array.prototype.includes()` and `Map` key comparison. It behaves like `===` but treats `NaN` as equal to itself. Unlike `SameValue`, it considers `+0` and `-0` as equal.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Same-value-zero equality](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness#same-value-zero_equality)
|
||||
@@ -0,0 +1,8 @@
|
||||
# Scope & Function Stack
|
||||
|
||||
The function stack (call stack) is the mechanism that tracks the execution of function calls. Each time a function is called, a new frame is pushed onto the stack; when it returns, the frame is popped. Scope determines which variables are accessible at each point in the call stack, and closures preserve access to variables from outer scopes.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Function stack (call stack) - MDN](https://developer.mozilla.org/en-US/docs/Glossary/Call_stack)
|
||||
- [@article@Kinds of Scope - MDN](https://developer.mozilla.org/en-US/docs/Glossary/Scope)
|
||||
@@ -0,0 +1,7 @@
|
||||
# Set
|
||||
|
||||
A `Set` is a collection of unique values with no duplicates. Values in a Set can be of any type, and the Set maintains insertion order. Sets are useful for deduplicating arrays and checking membership efficiently.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Set - JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set)
|
||||
@@ -0,0 +1,7 @@
|
||||
# setInterval
|
||||
|
||||
`setInterval()` repeatedly executes a function at a specified interval in milliseconds. It continues until `clearInterval()` is called with the returned ID. It is used for polling, animations, and periodic tasks, though `requestAnimationFrame` is preferred for visual updates.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Scheduling: setTimeout and setInterval](https://javascript.info/settimeout-setinterval)
|
||||
@@ -0,0 +1,9 @@
|
||||
# setTimeout
|
||||
|
||||
`setTimeout()` schedules a function to run after a specified delay in milliseconds. It is asynchronous: the rest of the code continues executing while the timer runs. It returns an ID that can be used with `clearTimeout()` to cancel the scheduled execution.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@JavaScript MDN Docs](https://developer.mozilla.org/en-US/docs/Web/API/setTimeout)
|
||||
- [@video@setInterval and setTimeout: timing events](https://www.youtube.com/watch?v=kOcFZV3c75I)
|
||||
- [@video@Learn JavaScript setTimeout() in 6 minutes!](https://www.youtube.com/watch?v=shWr5DNVeCI)
|
||||
@@ -0,0 +1,8 @@
|
||||
# Strict Mode
|
||||
|
||||
Strict mode is an opt-in variant of JavaScript that enforces stricter parsing and error handling. It is enabled by adding `"use strict"` at the top of a file or function. Strict mode prevents the use of undeclared variables, disallows duplicate parameter names, and makes `this` undefined in functions called without a context, among other restrictions.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Strict mode](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode)
|
||||
- [@article@Strict mode in JavaScript](https://javascript.info/strict-mode)
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user