mirror of
https://github.com/kamranahmedse/developer-roadmap.git
synced 2025-08-29 20:21:50 +02:00
Added content to Javascript This keyword (#1990)
* blank spaces removed in existing files * Added content to javascript this keyword * Update content/roadmaps/106-javascript/content/111-javascript-this-keyword/100-function-borrowing.md * Update content/roadmaps/106-javascript/content/111-javascript-this-keyword/100-function-borrowing.md * Update content/roadmaps/106-javascript/content/111-javascript-this-keyword/100-function-borrowing.md * Update content/roadmaps/106-javascript/content/111-javascript-this-keyword/102-this-in-a-function.md * Update content/roadmaps/106-javascript/content/111-javascript-this-keyword/103-using-this-alone.md * Update content/roadmaps/106-javascript/content/111-javascript-this-keyword/104-this-in-event-handlers.md * Update content/roadmaps/106-javascript/content/111-javascript-this-keyword/105-this-in-arrow-functions.md Co-authored-by: Kamran Ahmed <kamranahmed.se@gmail.com>
This commit is contained in:
Ryan Souza
GitHub
@@ -1,6 +1,6 @@
|
||||
# What is JavaScript?
|
||||
|
||||
JavaScript, often abbreviated JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS. It lets us add interactivity to pages e.g. you might have seen sliders, alerts, click interactions, popups, etc on different websites -- all of that is built using JavaScript. Apart from being used in the browser, it is also used in other non-browser environments as well such as Node.js for writing server-side code in JavaScript, Electron for writing desktop applications, React Native for mobile applications, and so on.
|
||||
JavaScript, often abbreviated JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS. It lets us add interactivity to pages e.g. you might have seen sliders, alerts, click interactions, popups, etc on different websites -- all of that is built using JavaScript. Apart from being used in the browser, it is also used in other non-browser environments as well such as Node.js for writing server-side code in JavaScript, Electron for writing desktop applications, React Native for mobile applications, and so on.
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
<BadgeLink badgeText='Read' colorScheme='yellow' href='https://developer.mozilla.org/en-US/docs/Web/JavaScript'>JavaScript MDN Docs</BadgeLink>
|
||||
@@ -10,4 +10,3 @@ JavaScript, often abbreviated JS, is a programming language that is one of the c
|
||||
<BadgeLink badgeText='Read' colorScheme="yellow" href='https://exploringjs.com/'>Exploring JS: JavaScript books for programmers</BadgeLink>
|
||||
<BadgeLink badgeText='Watch' href='https://youtu.be/hdI2bqOjy3c?t=2'>JavaScript Crash Course for Beginners</BadgeLink>
|
||||
<BadgeLink badgeText='Watch' href='https://youtu.be/P7t13SGytRk?t=22'>Build a Netflix Landing Page Clone with HTML, CSS & JS</BadgeLink>
|
||||
|
||||
|
||||
@@ -4,7 +4,4 @@ JavaScript was initially created by Brendan Eich of NetScape and was first annou
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://roadmap.sh/guides/history-of-javascript'>Brief History of JavaScript</BadgeLink>
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://dev.to/iarchitsharma/the-history-of-javascript-5e98'>The History of JavaScript</BadgeLink>
|
||||
|
||||
|
||||
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://dev.to/iarchitsharma/the-history-of-javascript-5e98'>The History of JavaScript</BadgeLink>
|
||||
@@ -4,6 +4,4 @@ JavaScript was invented by Brendan Eich, and in 1997 and became an ECMA standard
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.educative.io/blog/javascript-versions-history'>JavaScript Versions: How JavaScript has changed over the years</BadgeLink>
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://roadmap.sh/guides/history-of-javascript'>Brief History of JavaScript</BadgeLink>
|
||||
|
||||
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://roadmap.sh/guides/history-of-javascript'>Brief History of JavaScript</BadgeLink>
|
||||
@@ -6,6 +6,3 @@ JavaScript can be run in the browser by including the external script file using
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.digitalocean.com/community/tutorials/how-to-add-javascript-to-html'>How To Add JavaScript to HTML</BadgeLink>
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.digitalocean.com/community/tutorials/how-to-write-your-first-javascript-program'>How To Write Your First JavaScript Program</BadgeLink>
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.digitalocean.com/community/tutorials/how-to-use-the-javascript-developer-console'>How To Use the JavaScript Developer Console</BadgeLink>
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -8,6 +8,3 @@ The var statement declares a function-scoped or globally-scoped variable, option
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.w3schools.com/js/js_variables.asp'>JavaScript Variables - W3Schools</BadgeLink>
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.youtube.com/watch?v=6UAKBYpUC-Y'>Declaring Variables without Var, Let, Const - What Would Happen?</BadgeLink>
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.geeksforgeeks.org/how-to-declare-variables-in-different-ways-in-javascript/'>How to declare variables in different ways in JavaScript?</BadgeLink>
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -7,5 +7,3 @@ A variable name should accurately identify your variable. When you create good v
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.dummies.com/article/technology/programming-web-design/javascript/naming-javascript-variables-142522/'>Naming JavaScript Variables</BadgeLink>
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.robinwieruch.de/javascript-naming-conventions/'>JavaScript Naming Conventions</BadgeLink>
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://google.github.io/styleguide/jsguide.html'>Google JavaScript Style Guide</BadgeLink>
|
||||
|
||||
|
||||
|
||||
@@ -8,4 +8,4 @@ In javascript, the `==` operator does the type conversion of the operands before
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.scaler.com/topics/javascript/difference-between-double-equals-and-triple-equals-in-javascript/'>The Difference Between == and === in Javascript</BadgeLink>
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness#same-value_equality_using_object.is'>Equality comparisons and sameness - MDN</BadgeLink>
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness#same-value_equality_using_object.is'>Equality comparisons and sameness - MDN</BadgeLink>
|
||||
@@ -2,4 +2,5 @@
|
||||
|
||||
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.
|
||||
|
||||
<BadgeLink colorScheme="yellow" badgeText="Read" href="https://medium.com/@ensallee/function-borrowing-in-javascript-4bd671e9d7b4">Function borrowing</BadgeLink>
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme="yellow" badgeText="Read" href="https://medium.com/@ensallee/function-borrowing-in-javascript-4bd671e9d7b4">Function borrowing</BadgeLink>
|
||||
@@ -1 +1,8 @@
|
||||
# This in a function
|
||||
# this in a function
|
||||
|
||||
The keyword `this` when used in a function refers to the global object.
|
||||
|
||||
*Note: in a browser window the global object is the `window` object.*
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.w3schools.com/js/js_this.asp'>this in a function</BadgeLink>
|
||||
@@ -1 +1,8 @@
|
||||
# Using this alone
|
||||
# Using this alone
|
||||
|
||||
The keyword `this` when used alone refers to the global object.
|
||||
|
||||
*Note: in a browser window the global object is the `window` object.*
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.w3schools.com/js/js_this.asp'>this Alone</BadgeLink>
|
||||
@@ -1 +1,6 @@
|
||||
# This in event handlers
|
||||
# this in event handlers
|
||||
|
||||
The keyword `this` when used in an event handler refers to the element that received the event.
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.w3schools.com/js/js_this.asp'>this in Event handlers</BadgeLink>
|
||||
@@ -1 +1,6 @@
|
||||
# This in arrow functions
|
||||
# this in arrow functions
|
||||
|
||||
The keyword `this` when used in an arrow function refers to the parent object.
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://stackoverflow.com/questions/66518020/javascript-this-keyword-and-arrow-function'>this keyword and arrow function</BadgeLink>
|
||||
@@ -1,11 +1,7 @@
|
||||
# Explicit binding
|
||||
|
||||
In this method, you can force a function to use a certain object as its this. Explicit Binding can be applied using call(), apply(), and bind().
|
||||
|
||||
call(): Pass in the required object as the first parameter during the function call. The actual parameters are passed after the object.
|
||||
|
||||
apply(): Similar to call() with a difference in the way the actual arguments are passed. Here, the actual arguments are passed as an array.
|
||||
|
||||
bind(): In this method, you create a new function with a fixed this. These types of functions created using bind() are commonly known as bound functions.
|
||||
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()`.
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://medium.com/swlh/javascript-this-ac28f8e0f65d'>Explicit Binding</BadgeLink>
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://medium.com/@msinha2801/explicit-binding-rule-for-this-keyword-in-js-712405b0a11'>Explicit Binding rule for this keyword</BadgeLink>
|
||||
|
||||
@@ -10,5 +10,4 @@ In JavaScript, the `this` keyword is a little different compared to other langua
|
||||
- Methods like call(), apply(), and bind() can refer `this` to any object
|
||||
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.w3schools.com/js/js_this.asp'>The JavaScript `this` Keyword</BadgeLink>
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this'>This Keyword</BadgeLink>
|
||||
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this'>This Keyword</BadgeLink>
|
||||
Reference in New Issue
Block a user