Conditionals, Loops and Functions....

Table of contents

No heading

No headings in the article.

Conditionals
Conditional statements or conditions are like decision Makers, conditions help us make decisions to certain situations, examples are: if statement, if-else statements and SWITCH statements.
If Statements
It's like saying, "Hey Josh, if something is true, do this; otherwise, do something else"

if (itIsRaining) {
    getAnUmbrella();
} else {
    goOutToPlay();
}

If-Else Statements

There is no much difference between the if and if-else statement, just that the if-else statements has more conditions attached to it.

if (itIsRaining) {
    getAnUmbrella();
} else if (itIsSunny) {
    goOutTOPlay();
} else {
    stayAtHome();
}

SWITCH Statements

This condition is a multiple choice conditional statements, similar to your exams, having option a,b,c,d options to choose from.

switch (weather) {
    case 'rainy':
        getAnUmbrella();
        break;
    case 'sunny':
        goOutToPlay();
        break;
    default:
        stayAtHome();
}

LOOPS

Loops..... they are repetitive tasks given to a program. Lets have a short story.
When i was much younger, when i offend my mum she most times ask me to write what i did in a 20 leaves book, for example: I WILL NO LIE!... lol
so basically writing "I WILL NOT LIE" Repeatedly is called LOOP. there are various types of Loops in JavaScript e.g. For, While, Do....While.

For Loop

It's like me being asked to write "I WILL NOT LIE" 5 times. I don't want to repeat the word more than 5 time, so they say, "Write it 5 times."

for (let i = 0; i < 5; i++) {
    iWillNotLie();
}

While Loop

Imagine my mum saying, "Keep Writing until I blow the whistle." I keep going until a specific condition is no longer true.

let writing = true;

while (writing) {
    keepWriting();
    if (whistleBlown()) {
        writing = false;  // mum says stop
    }
}

Do.....While Loop

Similar to the while loop, but it guarantees that the task is done at least once before checking the condition.

let writing = false;

do {
    keepWriting();
} while (whistleBlown());

I keep writing, then checks if the whistle is blown. If yes, it stops. Otherwise, i keep writing.

Reference: My Notes :) :)

FUNCTIONS

Functions are like custom-built tools, Imagine you have a favorite tool, like a knife. It has different functions depending on what you need it for. In JavaScript, a function is a way to group together a set of instructions that you can use and reuse whenever you want.

Declaration

Declaration of a function is like creating your own tool with a specific purpose.

function greet(name) {
    console.log("Hello, " + name + "!");
}

Scope

  1. Global Scope: Think of it as a tool you can use anywhere in your house. It can be accessed from anywhere in your program.

     let globalVariable = "I'm global!";
    
     function globalFunction() {
         console.log(globalVariable);
     }
    

    Both globalVariable and globalFunction can be used anywhere in your code.

  2. Local Scope (Function Scope): Now, imagine you have a special tool that only works in a specific room of your house. If you define a variable or function inside a function, it's in the local scope of that function. It can only be accessed from within that function.

     function localScopeFunction() {
         let localVariable = "I'm local!";
         console.log(localVariable);
     }
    

    localVariable is only accessible within the localScopeFunction.

  3. Block Scope (ES6 and later): Think of it as a tool that only works in a specific corner of a room. Introduced with ES6, the let and const keywords have block scope, meaning they are only accessible within the block of code where they are defined.

     if (true) {
         let blockVariable = "I'm in a block!";
         console.log(blockVariable);
     }
    

    blockVariable is only accessible within the if block.

Scope Hierarchy: It's like having rooms within rooms. If you have a function inside a function, the inner function has access to variables in its own scope and the scope of the outer function.

function outerFunction() {
    let outerVariable = "I'm in outer!";

    function innerFunction

Reference: MDN Web Docs (mozilla.org)

Nesting

"nesting" refers to placing one thing inside another, typically in a hierarchical or layered structure. In the context of programming and computer science, nesting is commonly used to describe the practice of embedding one construct within another.

Reference:Google

Hoisting

Hoisting is a behavior in JavaScript where variable and function declarations are moved to the top of their containing scope during the compilation phase, before the code is executed.

  1. Variable Hoisting:

     console.log(x);  // Output: undefined
     var x = 5;
     console.log(x);  // Output: 5
    

    Even though the console.log(x) appears before the variable declaration var x = 5;, JavaScript hoists the declaration to the top of the scope during the compilation phase. This is why the first console.log outputs undefined.

  2. Function Hoisting:

     sayHello();  // Output: Hello!
     function sayHello() {
         console.log("Hello!");
     }
    

    Function declarations are also hoisted. You can call a function before its declaration in the code, and it will still work.

However, it's important to note that only the declarations are hoisted, not the initialization. If you have a variable declared with var and initialized later in the code, the declaration is hoisted, but the initialization remains in place.

console.log(y);  // Output: undefined
var y = 10;
console.log(y);  // Output: 10

Hoisting is a concept that developers should be aware of to understand how JavaScript behaves during the execution of code.

Reference: MDN Web Docs (mozilla.org)