Looping through an object

Question

Looping through an object

I stumbled upon this code snippet that adds a specific property value of all blocks in a nested object to an arrays array. I'm having trouble understanding how iteration is achieved in a nested object like the one shown below using a for loop.

Could someone please clarify how the for loop iteration works with an object?

let list = {
   value: 1,
   rest: {
      value: 2,
      rest: {
         value: 3,
         rest: null
    }
  }
};

Here is the function responsible for this operation

function listToArray(list) {
  let arrays = [];
  for (let node = list; node; node = node.rest) { // my main question: how does this work?
    arrays.push(node.value);
  }
  return arrays;
}
console.log(listToArray(list)); // -> [1, 2, 3]

javascript arrays object

Answer 1

Answer №1

Understanding the functionality of for loops:

Before delving into the intricacies of for loops, it's essential to grasp their underlying mechanism.

The for statement establishes a loop that comprises three optional expressions enclosed in parentheses, separated by semicolons, followed by a statement (typically a block statement) to be executed within the loop. ^MDN

The structure of the for loop is as follows:

for ([initialization]; [condition]; [final-expression])
   statement

The expressions initialization, condition, and final-expression can be any valid expressions. Any or all of these expressions can be omitted (for(;;) is valid in JavaScript and results in an infinite loop).

The execution of a for loop commences by performing the initialization expression if it is specified. Subsequently, it iterates through the following steps: checking if the condition is true, executing the statement(s) and final-expression in sequence if the condition is true, and halting the loop if the condition is false.

For instance, consider the diagram below ^{(image source)}:

https://i.sstatic.net/dr2hY.png

This diagram corresponds to the for loop presented below:

for(i = 2; i <= 6; i = i + 2)
  print i + 1

It is notable that the initialization part i = 2 is executed only once, while the remaining parts (the condition, the statement(s), and the final-expression) can be executed multiple times (in order) based on the condition.

Elucidation of the provided code snippet:

for (let node = list; node; node = node.rest) { // big question: how it works or possible?
  arrays.push(node.value);
}

The initialization segment of this loop declares the variable node and sets its value to the root element list. This segment is executed only once, at the beginning of the loop.

The condition part verifies whether node (the variable) is truthy or not. In JavaScript, an object is truthy while undefined is falsy. The objective of the loop is to traverse through the object from node to node (as demonstrated in the final-expression section below). When there is a child node, the subsequent value of node will be that node (truthy value), leading to a true condition. Conversely, if the child node does not exist, node will be undefined (falsy value), resulting in a false condition.

The final-expression simply assigns the value of node to the child node of the current node, denoted as node.rest. When this child node exists, node is an object; otherwise, it becomes undefined.

Answer 2

Understanding the functionality of for loops:

Before delving into the intricacies of for loops, it's essential to grasp their underlying mechanism.

The for statement establishes a loop that comprises three optional expressions enclosed in parentheses, separated by semicolons, followed by a statement (typically a block statement) to be executed within the loop. ^MDN

The structure of the for loop is as follows:

for ([initialization]; [condition]; [final-expression])
   statement

The expressions initialization, condition, and final-expression can be any valid expressions. Any or all of these expressions can be omitted (for(;;) is valid in JavaScript and results in an infinite loop).

The execution of a for loop commences by performing the initialization expression if it is specified. Subsequently, it iterates through the following steps: checking if the condition is true, executing the statement(s) and final-expression in sequence if the condition is true, and halting the loop if the condition is false.

For instance, consider the diagram below ^{(image source)}:

https://i.sstatic.net/dr2hY.png

This diagram corresponds to the for loop presented below:

for(i = 2; i <= 6; i = i + 2)
  print i + 1

It is notable that the initialization part i = 2 is executed only once, while the remaining parts (the condition, the statement(s), and the final-expression) can be executed multiple times (in order) based on the condition.

Elucidation of the provided code snippet:

for (let node = list; node; node = node.rest) { // big question: how it works or possible?
  arrays.push(node.value);
}

The initialization segment of this loop declares the variable node and sets its value to the root element list. This segment is executed only once, at the beginning of the loop.

The condition part verifies whether node (the variable) is truthy or not. In JavaScript, an object is truthy while undefined is falsy. The objective of the loop is to traverse through the object from node to node (as demonstrated in the final-expression section below). When there is a child node, the subsequent value of node will be that node (truthy value), leading to a true condition. Conversely, if the child node does not exist, node will be undefined (falsy value), resulting in a false condition.

The final-expression simply assigns the value of node to the child node of the current node, denoted as node.rest. When this child node exists, node is an object; otherwise, it becomes undefined.

Answer 3

Answer №2

Explaining the components of a for loop

Initialization - executed once (let node=list)
Continuation condition - checked on each iteration (node)
Next step - triggers when condition in 2 is true. Typically involves updating a variable from 1

Let's dive deeper into the process:

for(let node = list; node; node=node.rest)

Initially, a new variable node is created with the value of list
Then, it's verified that the node is not null or undefined. These falsy values result in false when coerced to boolean. If not falsy, arrays.push is executed, else the loop ends.
After that, node is updated with node.rest. Before arrays.push is executed with the new node, the condition is checked.
Ultimately, when node reaches

{
   value: 3,
   rest: null
}

step 3 of the loop updates node by assigning null to it. As a result, 2 fails and the loop is terminated.

Answer 4

Explaining the components of a for loop

Initialization - executed once (let node=list)
Continuation condition - checked on each iteration (node)
Next step - triggers when condition in 2 is true. Typically involves updating a variable from 1

Let's dive deeper into the process:

for(let node = list; node; node=node.rest)

Initially, a new variable node is created with the value of list
Then, it's verified that the node is not null or undefined. These falsy values result in false when coerced to boolean. If not falsy, arrays.push is executed, else the loop ends.
After that, node is updated with node.rest. Before arrays.push is executed with the new node, the condition is checked.
Ultimately, when node reaches

{
   value: 3,
   rest: null
}

step 3 of the loop updates node by assigning null to it. As a result, 2 fails and the loop is terminated.

Answer 5

Answer №3

To start off, let's look at the syntax of a for loop:

for (statement 1; statement 2; statement 3) {
    // code block to be executed
}

Statement 1 is executed (once) before the code block runs.

Statement 2 sets the condition for running the code block.

Statement 3 is executed (each time) after the code block has run.

During each iteration, you go deeper into the tree with node = node.rest. The loop ends when you try to access the rest property on a node that either doesn't have that key or it's set to null. This results in the value being undefined or null, both of which are considered false values in Javascript, causing the loop to stop.

Here's an example with debugging:

let list = {
   value: 1,
   rest: {
      value: 2,
      rest: {
         value: 3,
         rest: null
    }
  }
};

function listToArray(list)
{
    let arrays = [];
    
    for (let node = list; node; node = node.rest)
    {
        console.log("Current node is: " + JSON.stringify(node));
        console.log("Node value is: " + node.value);
        arrays.push(node.value);
        console.log("Next node will be: " + JSON.stringify(node.rest));
    }

    return arrays;
}

console.log(listToArray(list));

Answer 6

To start off, let's look at the syntax of a for loop:

for (statement 1; statement 2; statement 3) {
    // code block to be executed
}

Statement 1 is executed (once) before the code block runs.

Statement 2 sets the condition for running the code block.

Statement 3 is executed (each time) after the code block has run.

During each iteration, you go deeper into the tree with node = node.rest. The loop ends when you try to access the rest property on a node that either doesn't have that key or it's set to null. This results in the value being undefined or null, both of which are considered false values in Javascript, causing the loop to stop.

Here's an example with debugging:

let list = {
   value: 1,
   rest: {
      value: 2,
      rest: {
         value: 3,
         rest: null
    }
  }
};

function listToArray(list)
{
    let arrays = [];
    
    for (let node = list; node; node = node.rest)
    {
        console.log("Current node is: " + JSON.stringify(node));
        console.log("Node value is: " + node.value);
        arrays.push(node.value);
        console.log("Next node will be: " + JSON.stringify(node.rest));
    }

    return arrays;
}

console.log(listToArray(list));

Answer 7

Answer №4

You have the option to make this process recursive, which can simplify the explanation.

If the object is null, the array is returned as is. Otherwise, a call to the next rest is made and the value is added to the array.

obj = { value: 1, rest: {...} }, arr = []          // Add 1 to arr and return obj.rest
obj = { value: 2, rest: {...} }, arr = [ 1 ]       // Add 2 to arr and return obj.rest
obj = { value: 3, rest: null  }, arr = [ 1, 2 ]    // Add 3 to arr and return null
obj = null,                      arr = [ 1, 2, 3 ] // Return arr [ 1, 2, 3 ]

let list = {
  value: 1,
  rest: {
    value: 2,
    rest: {
      value: 3,
      rest: null
    }
  }
};

function listToArray(obj, arr = []) {
  return obj == null ? arr : listToArray(obj.rest, arr.concat(obj.value));
}

console.log(listToArray(list)); // -> [1, 2, 3]

.as-console-wrapper { top: 0; max-height: 100% !important; }

Answer 8

You have the option to make this process recursive, which can simplify the explanation.

If the object is null, the array is returned as is. Otherwise, a call to the next rest is made and the value is added to the array.

obj = { value: 1, rest: {...} }, arr = []          // Add 1 to arr and return obj.rest
obj = { value: 2, rest: {...} }, arr = [ 1 ]       // Add 2 to arr and return obj.rest
obj = { value: 3, rest: null  }, arr = [ 1, 2 ]    // Add 3 to arr and return null
obj = null,                      arr = [ 1, 2, 3 ] // Return arr [ 1, 2, 3 ]

let list = {
  value: 1,
  rest: {
    value: 2,
    rest: {
      value: 3,
      rest: null
    }
  }
};

function listToArray(obj, arr = []) {
  return obj == null ? arr : listToArray(obj.rest, arr.concat(obj.value));
}

console.log(listToArray(list)); // -> [1, 2, 3]

.as-console-wrapper { top: 0; max-height: 100% !important; }

Answer 9

Answer №5

for is like a shortcut for while, even though they are essentially the same with only a few minor differences:

for (let i=0; i<10; i++) {
  console.log(i);
}

let i=0;
while(i<10) {
  console.log(i);
  i++;
}

The structure of for is

for(initialization, test, iteration)

. For example:

for (let node = list; node; node = node.rest) { doSomething(node); }

Can be interpreted more plainly like this:

let node = list;
while(node) { 
  doSomething(node);
  node = node.rest;
}

Answer 10

for is like a shortcut for while, even though they are essentially the same with only a few minor differences:

for (let i=0; i<10; i++) {
  console.log(i);
}

let i=0;
while(i<10) {
  console.log(i);
  i++;
}

The structure of for is

for(initialization, test, iteration)

. For example:

for (let node = list; node; node = node.rest) { doSomething(node); }

Can be interpreted more plainly like this:

let node = list;
while(node) { 
  doSomething(node);
  node = node.rest;
}

Answer 11

Answer №6

If you're looking to access the nested object that contains value: 3, you can do the following:

 list.rest.rest // { value: 3, rest: null }

Alternatively, you can break it down into multiple lines like this:

 let node = list; // { value: 1, rest: { ... } }
 node = node.rest; // { value: 2, rest: { ... } }
 node = node.rest; // { value: 3, rest: null }

This process can be adapted for any number of repetitions using a loop:

 for(let node = list; node; node = node.rest) {
   //...
 }

Here's a real-world analogy:

Imagine you live in a small village with houses lined up along a single street from north to south. You live at the northern end, with Bob living next to you, and further down is Alice followed by Eve. To walk along the street to visit each house, you could go from Bob to Alice to Eve, or simply walk to the next house until you reach the end of the village.

 const bob = you.southernNeighbour;
 const alice = bob.southernNeighbour;
 const eve = alice.southernNeighbour;

 // ...

let current = you; // start where you are
while(current) // keep walking as long as there are houses 
  current = current.southernNeighbour; // move to the next southern neighbour

Answer 12

If you're looking to access the nested object that contains value: 3, you can do the following:

 list.rest.rest // { value: 3, rest: null }

Alternatively, you can break it down into multiple lines like this:

 let node = list; // { value: 1, rest: { ... } }
 node = node.rest; // { value: 2, rest: { ... } }
 node = node.rest; // { value: 3, rest: null }

This process can be adapted for any number of repetitions using a loop:

 for(let node = list; node; node = node.rest) {
   //...
 }

Here's a real-world analogy:

Imagine you live in a small village with houses lined up along a single street from north to south. You live at the northern end, with Bob living next to you, and further down is Alice followed by Eve. To walk along the street to visit each house, you could go from Bob to Alice to Eve, or simply walk to the next house until you reach the end of the village.

 const bob = you.southernNeighbour;
 const alice = bob.southernNeighbour;
 const eve = alice.southernNeighbour;

 // ...

let current = you; // start where you are
while(current) // keep walking as long as there are houses 
  current = current.southernNeighbour; // move to the next southern neighbour

Looping through an object

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

sending information back to a middleware using a resolved promise

Align dropdown navigation menu/sorting dropdown in the same position as the button

retrieve a string from a given array

Can a Handlebar variable be accessed using an external .js file?

"Exploring the Mini Drawer feature on Material UI brings up a whole new page for the Link

Organize information in a React table following a predetermined sequence, not based on alphabetical order

What is the process for updating information in Vue.js?

Ensure that the textbox remains safe from accidental keyboard inputs

What is the best way to halt a window.setInterval function in JavaScript?

Material UI React Autocomplete Component

What causes one CSS file's properties to be inherited by another CSS file in a React application?

Display routes in React using the react-router package

Discovering instances of a specific string within a larger string

Integrate the complete Mozilla pdf.js viewer into a Vue.js application using webpack through vue-cli

"Enhance your PHP/Laravel skills by learning how to insert a new array element into a

Guide to seamlessly navigating to an element using a hash in NuxtJS

Could you please explain the distinctions among onLoad, onDomready, No wrap - in <head>, and No wrap - in <body>?

Adjusting Laravel model, post data retrieval

Ways to increase the field count in PHP seamlessly with the help of JavaScript, jQuery, or AJAX, without the need to

What is the correct way to utilize "data:" in a jQuery AJAX call?