JavaScript Hosting

JavaScript Hoisting with Examples

In this article, I am going to discuss JavaScript Hoisting with Examples. Please read our previous article where we discussed Exception Handling in JavaScript. At the end of this article, you will understand what is JavaScript Hoisting and how to implement this with examples.

What is JavaScript Hoisting?

Hoisting is a JavaScript default behavior that moves the declaration of variables and functions at the top of the current scope. we can use variables and functions before declaring them.

Hoisting is applied only for declaration, not initialization. It is required to initialize the variables and functions before using their values.

JavaScript Variable Hoisting:

Example:

<html>
<head>
    <title>JavaScript Variable Hoisting</title>
</head>
<body>
    <script>
        x = 100;
        document.write(x);
        var x;
    </script>
</body>
</html>

Output: 100

JavaScript function Hoisting:

Example:

<html>
<head>
    <title>JavaScript function Hoisting</title>
</head>
<body>
    <script>
        document.write(addition(10, 20));
        function addition(a, b) {
            return a + b;
        }
    </script>
</body>
</html>

Output: 30

JavaScript Strict Mode

Use strict as the name implies which makes the JavaScript code to be executed in strict mode.

As we know JavaScript is a scripting language, sometimes the JavaScript code displays the correct result even it has some errors. To overcome this issue, we can use the JavaScript strict mode. Strict mode is declared by using “use strict”; at the start of a script or a function.

Note – The “use strict“; expression can only be placed as the first statement in a script or in a function.

In the below example without strict mode where we didn’t provide the type of variable. Still, we are getting an output.

Example without strict mode:
<html>
<head>
    <title>example without strict mode</title>
</head>
<body>
    <script>
        x = 10;
  document.write(x);
        console.log(x);
    </script>
</body>
</html>

Output:

Example without using JavaScript Strict Mode

When we use strict mode.it will throw an error as the type of x is not defined.

Example with strict mode:
<html>
<head>
    <title>example with strict mode</title>
</head>
<body>
    <script>
        "use strict";
        x = 10;
        document.write(x);
        console.log(x);
    </script>
</body>
</html>

Output:

Example using JavaScript Strict Mode

Example:

Adding numbers using strict mode and throws an error for using duplicate elements.

<html>
<head>
    <title>addition example with strict mode</title>
</head>
<body>
    <script>
        console.log(addition(10, 20));
        function addtion(x, x) {
            "use strict";
            return x + x;
        }
    </script>
</body>
</html>

Output:

JavaScript Hosting

In the next article, I am going to explain the JavaScript this keyword. Here, in this article, I try to explain JavaScript Hoisting with examples. I hope this article will help you with your need. I would like to have your feedback. Please post your feedback, question, or comments about this article.

Leave a Reply

Your email address will not be published. Required fields are marked *