Not all elements of an array are returned by an arrow function with conditionals

Question

Not all elements of an array are returned by an arrow function with conditionals

My array looks like this:

var arr = ['one', 'two', ['three', 'four']];

When attempting to use arrow functions to return each element, the third element shows up as undefined instead of the actual values. I've tried restructuring it without success. While I could resort to using a for loop and push method, I prefer to grasp how to properly utilize arrow functions in situations like this.

arr.map(e => {
 if(typeof(e) == "object"){
    e.map(t => t)
  } else{ return e; }
})

Any insights on this issue would be greatly appreciated. The desired output should be an array like so: ['one', 'two', 'three', 'four'].

javascript arrays arrow-functions ecmascript-2016

Answer 1

Answer №1

Array.prototype.map() does not have the functionality to flatten an array. Even if .map() could flatten an array, the code snippet e.map(t => t) does not actually return anything from the callback function within .map().

arr.map(e => {
 if(typeof(e) == "object"){
    e.map(t => t) // no value is `return`ed here
  } else{ return e; }
})

There are multiple approaches and methods in JavaScript's Array that can be utilized to flatten an Array, such as .flat(), .flatMap(), and .concat(). For more details, you can refer to Merge/flatten an array of arrays in JavaScript?

Answer 2

Array.prototype.map() does not have the functionality to flatten an array. Even if .map() could flatten an array, the code snippet e.map(t => t) does not actually return anything from the callback function within .map().

arr.map(e => {
 if(typeof(e) == "object"){
    e.map(t => t) // no value is `return`ed here
  } else{ return e; }
})

There are multiple approaches and methods in JavaScript's Array that can be utilized to flatten an Array, such as .flat(), .flatMap(), and .concat(). For more details, you can refer to Merge/flatten an array of arrays in JavaScript?

Answer 3

Answer №2

In order to get the desired outcome, you can utilize the following method of using reduce to extract all elements from an array encapsulated within another array.

var arr = ['one', 'two', ['three', 'four']];

console.log(arr.reduce((acc, v) => {
  typeof(v) == 'object' ? acc.push(...v) : acc.push(v)
  return acc
}, []))

Check out the codepen here - https://codepen.io/nagasai/pen/NJKdKv

Answer 4

In order to get the desired outcome, you can utilize the following method of using reduce to extract all elements from an array encapsulated within another array.

var arr = ['one', 'two', ['three', 'four']];

console.log(arr.reduce((acc, v) => {
  typeof(v) == 'object' ? acc.push(...v) : acc.push(v)
  return acc
}, []))

Check out the codepen here - https://codepen.io/nagasai/pen/NJKdKv

Not all elements of an array are returned by an arrow function with conditionals

Answer №1

Answer №2

Similar questions

Vue project encountering issue with displayed image being bound

Achieving successful implementation of SSAO shader on SkinnedMesh models

Encountered an error with Aurelia webpack 4 when trying to load a necessary CSS file during runtime

Find and return a specific record from MongoDB if it matches the exact value

What is causing Vue.js to lag slightly? Why is jQuery necessary to retrieve the current value?

Transforming a canvas element into an image sans the use of toDataURL or toBlob

Are you interested in monitoring the website's past activity?

Activate a click event on an element using Simple HTML DOM

How can I use a string argument in JavaScript to sort an array of objects by that specific value?

Guide on implementing EdgesHelper with imported Collada model using three.js

Ways to display a box following the submission of a value within a form

Using Jquery to duplicate an element without assigning a different name

Dynamically assigning classes based on the element that is being scrolled beyond

Reposition picture "overlays" additional HTML components

What is the best way to divide an array into groups of four elements when using ngFor

Add a new key-value pair to the mock data by clicking on it

Make sure to use jQuery waterfall 'reflow' only once all the images have finished loading

Encountering the error message: "Function arguments could not be parsed ()=>"

How long is a 2D array in JavaScript after adding an element?

Can you provide me the steps to delete the title attribute from images in Wordpress?