Skip to content

Commit eef0252

Browse files
author
th3c0d3br34ker
committed
➕ Added 'this'
1 parent bb0c155 commit eef0252

File tree

4 files changed

+137
-19
lines changed

4 files changed

+137
-19
lines changed

‎README.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# Javascript ☢ Notes _(cause I can't memorise them all)_ 🥴
1+
# **Javascript ☢ Notes _(cause I can't memorise them all)_ 🥴**
22

33
<div align="center">
44
<img width="75%" alt="JavaScript" src ="images/javascript-logo-banner.jpg">
@@ -23,7 +23,7 @@ Hopefully going to cover everything...
2323

2424
---
2525

26-
## ✨ Contents
26+
## ✨ **Contents**
2727

2828
⚫ What on 🌍 is JavaSrcipt? 😶 [ Read ▶ ](./notes/what-is-javascript.md)
2929

@@ -59,7 +59,7 @@ Hopefully going to cover everything...
5959

6060
---
6161

62-
## 🚀 References
62+
## 🚀 **References**
6363

6464
➡ [Mozilla](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
6565
➡ [Fireship.io](https://fireship.io/courses/javascript/)

‎notes/promises.md‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,9 @@ A Promise can be in one of `three` states:
2222

2323
➡ **Pending**, when the final value is not available yet. This is the only state that may transition to one of the other two states.
2424

25-
➡ **Fulfilled**, when and if the final value becomes available. A fulfillment value becomes permanently associated with the promise. This may be any value, including undefined.
25+
➡ **Fulfilled**, when and if the final value becomes available. A fulfillment value becomes permanently associated with the promise. This may be any value, including `undefined`.
2626

27-
➡ **Rejected**, if an error prevented the final value from being determined. A rejection reason becomes permanently associated with the promise. This may be any value, including undefined, though it is generally an Error object, like in exception handling.
27+
➡ **Rejected**, if an error prevented the final value from being determined. A rejection reason becomes permanently associated with the promise. This may be any value, including `undefined`, though it is generally an Error object, like in exception handling.
2828

2929
Promises work in two phases.
3030

@@ -36,27 +36,27 @@ Promise are create with the `new Promise()` constructor initially in the pending
3636
Here is how you would create one:
3737

3838
```js
39-
const getVeggie = (name) => {
40-
const veggies = {
39+
const getFruit = (name) => {
40+
const fruits = {
4141
mango: "🥭",
4242
apple: "🍎",
4343
banana: "🍌",
4444
avocado: "🥑",
4545
};
4646

47-
let flag = veggies[name];
47+
let flag = fruits[name];
4848

4949
return new Promise((resolve, reject) => {
5050
if (flag) {
51-
resolve("Yay there is Veggie! 😄");
51+
resolve("Yay there is Fruit! 😄");
5252
} else {
53-
reject("Sorry there's no Veggie 😔");
53+
reject("Sorry there's no Fruit 😔");
5454
}
5555
});
5656
};
5757
```
5858

59-
The next step is to consume the above Promise. Promises are either `resolved` or `rejected`. If a promise is `resolved` it means that it ran successful and has returned a value we can use. If a promise is `rejected` it means that it has failed to run properly.
59+
The next step is to consume the above Promise. Promises are either `resolved` or `rejected`. If a promise is `resolved` it means that it ran successfully and has returned a value we can use. If a promise is `rejected` it means that it has failed to run properly.
6060

6161
Here is how you would consume a Promise:
6262

‎notes/this.md‎

Lines changed: 120 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,127 @@
1-
# **Are you looking for `this`? '🙄 **
1+
# **Are you looking for `this`? 🙄**
22

3-
[Home](../README.md) / Are you looking for `this`? '🙄
3+
[Home](../README.md) / Are you looking for `this`? 🙄
44

55
---
66

7+
## **What is `this` 😥**
8+
9+
In JavaScript `this` refers to the current object that is executing the current function. It has different values depending on where it is used.
10+
11+
Read more or about objects [here](./objects.md).
12+
13+
## The `this` reference 😳
14+
15+
✅ If the function is inside an Object then `this` refers to the that object.
16+
17+
Example:
18+
19+
```js
20+
const cookie = {
21+
flavour: "chocolate",
22+
eat() {
23+
console.log(`I am a ${this.flavour} 🍪 and I was eaten!`);
24+
},
25+
};
26+
27+
Cookie.eat();
28+
29+
// This is another way of writing the above code.
30+
const cookie = {
31+
flavour: "chocolate",
32+
eat: function () {
33+
console.log(`I am a ${this.flavour} 🍪 and I was eaten!`);
34+
},
35+
};
36+
37+
// Both the codes are same.
38+
```
39+
40+
This will not work if we use it inside an [Arrow Function](./arrow-functions.md) or inside a nested function.
41+
42+
Example
43+
44+
```js
45+
// this will not work
46+
const cookie = {
47+
flavour: "chocolate",
48+
eat: () => {
49+
console.log(`I am a ${this.flavour} 🍪 and I was eaten!`);
50+
},
51+
};
52+
53+
// OR
54+
55+
const cookie = {
56+
flavours: ["chocolate", "stawberry", "vanilla"],
57+
eatAllCookies() {
58+
this.flavours.forEach(function (flavour) {
59+
// 👈 Anonymous nest function
60+
console.log(`I am ${flavour} 🍪 and I was eaten!`); // 👈 Will output "I am 'undefined' and I was eaten!"
61+
});
62+
},
63+
};
64+
```
65+
66+
To bind the object we need to pass the `this` object as an argument to the `forEach()` function.
67+
68+
```js
69+
const cookie = {
70+
flavours: ["chocolate", "stawberry", "vanilla"],
71+
eatAllCookies() {
72+
this.flavours.forEach(function (flavour) {
73+
console.log(`I am ${flavour} 🍪 and I was eaten!`);
74+
}, this); // 👈 here this refers to the current "flavours" array, which in turn is an object.
75+
},
76+
};
77+
78+
// Works like a charm 😋
79+
cookie.eatAllCookies();
80+
```
81+
82+
---
83+
84+
✅ If the function is a regular function then `this` refers to the `window` object in browser and the `global` object in node.
85+
86+
Example:
87+
88+
```js
89+
function eatCookie() {
90+
console.log(this);
91+
console.log("this doesn't have a 🍪 object");
92+
}
93+
94+
// It will print the window object if run in browser and global if run in node.
95+
```
96+
97+
**We can prevent `this` from binding to the global if we use `strict` mode.**
98+
99+
> `this` is `undefined` in a normal function when using the `strict` mode.
100+
101+
```js
102+
"use strict";
103+
104+
function eatCookie() {
105+
console.log(this);
106+
console.log("this doesn't have anything!");
107+
}
108+
109+
// the above code will not log the global or window object, instead it will print 'undefined'.
110+
```
111+
112+
`this` again behaves different if we invoke a function using the `new` operator.
113+
114+
```js
115+
function Cookie() {
116+
this.flavour = "I am a chocolate 🍪";
117+
console.log(this.flavour, "and I was eaten!");
118+
}
119+
120+
const cookie = new Cookie();
121+
```
122+
123+
When we use the `new` operator, it creates a new empty object `{ }`. Then names that object `Cookie` and adds `flavour` property to it.
124+
7125
---
8126

9127
See also

‎scripts/promise.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
1-
const getVeggie = (name) => {
2-
const veggies = {
1+
const getFruit = (name) => {
2+
const fruits = {
33
mango: "🥭",
44
apple: "🍎",
55
banana: "🍌",
66
avocado: "🥑",
77
};
88

9-
let flag = veggies[name];
9+
let flag = fruits[name];
1010

1111
return new Promise((resolve, reject) => {
1212
if (flag) {
13-
resolve("Yay there is Veggie! 😄");
13+
resolve("Yay there is Fruit! 😄");
1414
} else {
15-
reject("Sorry there's no Veggie 😔");
15+
reject("Sorry there's no Fruit 😔");
1616
}
1717
});
1818
};
1919

20-
getVeggie("mango")
20+
getFruit("mango")
2121
.then((response) => console.log(response))
2222
.catch((error) => console.log(error));

0 commit comments

Comments
 (0)