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

In this article, we will be covering below JavaScript features:

  1. Inline functions
  2. Anonymous functions
  3. Object de-structuring
  4. var vs let vs const keywords
Lets get started!

1. Inline Functions

  • Function has a variable assigned which can be later reused.
  • This reduced overhead of adding it to stack and maintaining parameters etc.
  • Example

    •     var myFunc = function () {
          alert("Hello world!");
          };


2. Anonymous Functions
  • Arrow functions

    •     const myFunc = () => alert("Hello world"); //implicit return

  • IIFE (Immediately Invoked Function Expressions)

    •     //Normal IIFE
          (function () {
          alert("Hello world");
          })();

          //Arrow function IIFE
          (() => {
          alert("Hello world");
          })();


3. Object Destructuring
  • Provides extraction of the object properties without iteration
  • Need to use exact property name
  • Example

    •     const { coverImage, title, author, description } = book;

  • Using as a function parameters

    •     const displayBook = ({ coverImage, title, author, description }) => {
          //do some operation
          };

  • Set default value

    •     const Book = ({ coverImage, title, author, description = 'unavailable'  }) => {
          //do some operation
          };

  • Creating alias for property name

    •     const {
          coverImage: myImg, //myImg is alias of coverImage
          title,
          author,
          description = "Description is unavailable",
          } = book;

  • Extracting properties from nested objects

    •     const book = {
          coverImage: "./image/the-alchemist.jpg",
          title: "The Alchemist",
          author: "Paulo Coelho",
          description: {
              synopsis: "Lorem, ipsum dolor sit amet consectetur adipisicing.",
              publisher: "Lorem ipsum dolor sit amet.",
          },
          };

          // Nested object destructuring:
          const {
          description: { synopsis },
          } = book;
          synopsis; // => 'Lorem, ipsum dolor sit amet consectetur adipisicing.'

  • Extracting dynamic property (passing property name at runtime)

    •     const book = {
          coverImage: "./image/the-alchemist.jpg",
          title: "The Alchemist",
          author: "Paulo Coelho",
          description: {
              synopsis: "Lorem, ipsum dolor sit amet consectetur adipisicing.",
              publisher: "Lorem ipsum dolor sit amet.",
          },
          };

          const prop = "author";
          const { [prop]: author } = book;
          author; // => 'Paulo Coelho'

  • Rest object destructuring

    •     const book = {
          coverImage: "./image/the-alchemist.jpg",
          title: "The Alchemist",
          author: "Paulo Coelho",
          description: {
              synopsis: "Lorem, ipsum dolor sit amet consectetur adipisicing.",
              publisher: "Lorem ipsum dolor sit amet.",
          },
          };

          const { author, coverImage, description, ...props } = book;
          props; // => {  title: "The Alchemist" }


4. var vs let vs const
    • var
      • Variables are scoped globally or within functions
      • Variables can be redeclared and updated, this is also a problem

        •     var name = "Hardik";
              var name = "Hardik Shah";

      • Hoisting is done and initialized to undefined
        • Before Hoisting

          •     console.log(name);
                var name = "Hardik";

        • After Hoisting

          •     var name;
                console.log(name); // greeter is undefined
                name = "Hardik";

    • let
      • Its block scoped
      • It can be updated but not redeclared, throws error if declared in the same scope

        •     let name = "Hardik";
              let name = "Hardik Shah"; // error: Identifier 'name' has already been
              //declared var name = "Hardik";
      • Hoisted similar to var but not initialized to undefined. In that case it throws reference error if used before values
    • const
      • Maintain constant values
      • Block scoped similar to let
      • Cannot be updated or redeclared, if done throws error
      • So it must be initialized at the time of declaration
      • Properties of a constant object can be updated

        •     const name = {
              message: "Hardik",
              times: 4,
              };

              name = {
              words: "Hello",
              number: "five",
              }; // error:  Assignment to constant variable.

              //This is allowed
              name.message = "Hardik Shah";


      • Similar to var, let, its also hoisted to the top of the function/file/block but not initialized 
    • Key Differences - Summary
      • var declarations are globally scoped or function scoped while let and const are block scoped.
      • var variables can be updated and re-declared within its scope; let variables can be updated but not re-declared; const variables can neither be updated nor re-declared.
      • They are all hoisted to the top of their scope. But while var variables are initialized with undefined, let and const variables are not initialized.
      • While var and let can be declared without being initialized, const must be initialized during declaration.



Happy Learning :)

Comments

Post a Comment

Popular Posts