JavaScript - Fundamentals - Spread, Short circuit operators, HTTP Web Requests (Part-III)

 Hi there! In continuation to our JavaScript fundamental series, today we will be looking at:

1. Spread operator
2. Spread operator with Object Destructuring
3. Short circuit operators
4. Import/Export modules
5. HTTP calls using fetch

Lets get started!

1. Spread operator

• Allows to copy all parts of one or many array or objects to another.

• Arrays
• 
  

      const array1 = [1, 2, 3];

      const array2 = [4, 5, 6];

      const newArray = [...array1, ...array2]; //returns 1,2,3,4,5,6

  
  

• Objects
• 
  

      const book = {

      coverImage: "./image/the-alchemist.jpg",

      title: "The Alchemist",

      };

  
  

      const writer = {

      author: "Paulo Coelho",

      description: "Lorem, ipsum dolor sit amet adipisicing.",

      };

  
  

      const updatedBook = { ...book, ...writer };

  
  

      /*{coverImage: './image/the-alchemist.jpg', title: 'The Alchemist',

      author: 'Paulo Coelho', description: 'Lorem, ipsum dolor sit amet adipisicing.'}*/

  
  

2. Spread operator with Object destructuring

• 
  

      const fruits = ["Mango", "Papaya", "Strawberry", "Apple", "Orange"];

      const [mango, papaya, ...restOfThem] = fruits;

  
  

      /* Returns:

      mango: "Mango"

      papaya: "Papaya"

      restOfThem: ["Strawberry", "Apple", "Orange"];

      */

  
  

3. Short circuit operators

• && and || operators
• Expression evaluation starts from left to right until its confirmed that the evaluation of rest of the expression is not going to affect the outcome
• If result is clear before even evaluation, it short circuits and returns
• Avoids unnecessary evaluation and leads to efficient processing
• && are evaluated until we get one false result, last truthy value is returned or last expression returned
• || are evaluated until we get one true result and first truthy value is returned or expression returned

• && Operator

• 
  

      "a" && "b" //("b")

      "a" && 2 //2

      "a" && undefined //undefined

      "a" && null //null

      "a" && false //false

      false && "a" //false

      undefined && "a" //undefined

      null && "a" //null

  
  

• II Operator

• 
  

      "a" || "b"; //a

      "a" || 2; //a

      2 || a; //2

      "a" || null; //a

      "a" || false; //a

      false || "a"; //a

      undefined || "a"; //a

      null || "a"; //a

  
  

4. Import/Export Modules

• Allows to break and build app in small chunks
• Its name export, meaning name should match exactly in source file and consumer file

• Named Exports
• There can be many named exports in a file
• Use curly brace syntax while importing
• Export 
• 
  

      export const fruits = ["Mango", "Papaya", "Strawberry", "Apple", "Orange"];

  
  

• Import
• use curly braces {} while importing
•        

      import { fruits } from "./fruits";

  
  

• Default Export
• There can be only one default export per file
• With default export, consumer can rename it as needed

• Export
• 
  

      const Book = () => { //do some operation }

  
  

      export default Book;

  
  

• Import
• 
  

      import MyBook from "./Book";

  
  

5. HTTP call using fetch()

• Fetch is provided to perform AJAX request
• It can be used for requesting http resources over the network
• Fetch only captures network errors
• It can work with promises as well as async/await

• fetch() with Promise

• 
  

      fetch("https://openlibrary.org/books/OL7353617M/Fantastic_Mr._Fox")

      .then((response) => response.json())

      .then((data) => console.log(JSON.stringify(data)))

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

  
  

• fetch() with async/await

• 
  

      (async () => {

      let response = await fetch(

          "https://openlibrary.org/works/OL45883W/Fantastic_Mr._Fox"

      );

      console.log(await response.json());

      })();

  
  

  
  

JavaScript - Fundamentals - Hoisting, resolving this and Arrow functions (Part-I)

JavaScript - Fundamentals - Hoisting, resolving this and Arrow functions (Part-II)