Is nesting possible in javascript?

February 24, 2022

I’m totally beginner on javascript, and actually training on javascript.

For the first time ever on my lessons, I saw a complete different writing of javascript code. Here it is :

let parentClicks = 0;
let childClicks = 0;

document
  .getElementById("parent")
  .addEventListener("click", function() {
  document
    .getElementById("parent-count")
    .innerText = (++parentClicks) + '';
});

document
  .getElementById("child")
  .addEventListener("click", function(e) {
  e.preventDefault();
  e.stopPropagation();
  
  document
    .getElementById("child-count")
    .innerText = (++childClicks) + '';
});

I was used to see nesting on HTML/CSS, but it’s the first time ever I see it on JS.

Do these points mean this or they have a complete different meaning ? :

document.getElementById("parent")
document.addEventListener("click", function() {
  document.getElementById("parent-count")
  document.innerText = (++parentClicks) + '';
});

document.getElementById("child")
document.addEventListener("click", function(e) {
  e.preventDefault();
  e.stopPropagation();
  
  document.getElementById("child-count")
  document.innerText = (++childClicks) + '';
});

Thank you so much for reading and helping noobs like me.

>Solution :

JavaScript is very permissive about whitespace. For some sorts of syntactical constructs, putting a newline between them is the same as if there was no newline there. (It’s possible to write any JavaScript on only a single line of code, after all – it’s just that that’s unreadable)

This:

document
  .getElementById("parent")
  .addEventListener("click", function() {
  document
    .getElementById("parent-count")
    .innerText = (++parentClicks) + '';
});

is equivalent to

document.getElementById("parent").addEventListener("click", function() {
  document.getElementById("parent-count").innerText = (++parentClicks) + '';
});

It’s not the same as your document.addEventListener("click", function() { because your code adds a click listener to the document, not to the parent.

Where one decides to put newlines is often a purely stylistic choice, usually in an effort to make the code easier to understand at a glance. For example, one may well prefer to do this

let ranges = SpreadsheetApp.getActive()
    .createTextFinder("Example 1")
    .matchEntireCell(true)
    .matchCase(true)
    .matchFormulaText(false)
    .ignoreDiacritics(true)
    .findAll();

instead of

let ranges = SpreadsheetApp.getActive().createTextFinder("Example 1").matchEntireCell(true).matchCase(true).matchFormulaText(false).ignoreDiacritics(true).findAll();

even though they mean the exact same thing.