Functions in JavaScript

Functions in JavaScript

What is a function?

A function is a reusable piece of code that takes some input, performs some task and returns a value. A function stores a piece of code that we want to use repeatedly.

To use a function, we call that function by its name.

// Defining a function
function getName(age){
    let name = 'Bobby';
    return `${name} is ${age}`;
}

// Calling a function
let name = getName(23)
console.log(name) // Bobby is 23

Parameters vs Arguments

When you define a function, the input values are called parameters.

Parameters are something that is accepted by a function.

When you invoke or call a function, the input values are called arguments.

Arguments are something that is passed to a function.

// Here inputs are called parameters
function sum(a,b){
    let c = a + b;
    return c;
}

// Here inputs are called arguments
let result = sum(9,9)
console.log(result) // 18

Default Parameters

Default function parameters allow named parameters to be initialized with default values if no value is passed.

function multiply(a, b = 1) {
  return a * b;
}

console.log(multiply(5, 2));
// Expected output: 10

console.log(multiply(5)); // 5

Returns Undefined

If you don't manually return anything from a function, it will automatically return undefined.

function welcome(name){
    console.log(`Welcome ${name}`)
}

let result = welcome('Bobby')
console.log(result)

/* 
Welcome Bobby
undefined
*/

Ways to implement a function

Function Declaration

While defining a function if the first keyword of the statement is a function keyword, then it will be called the function declaration.

// Function Declaration
function welcome(name){
    // some task
}

Function Expression

While defining a function if the first keyword of the statement is not a function keyword, then it will be called the function expression.

Function Expressions are only accessible by the variable that they have been assigned to.

// Function Expression
const fun = function(name){
    console.log("Hey");
}

// To access the function use the variable name
fun() // Hey

Different types of function expressions

Named function expressions

// Named Function Expression
const fun = function greet(name){
    console.log("Hey");
}

// To access the function use the variable name
fun() // Hey

Anonymous function expressions

// Anonymous Function Expression
const fun = function(name){
    console.log("Hey");
}

// To access the function use the variable name
fun(); // Hey

Arrow function

To learn about Arrow functions read this blog -> arrow function.

IIFE - Immediately Invoked Function Expression

It is a function that is invoked immediately as soon as it is defined without being explicitly called.

It is defined by wrapping the function in parentheses and then adding a set of parentheses at the end to immediately invoke it. We can pass arguments to the additional set of parentheses.

(function(age){
    let name = 'Bobby';
    console.log(`${name} is ${age}`);
})(23)

// Bobby is 23

If you will not write the additional set of parentheses at the end, your function will not be invoked.

You can write the arrow function, an anonymous function, traditional function inside parentheses.

Higher Order Function

A function that accepts functions as arguments and/or returns a function is known as a Higher-order-function.

function add(a,b){
    return a + b;
}

// Higher Order function
function calculation(callback){
    return callback
}

let sum = calculation(add)
console.log(sum(9,9)) // 18

Array.map(), setTimeout(), and Array.sort() are examples of Higher order Functions.

Callback Function

A callback function is a function that is passed into another function as an argument, which is then invoked inside that outer function after when a specific task is completed.

const myArray = [1,2,3,4]

let square = myArray.map((currEle) => currEle**2))

console.log(square) // [ 1, 4, 9, 16 ]

Learn more about Callback functions here.

Final Words

And that’s it for this blog.

I hope you’ve found this blog a good referencing resource and thank you for reading.

If this blog was helpful, please do like, comment and share. Thanks, see you in the next blog.✌️