Improved JavaScript Roadmap (#6779)

* - Fixed Spacing and EOL.
- Fixed Wrong Spellings.
- Improved Examples.

* ## Adding Content for :

- Add `apply()`
- Add `bind()`
- Add `call()`
pull/6823/head^2
Vedansh 2 months ago committed by GitHub
parent 90486c2369
commit 5c2cc7a6da
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
  1. 5
      src/data/roadmaps/javascript/content/@lJwcc6JoUIQoiQ6FkV2KW.md
  2. 13
      src/data/roadmaps/javascript/content/apply@-BtF34cEzI6J8sZCDRlRE.md
  3. 8
      src/data/roadmaps/javascript/content/arrow-functions@fr0NChxMXLpJizyMhXcXS.md
  4. 8
      src/data/roadmaps/javascript/content/bind@dbercnxXVTJXMpYSDNGb2.md
  5. 4
      src/data/roadmaps/javascript/content/call@gsyY3Oa3Jf0W5K_lyqBYO.md
  6. 2
      src/data/roadmaps/javascript/content/callback-hell@PJSdqvh5OBwPCNpn3q_S5.md
  7. 2
      src/data/roadmaps/javascript/content/callbacks@D8oGY7pdviRByaz6c9sU6.md
  8. 2
      src/data/roadmaps/javascript/content/commonjs@4EXeGkOpfAViB9Uo4zL6O.md
  9. 2
      src/data/roadmaps/javascript/content/conditional-operators@640mk-m5mB90Mme-7jcXV.md
  10. 2
      src/data/roadmaps/javascript/content/const@q85z6x1Lc-yLWepwtIT2_.md
  11. 2
      src/data/roadmaps/javascript/content/debugging-memory-leaks@BA_ArmZMnVMaL_zl3W3Pt.md
  12. 2
      src/data/roadmaps/javascript/content/debugging-performance@ECxISKUAU7js_JsfSHzud.md
  13. 2
      src/data/roadmaps/javascript/content/dom-apis@bhuGtcyqPFKu-900aESYz.md
  14. 22
      src/data/roadmaps/javascript/content/error-objects@-z-4VTaC3tOThqChgyoMs.md
  15. 2
      src/data/roadmaps/javascript/content/fetch@kL5rfWxXe4J44ENru1uJS.md
  16. 4
      src/data/roadmaps/javascript/content/global@oC4o6GLEES_nUgCJu9Q6I.md
  17. 2
      src/data/roadmaps/javascript/content/hoisting@Lb5jLF91WO5V5CWpifciW.md
  18. 2
      src/data/roadmaps/javascript/content/how-to-run-javascript@uXsWIUUxtc4H_iRx3uZv0.md
  19. 14
      src/data/roadmaps/javascript/content/iifes@YZlCoPvZuX5MmpLOTj5d4.md
  20. 2
      src/data/roadmaps/javascript/content/implicit-type-casting@pP42K_eH4RCdUdUS8BJlP.md
  21. 2
      src/data/roadmaps/javascript/content/introduction-to-javascript@6khAD6mzZ9S96JJuC5_j6.md
  22. 2
      src/data/roadmaps/javascript/content/loops-and-iterations@YD-2l_amfqqqCdtc_Zdzo.md
  23. 2
      src/data/roadmaps/javascript/content/null@CxyNyFMuTLS3owtRMgClD.md
  24. 5
      src/data/roadmaps/javascript/content/number@GZ_SXsWmP7AsXRTc4WUMw.md
  25. 1
      src/data/roadmaps/javascript/content/objectis@ATma3bLKdmWY_WTsPIKxh.md
  26. 2
      src/data/roadmaps/javascript/content/settimeout@wXypuqEmFLIubx-QQvDIr.md
  27. 6
      src/data/roadmaps/javascript/content/typeof-operator@RRACLQ6-aopkxImIp3Toc.md
  28. 7
      src/data/roadmaps/javascript/content/using-browser-devtools@rc5WzBBOm2cus-rQl8EOE.md

@ -1,12 +1,17 @@
# Strict Equality Operator (===)
In JavaScript, the strict equality operator `===` compares both the value and the type of two operands. This means that it will only return true if both the value and the type are identical.
```sh
"5" === "5" // true
```
In this case, both the value and the type are the same, so the result is true.
```sh
"5" === 5 // false
```
Here, although the values might appear similar, the types are different (string and number), so the result is false. The strict equality operator does not perform type coercion; both the value and the type must be identical.
Learn more from the following resources:

@ -2,19 +2,6 @@
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).
```js
const numbers = [5, 6, 2, 3, 7];
const max = Math.max.apply(null, numbers);
console.log(max);
// Expected output: 7
const min = Math.min.apply(null, numbers);
console.log(min);
// Expected output: 2
```
Visit the following resources to learn more:
- [@official@apply() - MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply)

@ -2,6 +2,14 @@
Arrow Function is a new way of creating functions with the '=>' operator with a shorter syntax.
## Example
```js
const sayHello = () => {
console.log(`Hello from Arrow Function !`);
}
```
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)

@ -1 +1,7 @@
# bind
# bind()
`bind()` method creates a new function with a fixed this value.
Visit the following resources to learn more:
- [@article@Bind Method - MDN Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind)

@ -1,7 +1,7 @@
# call()
The `call()` method allows you to invoke a function with a given `this` value, and arguments provided individually.
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@Understanding Explicit Binding in JavaScript: Call, Bind, and Apply Methods](https://medium.com/@amitsharma_24072/understanding-explicit-binding-in-javascript-call-bind-and-apply-methods-7b6ed0107628)
- [@article@Call Method - MDN Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call)

@ -1,6 +1,6 @@
# 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.
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:

@ -6,4 +6,4 @@ 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)
- [@article@W3School CallBack Function](https://www.w3schools.com/js/js_callback.asp)
- [@article@W3School CallBack Function](https://www.w3schools.com/js/js_callback.asp)

@ -1,6 +1,6 @@
# 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 runtimes, but CJS is still widely used in backend Node.js applications. Sometimes these modules will be written with a .cjs extension.
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:

@ -6,7 +6,7 @@ The operator can have one of two values based on a condition.
Syntax:
`condition ? val_for_true : val_for_false `
`condition ? val_for_true : val_for_false`
Visit the following resources to learn more:

@ -1,6 +1,6 @@
# [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 redeclared (i.e. through a variable declaration). However, if a constant is an object or array its properties or items can be updated or removed.
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:

@ -5,7 +5,7 @@ In JavaScript, memory leaks commonly occur within heap allocated memory, where s
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@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)
- [@article@Debugging Memory Leaks In Production JavaScript Applications](https://www.jackhoy.com/web-applications/2020/10/21/debugging-memory-leaks-in-nodejs.html)
- [@video@JavaScript Memory Leaks Visualized and How To Fix Them](https://youtu.be/IkoGmbNJolo)

@ -1,6 +1,6 @@
# Debugging performance
Enter the dev tools and check out the Lighthouse tab. This is essentially a series of tests which 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 **Analyse 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!)
Enter the dev tools and check out the Lighthouse tab. This is essentially a series of tests which 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:

@ -1,6 +1,6 @@
# 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 inteface for the web. All browsers have a set og built-in Web APIs to support complex operations, and to help accessing data. Like Geolocation API, Web Storage, Web History and others.
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:

@ -2,16 +2,16 @@
When a runtime error occurs, a new `Error` object is created and thrown. With this `Error` object, we can determine the type of the Error and handle it according to its type.
## Types of Errors:
## Types of Errors
Besides error constructors, Javascript also has other core Error constructors.
Besides error constructors, Javascript also has other core Error constructors. Like
- [@article@AggregateError](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/AggregateError)
- [@article@EvalError](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/EvalError)
- [@article@InternalError](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/InternalError)
- [@article@RangeError](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RangeError)
- [@article@ReferenceError](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError)
- [@article@SyntaxError](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError)
- AggregateError - A collection of errors thrown simultaneously.
- EvalError - An error occurred during the evaluation of a JavaScript expression.
- InternalError - An internal JavaScript error, often indicating a bug in the engine.
- RangeError - A value is outside the allowed range for a given operation.
- ReferenceError - A variable or object is referenced before it's declared or doesn't exist.
- SyntaxError - The code contains incorrect syntax, preventing it from being parsed.
## Example
@ -33,3 +33,9 @@ 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)
- [@article@AggregateError](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/AggregateError)
- [@article@EvalError](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/EvalError)
- [@article@InternalError](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/InternalError)
- [@article@RangeError](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RangeError)
- [@article@ReferenceError](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError)
- [@article@SyntaxError](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError)

@ -1,6 +1,6 @@
# 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.
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:

@ -2,9 +2,9 @@
Variables declared Globally (outside any function) have Global Scope. Global variables can be accessed from anywhere in a JavaScript program. Variables declared with `var`, `let` and `const` are quite similar when declared outside a block.
### Note:
## Note
If you assign a value to a variable that has not been declared i.e `potato = true`
If you assign a value to a variable that has not been declared i.e `potato = true`
it will automatically become a _GLOBAL_ variable.
Visit the following resources to learn more:

@ -5,5 +5,5 @@ JavaScript Hoisting refers to the process whereby the interpreter appears to mov
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)
- [@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)

@ -1,4 +1,4 @@
# How to run Javascript
# How to Run Javascript
JavaScript can be run in the browser by including the external script file using the `script` tag, writing it within the HTML page using the `script` tag again, running it in the browser console or you can also use [REPL](https://www.digitalocean.com/community/tutorials/how-to-use-the-node-js-repl).

@ -2,6 +2,20 @@
Immediately-Invoked Function Expression is a function that is executed immediately after it is created.
## Example
```js
// An Async IIFE
( async() => {
const x = 1;
const y = 9;
console.log(`Hello, The Answer is ${x+y}`);
})();
```
Visit the following resources to learn more:
- [@article@IIFE — MDN Docs](https://developer.mozilla.org/en-US/docs/Glossary/IIFE)

@ -6,4 +6,4 @@ Visit the following resources to learn more:
- [@article@W3Schools - JavaScript Tutorials](https://www.w3schools.com/js/js_type_conversion.asp)
- [@article@TutorialsPoint - JavaScript Tutorials](https://www.tutorialspoint.com/explain-typecasting-in-javascript)
- [@article@What you need to know about Javascripts Implicit Coercion](https://dev.to/promisetochi/what-you-need-to-know-about-javascripts-implicit-coercion-e23)
- [@article@What you need to know about JavaScript Implicit Coercion](https://dev.to/promisetochi/what-you-need-to-know-about-javascripts-implicit-coercion-e23)

@ -9,7 +9,7 @@ Visit the following resources to learn more:
- [@article@The Modern JavaScript Tutorial](https://javascript.info/)
- [@article@Exploring JS: JavaScript books for programmers](https://exploringjs.com/)
- [@article@Eloquent JavaScript textbook](https://eloquentjavascript.net/)
- [@opensource@You Dont Know JS Yet (book series)](https://github.com/getify/You-Dont-Know-JS)
- [@opensource@You Don't Know JS Yet (book series)](https://github.com/getify/You-Dont-Know-JS)
- [@video@JavaScript Crash Course for Beginners](https://youtu.be/hdI2bqOjy3c?t=2)
- [@video@Build a Netflix Landing Page Clone with HTML, CSS & JS](https://youtu.be/P7t13SGytRk?t=22)
- [@feed@Explore top posts about JavaScript](https://app.daily.dev/tags/javascript?ref=roadmapsh)

@ -4,7 +4,7 @@ Loops offer a quick and easy way to do something repeatedly.
You can think of a loop as a computerized version of the game where you tell someone to take X steps in one direction, then Y steps in another. For example, the idea "Go five steps to the east" could be expressed this way as a loop:
```
```js
for (let step = 0; step < 5; step++) {
// Runs 5 times, with values of step 0 through 4.
console.log('Walking east one step');

@ -9,4 +9,4 @@ In essence, `null` is a way to reset a variable, signalling that it should not r
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)
- [@article@null in JavaScript](https://masteringjs.io/tutorials/fundamentals/null)

@ -2,8 +2,9 @@
The `Number` data type in JavaScript represents floating-point numbers, such as 37 or -9.25. The `Number` constructor provides constants and methods to work with numbers, and values of other types can be converted to numbers using the `Number()` function.
### Example
```JS
## Example
```js
let num1 = 255; // integer
let num2 = 255.0; // floating-point number with no fractional part
let num3 = 0xff; // hexadecimal notation

@ -16,6 +16,7 @@ const obj = {};
console.log(Object.is(obj, {}));
// Expected output: false
```
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)

@ -7,4 +7,4 @@ Visit the following resources to learn more:
- [@article@JavaScript MDN Docs](https://developer.mozilla.org/en-US/docs/Web/API/setTimeout)
- [@article@W3Schools – JavaScript - setTimeOut](https://www.w3schools.com/jsref/met_win_settimeout.asp)
- [@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)
- [@video@Learn JavaScript setTimeout() in 6 minutes!](https://www.youtube.com/watch?v=shWr5DNVeCI)

@ -1,8 +1,8 @@
# TypeOf Operator
# `typeof` Operator
You can use the typeOf operator to find the data type of a JavaScript variable. It returns a string indicating the type of provided operand's value.
Visit the following resources to learn more:
- [@article@Typeof Reference](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof)
- [@article@Typeof Live Examples](https://www.w3schools.com/js/tryit.asp?filename=tryjs_typeof_all)
- [@article@typeof Reference](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof)
- [@article@typeof Live Examples](https://www.w3schools.com/js/tryit.asp?filename=tryjs_typeof_all)

@ -1,12 +1,13 @@
# Javascript chrome dev tools
# JavaScript Chrome Dev Tools
These are a set of tools built into the browser to aid frontend developers diagnose and solve various issues in their applications — such as JavaScript and logical bugs, CSS styling issues or even just making quick temporary alterations to the DOM.
To enter the dev tools, right click and click **Inspect** (or press `ctrl+shift+c`/`cmd+opt+c`) to enter the Elements panel. Here you can debug CSS and HTML issues. If you want to see logged messages or interact with javascript, enter the **Console** tab from the tabs above (or press `ctrl+shift+j` or `F12` /`cmd+opt+j` to enter it directly). Another very useful feature in the Chrome dev tools is the Lighthouse (for checking performance).
To enter the dev tools, right click and click **Inspect** (or press `ctrl+shift+c`/`cmd+opt+c`) to enter the Elements panel. Here you can debug CSS and HTML issues. If you want to see logged messages or interact with javascript, enter the **Console** tab from the tabs above (or press `ctrl+shift+j` or `F12` / `cmd+opt+j` to enter it directly). Another very useful feature in the Chrome dev tools is the Lighthouse (for checking performance).
NOTE: This isn't a chrome-specific feature, and most browsers (Chromium based or otherwise) will have their own, largely-similar set of devtools.
Visit the following resources to learn more:
- [@article@Official Docs](https://developer.chrome.com/docs/devtools/overview/)
- [@official@Official Docs](https://developer.chrome.com/docs/devtools/)
- [@official@Debug JavaScript with Chrome Dev Tools](https://developer.chrome.com/docs/devtools/javascript/)
- [@feed@Explore top posts about JavaScript](https://app.daily.dev/tags/javascript?ref=roadmapsh)

Loading…
Cancel
Save