DONATE  
MENU
JSON
AJAX
MYSQL
HTML
PHP
JAVASCRIPT
CSS

JavaScript Tutorials

INTRODUCTION

» Introduction to JavaScript

» Practice IT Editor

» JavaScript Example

» JavaScript Placement

» JavaScript Syntax

» JavaScript Statements

» JavaScript Input

» JavaScript Output

» JavaScript Comments

» JavaScript Variables

» Variables' Scope

» JavaScript Operators

» JS Expressions & Concatenation

» JavaScript Data Type

» JavaScript Numbers

» Number Object

» JavaScript Strings

» String Object

» JavaScript Booleans

» Boolean Object

» JavaScript Functions

» JavaScript Arrays

» Array Object - Properties

» Array Object - Methods

» JavaScript Objects

» JavaScript Undefined

» JavaScript Nulls

CONDITIONAL TESTING

» If Statement

» If Else Statement

» JavaScript Ternary Operator

» Switch Statement

LOOPS

» For Loops

» While Loops

» Break & Continue

» For...In Loops

» do...while Loop

FUNCTIONS

» JavaScript Functions

» Creating Functions

» Functions' Parameters

» Functions' Arguments

» Function Invocation

» The Return Keyword

» The Arguments Object

» Callback Functions

» Arrow Functions

ARRAYS

» JavaScript Arrays

» Creating Arrays

» Accessing Arrays

» Looping Arrays

» Multi - dimensional Arrays

OBJECTS

» JavaScript Objects

» Creating Objects

» Prototype Definition

» Accessing Objects

» The this Keyword

AJAX

» Introduction to AJAX

JSON

» Introduction to JSON

JAVASCRIPT DATES

» The Date Object

» Date Methods

» Timing (SetInterval & SetTimeout)

MATH OBJECT

» Math Object

» Math Methods

HTML / JS DOM

» DOM Introduction

» Accessing HTML Elements in DOM

» Get And Change Elements' Contents & Values

» Change Styling - DOM CSS

» DOM Attributes

» JavaScript Event Listeners

» DOM Event Listeners

» JS Events

MISCELLANEOUS

» JS Strict Mode

» JavaScript Hoisting

» JavaScript let keyword

» Reserved Keywords

» JS Best Practices

» JavaScript vs ECMAScript

JAVASCRIPT EXAMPLES

» JavaScript Calculator

.. » JavaScript » Miscellaneous » JavaScript Hoisting
Share Tweet WhatsApp

JavaScript Hoisting

Hoisting is a JavaScript behavior which enables you to use or assign values to a variable before declaration. This means you can use a variable before declaring it. Whenever a JavaScript program wants to run, all the declarations in the program are moved to the top of whatever scope, the declarations are been use. This allows us to use variables and declared them later in the program.
<script>
name = "Joseph Omamode";
age = 14;
document.write(name+" is "+age+" years old");
var name, age;
</script>

Copy PRACTICE IT

<script>
"use strict";
name = "Joseph Omamode";
age = 14;
document.write(name+" is "+age+" years old");
var name, age;
</script>

Copy PRACTICE IT

Above, we assigned values to some variables and use same though they weren't declared. The variables were later declared. Now, when the program executes, the declarations will move to the top of the program before the other codes start executing.
NOTE:
  • Hoisting applies to only declarations and not assignments. This means you must assign a value to a variable before use. You can't use a variable before assigning a value as it will return undefined.
    <script>
    document.write(name+" is "+age+" years old");
    var name = "Omamode", age = 14;
    </script>

    Copy PRACTICE IT

    In the above, the declarations (var name, age) will be hoisted but not the assigned values (Omamode, 14).
Hoisting Also Applies To Functions This means you can actually invoke a function before its declaration.
<script>
callName("Stack Beginner"); //invoking function

//DECLARING FUNCTION
function callName(name){
document.write(name);
}
</script>

Copy PRACTICE IT

Take a short quiz on JavaScript Hoisting.
Ask a question or tell us if JavaScript Hoisting is easy or not.
cent?

Join our 1,090 subscribers to receive tutorials' updates!

  We won't spam your mail box. We hate it.





StackBeginner 2021 © Joseph Omamode