Function in Javascript

Functions are essential building blocks in JavaScript, they are packed with logic for performing tasks. A function can be likened to a procedure that performs a task or calculates a value. However, for this procedure to be considered as a function, it needs to take some input and return an output. For instance, a function to calculate a value should take the user’s input (value to be calculated) and return an output (calculated value). In simple terms, a function is a group of statements that perform a task.

A function can be reused. — it can be executed as many times as you desire in a program which removes the need for code repetition. This is known as modular coding. Since each function performs a particular task, functions can also be used in code grouping — breaking down a large program into smaller pieces of code that are based on the task they perform. They are either predefined or user-defined (custom code).

Q1 - What is Function Declaration?

function square(num) {
  return num * num
}

Q2 - What is Function Expression?

When you store a function inside a variable, it is called a function expression.

const square2 = function (num) {
  return num * num
}
console.log(square2(5))

Q3 - What is First Class Function?

In a language where functions can be treated as variables, it is called a first-class function. This means functions can be manipulated and returned.

function square3(num) {
  return num * num
}
 
function displaySquare(fn) {
  console.log('Square is ' + fn(10))
}
displaySquare(square3)

Q4 - What is IIFE (Immediately Invoked Function Expression)?

IIFE stands for Immediately Invoked Function Expression. It is a function that is executed immediately after it is defined.

;(function square4(num) {
  console.log(num * num)
})(25)

Q5 - IIFE Output Based Question

(function (x) {
  return (function (y) {
    console.log(x) // 250
  })(2)
})(250)

Q6 - Function Scope

const num1 = 20
const num2 = 3
const name = 'Sambit'
 
function multiply() {
  return num1 * num2
}
 
console.log(multiply()) // 60

Nested Function Scope

function getScore() {
  const num1 = 2
  const num2 = 3
 
  function add() {
    return `${name} scored ${num1 + num2}`
  }
 
  return add()
}
 
console.log(getScore()) // "Chamakh scored 5"

Q7 - Function Scope Output Based Question

for (let i = 0; i < 5; i++) {
  setTimeout(function () {
    console.log(i);
  }, i * 1000);
}

Q8 - Function Hoisting

Functions are hoisted completely. Function hoisting allows calling a function before it is declared.

functionName()
 
function functionName() {
  console.log(x) // undefined
  var x = 10
  console.log('sambitkumar') // sambitkumar
}
 
console.log(x) // undefined because of hoisting
var x = 5

Q9 - Function Hoisting Output Based Question

var x = 21
 
var fun = function () {
  console.log(x) // undefined
  var x = 20
}
 
fun()

Q10 - Params vs. Arguments

This code defines a function square5 with parameters, showcasing how parameters are declared and used in functions.

function square5(num) {
  console.log(num * num)
}
 
square5(5) // value is called arguments

Q11 - Spread Operator and Rest Operator

The code shows the usage of the rest parameter in a function declaration and the spread operator to pass an array as individual arguments to the function.

function multiply2(...nums) {
  console.log(nums[0] * nums[1])
}
var arr = [5, 6]
 
multiply2(...arr) // spread operator

Q12 - Params vs. Arguments Output Based Question

const fn2 = (a, x, y, ...numbers) => {
  console.log(x, y, numbers)
}
 
fn2(5, 6, 3, 7, 8, 9) // 6 3 [ 7, 8, 9 ]

Q13 - Callback Function

Callback is a function passed as an argument to another function. This technique allows a function to call another function. A callback function can run after another function has finished.

// document.addEventListener("click", function (params) {});

Q14 - Arrow Function

Arrow functions are shown in two forms: one with explicit return and braces, and another with implicit return when the function body is a single expression.

const add = (firstNum, secondNum) => {
  return firstNum + secondNum
}

Q15 - Arrow Function vs Normal Function

// Syntax
function squre(num) {
  return num * num
}
 
const squareArrow = (num) => {
  return num * num
}
 
// Implicit "return" keyword
const squareArrow2 = (num) => num * num
 
// arguments keyword
function fn3() {
  console.log(arguments)
}
 
fn3(1, 2, 3) // [Arguments] { '0': 1, '1': 2, '2': 3 }
 
// 'this' keyword
let user = {
  name: 'Roadside Coder',
  rc1: () => {
    console.log('Subscribe to ' + this.name)
  },
  rc2() {
    console.log('Subscribe to ' + this.name)
  },
}