<div align="center">

<img width="75%" alt="JavaScript" src ="images/javascript-logo-banner.jpg">

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

➡ [Mozilla](https://developer.mozilla.org/en-US/docs/Web/JavaScript)

➡ [Fireship.io](https://fireship.io/courses/javascript/)

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

➡ **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.

➡ **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`.

➡ **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.

➡ **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.

Promises work in two phases.

Here is how you would create one:

const getVeggie = (name) => {

const veggies = {

const getFruit = (name) => {

const fruits = {

mango: "🥭",

apple: "🍎",

banana: "🍌",

avocado: "🥑",

};

let flag = veggies[name];

let flag = fruits[name];

return new Promise((resolve, reject) => {

if (flag) {

resolve("Yay there is Veggie! 😄");

resolve("Yay there is Fruit! 😄");

} else {

reject("Sorry there's no Veggie 😔");

reject("Sorry there's no Fruit 😔");

}

});

};

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.

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.

Here is how you would consume a Promise:

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

[Home](../README.md) / Are you looking for `this`? 🙄

In JavaScript `this` refers to the current object that is executing the current function. It has different values depending on where it is used.

Read more or about objects [here](./objects.md).

✅ If the function is inside an Object then `this` refers to the that object.

Example:

const cookie = {

flavour: "chocolate",

eat() {

console.log(`I am a ${this.flavour} 🍪 and I was eaten!`);

},

};

Cookie.eat();

const cookie = {

flavour: "chocolate",

eat: function () {

console.log(`I am a ${this.flavour} 🍪 and I was eaten!`);

},

};

This will not work if we use it inside an [Arrow Function](./arrow-functions.md) or inside a nested function.

Example

const cookie = {

flavour: "chocolate",

eat: () => {

console.log(`I am a ${this.flavour} 🍪 and I was eaten!`);

},

};

const cookie = {

flavours: ["chocolate", "stawberry", "vanilla"],

eatAllCookies() {

this.flavours.forEach(function (flavour) {

// 👈 Anonymous nest function

console.log(`I am ${flavour} 🍪 and I was eaten!`); // 👈 Will output "I am 'undefined' and I was eaten!"

});

},

};

To bind the object we need to pass the `this` object as an argument to the `forEach()` function.

const cookie = {

flavours: ["chocolate", "stawberry", "vanilla"],

eatAllCookies() {

this.flavours.forEach(function (flavour) {

console.log(`I am ${flavour} 🍪 and I was eaten!`);

}, this); // 👈 here this refers to the current "flavours" array, which in turn is an object.

},

};

cookie.eatAllCookies();

✅ If the function is a regular function then `this` refers to the `window` object in browser and the `global` object in node.

Example:

function eatCookie() {

console.log(this);

console.log("this doesn't have a 🍪 object");

}

**We can prevent `this` from binding to the global if we use `strict` mode.**

"use strict";

function eatCookie() {

console.log(this);

console.log("this doesn't have anything!");

}

`this` again behaves different if we invoke a function using the `new` operator.

function Cookie() {

this.flavour = "I am a chocolate 🍪";

console.log(this.flavour, "and I was eaten!");

}

const cookie = new Cookie();

When we use the `new` operator, it creates a new empty object `{ }`. Then names that object `Cookie` and adds `flavour` property to it.

See also

const getVeggie = (name) => {

const veggies = {

const getFruit = (name) => {

const fruits = {

mango: "🥭",

apple: "🍎",

banana: "🍌",

avocado: "🥑",

};

let flag = veggies[name];

let flag = fruits[name];

return new Promise((resolve, reject) => {

if (flag) {

resolve("Yay there is Veggie! 😄");

resolve("Yay there is Fruit! 😄");

} else {

reject("Sorry there's no Veggie 😔");

reject("Sorry there's no Fruit 😔");

}

});

.then((response) => console.log(response))

.catch((error) => console.log(error));