JavaScript: Things You Need to Know

Arrow functions

Arrow functions have a lexical scope. In other words, an arrow function does not have its own this context. It borrows the context from the parent element or the context it was defined in.

In the example below, the outerFunction will get its context from the global context, and the innerFunction will get its context from the outerFunction.

"use strict"
this.movie = "Saving Private Ryan"
const outerFunction = () => {
    const innerFunction = () => {
        console.log(this.movie)
    }
    innerFunction()
}
outerFunction()
//Output : "Saving Private Ryan"

Promises

In React Native, we use async/await to handle promises. However, it is necessary to learn the old way using callbacks.

Note: Although it’s good to understand callbacks, for most of the course we’ll use async/await, which has a simpler syntax.

In JavaScript, the Promise is an object that represents the eventual completion (or failure) of an asynchronous operation. Promise objects may not have a value initially, but they will have a value at some point in the future.

The Promise is like the word promise in the real world. When we promise something, there are two outcomes—either the promise is kept (resolved) or the promise is broken (rejected).

Similarly, the Promise object has three states:

• Pending: Neither resolved nor rejected (initial state)

• Fulfilled: Operation completed successfully

• Rejected: Operation failed

Let’s take a look at how this works with a fake function.

const fakeRequest = (url) => {
    return new Promise((resolve, reject) => {
        const rand = Math.random();
        setTimeout(() => {
            if (rand < 0.7) {
                resolve('YOUR FAKE DATA HERE');
            }
            reject('Request Error!');
        }, 1000)
    })
}

The function tries to simulate a response from a remote server. When we request data from a server, it might take a few seconds before it completes or rejects our request. In a sense, the server is promising us that it will respond with the data.

When the function is called, a Promise is made by the function. It can either resolve it and return the data, or reject it and throw an error.

This function generates a random number between 0 and 1. If the number is less than 0.7, it resolves the Promise by using the resolve function with the data as a parameter. Otherwise, the Promise is rejected with an error in the reject function.

Now that we have created the Promise, how do we consume it?

The then() function

We pass the callback function to then(), which is executed when the Promise is resolved.

fakeRequest("fakeurl").then((data)=>{
 console.log(data)
})

The data argument will contain YOUR FAKE DATA HERE if the promise is resolved.

The catch() function

If the Promise is rejected, we’ll have to catch the error.

We attach .catch() after .then() to catch any rejected promises.

fakeRequest("fakeurl").then((data)=>{
    console.log(data)
 }).catch((error){
    console.log(error)
 })

If an error is thrown, the error argument will have the value Request Error!.

To put it simply, .then is for resolve and .catch is for reject.

The main difference between callback functions and promises is that in promises, we attach the callbacks (.then and .catch) to the returned promise object, whereas in callback functions, we pass callbacks to the function as arguments (success and failure).