nested-functions

Nested functions in JavaScript refer to the practice of defining a function inside another function. The inner function is encapsulated within the scope of the outer function, allowing it to access variables and parameters from its containing function. This can be useful for creating private functions or organizing code into modular components. However, it's important to note that each time the outer function is called, a new instance of the inner function is created, potentially affecting memory usage if used excessively.

Outer functions have access to inner functions.

Inner functions are "hidden" from outside the outer function.

Username:

nested functions:


function login() {
  // You can access the following functions only after logging in ^
  displayUsername();
  displayUserInbox();
  
  // These are nested functions
  function displayUsername() {
    p1.innerHTML = `Welcome ${username}`;
  }
  function displayUserInbox() {
    let newElement = document.createElement("p");
    p1.appendChild(newElement);
    newElement.innerHTML = `You have ${userInbox} new messages.`;
  }
}

page:


const inputUsername = document.getElementById("inputUsername");
const buttonLogin = document.getElementById("buttonLogin");
const p1 = document.getElementById("p1");

let username = "";
let userInbox = 0;

buttonLogin.onclick = function () {
  username = String(inputUsername.value);
  login();
};

function login() {
  // You can access the following functions only after logging in ^
  displayUsername();
  displayUserInbox();
  
  // These are nested functions
  function displayUsername() {
    p1.innerHTML = `Welcome ${username}`;
  }
  function displayUserInbox() {
    let pNewElement = document.createElement("p");
    p1.appendChild(pNewElement);
    pNewElement.innerHTML = `You have ${userInbox} new messages.`;
  }
}