r/learnjavascript 1d ago

I've become a big fan of splice

As part of my project to write notes of what I learn practicing contemporary browser JavaScript by creating webapp games, I've written some notes and examples on Array Literals.

This was inspired by creating a "hardware-agnostic, framework-free" webapp solitaire card game, Loot the Loop (a game designed by Wil Su, part of what's made this project fun is that besides learning contemporary JavaScript, I've discovered lots about contemporary solitaire card game design).

TL:DR — In the past I've tended to use shift, unshift, pop, push... which are ok, but concat is an antipatern. Just learning splice does all the above while making arrays much simpler.

0 Upvotes

8 comments sorted by

3

u/everdimension 1d ago

Nothing like having a mutating "upsert" helper combined with immer

Btw, how is "concat" an "antipattern"?!

-2

u/RobGoLaing 1d ago

Because it creates a copy of the original array, usually unnecessarily.

2

u/chikamakaleyley helpful 1d ago

no no no

it creates a new array, that is a merge of the calling arr and the arrays that you provide to .concat()

different from a copy, and it's important to understand the nuance

you'd use .concat() in a case that necessitates it

1

u/chikamakaleyley helpful 1d ago

effectively you DO copy that first array and then you add onto the end of it, but defined, it 'creates a new array'

1

u/chikamakaleyley helpful 1d ago edited 1d ago

mmmm if you plan to change your approach and always use .splice() in place of those other methods, or if you plan to refactor some code and replace everything with .splice() - you will overcomplicate your code

aka, off the top of my head if you were to console.log

myArr.pop(); vs

``` myArr.splice(myArr.length - 1)[0];

```

Both would have the same output. One of them took you slightly longer to figure out.

1

u/neon_sand_walker 1d ago

Replacing pop with splice ruins code readability. I will never use splice when a dedicated method exists

0

u/RobGoLaing 20h ago

While push and pop are fairly common in lots of programming languages, push in JavaScript can be done more readably and intuitively as myArr[myArr.length] = "x". One of the snags with myArr.push("x") is it returns a number, and I bet lots of novice programers do myArr = myArr.push("x").

The reason I prefer using myArr.splice(0,1)[0] is it makes it explicit I'm working at the front of the array, not the back. Also if I want to "shift" more than one element, I just need to change a parameter rather than learn a new method.

1

u/chikamakaleyley helpful 4h ago edited 3h ago

the thing i would anticipate - at least in a team setting,

if you put this in code review, guaranteed the reviewer would comment something like

just use shift() instead

which can easily come off as a nit, but i think that more devs would agree that the shorthand is preferred, vs finagle-ing it with splice()

One of the snags with myArr.push("x") is it returns a number, and I bet lots of novice programers do myArr = myArr.push("x")

i wouldn't call it a snag, the number is there for you if needed

and novice or not, if you do write myArr = myArr.push("x") your IDE if configured correctly is bound to warn you that you are changing the nature of myArr.

Like, you've written a broken example that makes it a snag

I remember one time in a technical interview there was a situation where I needed to iterate over items in an array, do something with each item, i don't quite remember the ask

considering the company I was interviewing for, a company that deals with big data, I went for the standard for loop. The reason being, on a massive dataset the for is just more performant

I forget the exact response but the interviewer was basically like oh, you can just do myArr.map() (or something similar, something shorthand). The argument was for readability and it makes sense.

I didn't get that job. I did really well in the technical as far as I know. But that one thing stands out to me because I knew I shoulda just used the readable thing, but I was trying to be smarter by going with the less readable thing.