title: functional way to iterate 3 nested arrays
body: <p>I have a data structure that looks like this:</p>
  
  <pre><code>{
    sections: [
      {
        pages: [
          {
            questions: [
  
            ],
          },
        ],
      },
    ],
  }
  </code></pre>
  
  <p>There's data in the questions array that I'm trying to get at, and return a final 1 dimensional array at the end. There can be an <code>x</code> number of sections, each section can have an <code>x</code> number of pages, and each page can have an <code>x</code> number of questions. </p>
  
  <p>I'm trying to keep the code relatively concise but also readable, this is my current implementation:</p>
  
  <pre><code>function generateQuestionData(survey) {
      let data = [];
  
      survey.sections.forEach((section) =&gt; {
          section.pages.forEach((page) =&gt; {
              const newData = page.questions.map(getQuestionDataItem);
              data = [...data, ...newData];
          });
      });
  
      return data;
  }
  </code></pre>
  
  <p><strong>EDIT</strong></p>
  
  <p>Is there a way to accomplish the same thing without the <code>data</code> variable reassignment? so something along the lines of </p>
  
  <pre><code>function generateQuestionData(survey) {
      return survey.sections.forEach((section) =&gt; { // something instead of forEach
          section.pages.forEach((page) =&gt; page.questions.map(getQuestionDataItem));
          // data = [...data, ...newData]; no need for this?
      });
  }
  </code></pre>
  
  <p>if that makes sense</p>