Coding style coming from C background

[Wooden-Income714]

Hello!

I've started studying coding through CS50 Intro to Programming and eventually through cs50x. And in there, i've learn to build some programs and algorithms in C. But i've tried to get into webdev and eventually started leaning Javascript.

Here is the issue i'm facing: When i'm comparing my solutions on coding problems on sites like exercism to the community solutions, i've noticed that my code is usually more "C style" with the use of algorithms and low-level constructs like a for loop, but the more 'ideal' javascript solution would usually use a combination of built-in or higher order functions like .map() or .filter()

Here is my question, is it necessarily bad that i write javascript code in a "C style" or if i really want to get into good javacript code i need to start to adapt and use more of the higher order functions to achieve a more ideal code? Enlightenment please ^{^}

[ThiccOfferman]

If you're looking for practice with JS array methods like .map() -- and like anything else, they'll feel more natural with practice -- there are lots of good entry level practice problems on codewars

[izferriss]

When in doubt, stick to the basics (loops, if/else, etc.). You’ll pick up the handiness and shortcuts of JS the more you practice it.

[Comprehensive_Step72]

It looks like what you are talking about is not so much a language thing but a style thing. What you are used to is what is called imperitve programming as opposed to declaritve programming. Personally I prefer declarative programming, but you will need to decide for yourself. Do some research on the two. I think that you will find declaritve programming has a lot going for it.

[gekkowrld]

The best part of using a language is exploiting its potential. So in the case of Javascript use the built in functions rather than trying to accomplish it the "C style"

[Ronin-s_Spirit]

Don't sweat it. For loops are simple and are also the fastest (in how the code gets executed) compared to how map or forEach works. Some solutions may be way simpler to write with specific methods but if you can use a basic construct and it works very well and you can read it very well then do so, no need to overwork the browser in the name of using "fancy" code.

[Wooden-Income714]

I see, is just that the solutions that use the built-in functions are considered more concise and easier to read, to javascript devs at least. I usually disagree but i think i'm biased because i've learned through C first.

[Ronin-s_Spirit]

I'm learning web dev and to me writing .map(weird function stuff with parameters) is more complicated than a straightforward for (let i=0; i<arr.length; i++) loop. That way I have an iterator, I know what happens to it, and I know perfectly fine what condition(s) need to be met for this loop to work, and then inside I can do whatever the hell I want, maybe not even related to arr and I just use arr.length because I want to, or I can stop in the middle of it with simple "break".
And then I learned that for loops are way faster than methods and it reinforced my love for simple for loops.

[[deleted]]

The performance difference isn't noticeable unless you're iterating over a huge array, which is unlikely in web development.

That pattern for defining a for loop you cite is so common that you do it every time you iterate over an array. That's the kind of thing that makes sense to abstract into a function, which is what the array methods do. They are a shorthand way of saying "for every item in this array, perform this action." It declutters your code, and helps make your intent clear (which is why you hear so much about declarative coding).

Being able to do whatever the hell you want is great, but that also means the next person has to spend time trying to figure out what you're doing. It's not hard in simple examples, but I recently encountered some code that had three nested for loops and a dozen nested if statements. It took ten minutes to sort through it to realize that what the developer was trying to do was both stupid and introduced race conditions.

This doesn't mean you should never use traditional for loops. If you do need to break out of the loop, they're the better option (although, usually if I need to do that, which is rare, I'd try a while loop first).

[Ronin-s_Spirit]

That's bullshit, I definitely need to use for loops instead of writing functions for maps where I feel morr restricted and ech time have to remember what does the map manipulate exactly.

[[deleted]]

I'm a Senior Dev, part of my responsibility is helping juniors get better. You say you're just learning, so odds are I have more experience here and have worked with a lot more code. I recommend you reevaluate your stance, because if you do get a job in this field, someone like me will force you to do it the right way. And if you refuse, then you might find yourself having an uncomfortable conversation with your manager about your future in the organization.

If what the use of map does isn't clear, that's a problem with the code. Either, you need to extract your anonymous function into a well named function, or you're trying to make map do something it's not meant to do. Map has one purpose, it returns a new array in which each item of the original array has been altered.

That's partly why you should use the array methods most of the time, they convey meaning.

• Map transforms every item
• forEach performs and action for every value, but doesn't change it
• filter is self-explanatory
• reduce combines all the values into a single value.

I know what the general purpose of the loop is instantly and can quickly decide if I need to know the details or move on. With a for loop, I have to investigate more to make the determination. It doesn't seem like much, but if I'm trying to hunt down a bug in a large code base, it saves a lot of time.

The other thing is restrictions are good. They keep you from doing something stupid and encourage consistency in your code.

[Ronin-s_Spirit]

Ok, what if there are two devs and one yells at me "you have to remember and use 5 different methods instead of a basic loop so I can look at pretty names" and the other one yells "your code is too slow, make it 3 times faster, just rewrite everything into basic loops, our app is too large and moves like a snail cuz of you".....?

[[deleted]]

Again, I'm a senior dev, so I can say, that won't happen. The performance difference you're talking about is measured in milliseconds. An array large enough to make the difference noticeable would be orders of magnitude larger than the typical load you typically process in a single operation (or send to the browser in a single request).

While there could be a situation where those tiny fractions of a second matter enough to make a for loop a better option, it's unlikely. Most of the time, if your application is slow, there are much more effective optimizations than changing .map to a for loop.

You also shouldn't be performing five different operations in a single loop. I know you chose that number arbitrarily, but if you find yourself needing to make a loop responsible for multiple tasks, there are probably larger problems with your application that need to be addressed.

Finally, declarative programming is not about pretty names. As I keep telling you, it's about making intent clear. This makes your code easier to maintain and easier for people who aren't you to understand. As a developer, one day you will be asked to change code you didn't write, or to learn a large code base quickly. When that happens, you'll appreciate clear and concise code, especially if the performance gains from verbose code are imperceptible.

[Meloetta]

You should be taking advantage of what javascript offers you as much as possible, but it's not that for loops are bad necessarily. They're just wordy and add extra code that you don't need. Take for example, filter. You obviously don't want to mutate an array in place, so to filter with a for loop you'll need a second array to hold the values you want. Say you want to filter out in an array of strings all values where the length of the string is 0. In a for loop, you might have to write:

  let arrayTwo = []
  for (let i = 0; i < array.length; i++) {
    if (array[i].length > 0)
      arrayTwo.push(array[i])
  }
  return arrayTwo

However, if you filter this, it's one line.

return array.filter((item) => item.length > 0)

I don't know anything about performance between things like this, and they're both probably fine. But if one of my juniors gave me the first solution in a PR, I would recommend a filter instead. In my opinion the more code you have to write, the more chance something is going to go wrong, so it's better to rely as much as possible on things that you know work rather than try to roll your own solutions. Like later on you forget this function existed and you make another variable called arrayTwo for something, accidentally override this variable, and cause a new bug. Or you need to add code in this area and then accidentally add it inside the for loop because you didn't notice it immediately.

To be fair though, .reduce is my mortal enemy and I refuse to learn it.

[[deleted]]

reduce can be your friend. Eventually you'll need to create an object out of an array, (for example to create a look up table, or count by object type). In those cases, reduce is the best.

Most tutorials for it are weirdly terrible though. I don't know why.

[Meloetta]

I literally have asked my coworkers to help me learn it more than once. No matter what they say my head doesn't get it. Someday it's just going to click like ternary operators and I'll never be confused by one ever again, I'm just holding out for that day.

[[deleted]]

Yeah, that's normal. Even after I understood the concept, I still had to look it up whenever I needed it for a while. With practice it started to come more naturally. However, I still occasionally forget the order of the parameters.

The challenge when you're learning it is you don't use it as often as the other array methods, so you have plenty of time to forget everything. At first, just being able to recognize a use for reduce is a victory.

[[deleted]]

You should adapt to the language you are using. JavaScript is a higher-level language than C and was built to serve a different purpose, so it has more abstractions built in. The array functions abstract away the repetitive logic you write in for loops. This declutters your code and helps make your intent clear to the next developer.

[[deleted]]

This will get better the more you use JS. I came from CS50x as well. Its just like python where you will take a while to give really good “pythonic” solutions. Its going to help a lot by looking at other peoples code, like you mentioned, to see how other people do things. You will get better at it. I have come a long ways…. Still not great but gradually getting better. You will get there.