JavaScript Functions

The function is a block of code designed to perform a particular task. The function is executed when something invokes it (calls it).

JavaScript Function Syntax:

the JavaScript function is defined with the function keyword, followed by a Functioname, and a parenthesis ().

FunctionName: Function names can contain letters, digits, underscores, and a dollar sign (as in variables) but cannot begin with digits (numbers). e.g "_$myScore"
Parenthesis: The parenthesis contains a comma-separated parameter.

(parameter1, parameter2, ...)
The code to be executed by the function is placed inside the curly brackets: {}

function FunctionName(parameter1, parameter2, ...) {
    //code to be executed.
}

Function Invocation

The code inside the function will execute when something calls the function:

example, when a user clicks a button.

Function `return`

when a JavaScript block of code reaches a return statement, the function will stop executing. the return value return back the caller.

function AddNumber(a, b) {
    //funcion return the additon of a and b
    return a * b
}
let x = AddNumber(4, 5);
console.log(x);

Why Functions?

with functions, we can reuse code
You can write code that can be used multiple times
You can use the same code with different arguments, to produce different results.

Function Scope

Local Scope

Variable declared within a JavaScript function, become LOCAL to the function. Local variables can only be accessed from within the function.

function printNumber() {
    let x = 10;
    console.log(x)
}
//invoking (calling) the function
printNumber()

//result
10

Global Scope

Variables declared Globally (outside any function) have Global Scope. it can be accessed anywhere in the JavaScript program.

let y = 20;

function printNumber() {
    //let x = 10;
    //console.log(x)
    //the y variable can also be used heare
    console.log(y)
}
//invoking (calling) the function
printNumber()

//result
20

Nested Function

Nested functions are functions defined within another function

function outerFunction() {
    let ourterVar = " I'm the outer function";

    function innerFunction() {
       let innerVar = " I'm the inner function";
        console.log(outerVar); //accessing outer variable
        console.log(innerVar); //accessing inner variable
    }

    innerFunction(); //calls the innerFunction
}
outerFunction(); //calls the outerFunction

//result
//I'm the outer function
//I'm the inner function

Function Hoisting

Hoisting is the JavaScript default behavior for moving declarations to the top.

A variable can be declared after it has been used.

Example1

x = 5; //assigning 5 to x
console.log(x)
var x; //Declaring x

//result
5

Example2
var x; //declaring before assigning the value ot x
x = 5; // assigning 5 to x
console.log(x);

//result
5

Conclusion

Function is a cornerstone for JavaScript programming, providing a powerful mechanism for restructuring code, enhancing reusability and managing the flow of a program

Thank you for reading.

references;

w3Schools

MDN Documentation

JavaScript Functions

Table of contents