Functional vs non-Functional loops in Javascript

Question

What I want to do is return an array of objects based a dynamic size, I feel like I might be doing this in an overly complicated way but i’m also trying to do things in a more functional manner these days.

Here is how I would do it in the non-functional manner

function nonFunctional(size) {
  let foo = [];

  for (let index = 0; index < size; index++) {
    foo.push({ bar: "baz" });
  }

  return foo;
}

Here is how i’m trying to do it in a Functional manner

function functional(size) {
  return [...new Array(size)].map(() => {
    return {
      bar: 'baz'
    }
  });
}

Is this the best way to do this in a functional way?
What are some advantages/disadvantages of doing it this way vs the "traditional" way?
Is this really even functional programming related?

Your code isn't functional, because you pass a thunk to map, i.e. a function without arguments. In FP in conjunction with a strict evaluated language explicit thunks are only used to obtain lazyness. Also in Javascript with its lack of a type system and the guarantees such a system entails, you can apply mutations locally, so that they are not observable in the parent scope. — user5536315
– user5536315, Commented May 17, 2019 at 6:54

Jonas Wilms · Accepted Answer · 2019-05-16 19:05:57Z

1

I'd do (not necessarily better):

  return Array.from({ length: size }, () => ({ bar: "baz" }));

Your functional way is less readable (IMO), and it creates two unnecessary intermediate arrays (the engine might optimize it away, but ... well might)
"functional / imperative programming" is not black and white. Code can be rather functional or rather imperative or purely functional, but all that depends on the one you ask.

answered May 16, 2019 at 19:05

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

JeffBeltran Over a year ago

thanks for the reply, not sure why everything was getting downvoted though. As for readability that was one of my concerns but i think i like what you said. This is likely the best response i'll get. Thanks again

Jonas Wilms Over a year ago

@jeffbeltran it could count as opinionated / too broad and could be seen off-topic. SO is democratic after all, two people think that the answer is inappropriate, three think that it is apprppriate (or is that your upvote ;)), the majority wins :)

Mulan Over a year ago

Array.from(Array(size), ...) will be more clear to those that aren't familiar with JS's odd "array-like" behavior.

Mulan · Accepted Answer · 2019-05-18 00:20:44Z

1

You're off to a great start by identifying that this behavior should be isolated in its own function. But "functional" isn't limited to common methods like map, reduce and filter.

Consider buildArray below -

const identity = x =>
  x
  
const buildArray = (size = 0, f = identity) =>
  size === 0
    ? []
    : [ ...buildArray(size - 1, f), f(size - 1) ]
    
console.log(buildArray(5))
// [ 0, 1, 2, 3, 4 ]

console.log(buildArray(5, x => x * x))
// [ 0, 1, 2, 3, 16 ]

console.log(buildArray(3, () => ({ a: 1 })))
// [ { a: 1 }, { a: 1 }, { a: 1 } ]

console.log(buildArray())
// []

edited May 18, 2019 at 0:20

answered May 17, 2019 at 14:18

Mulan

136k35 gold badges240 silver badges276 bronze badges

1 Comment

JeffBeltran Over a year ago

this is amazing thank you. while my example was very contrived that last bit is what i was actually trying to do.

Collectives™ on Stack Overflow

Functional vs non-Functional loops in Javascript

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related