DEV Community

loading...
Cover image for What Javascript features are the most confusing to you?

What Javascript features are the most confusing to you?

murkrage profile image Mike Ekkel ・1 min read

In an effort to help out aspiring developers, I’m interested in hearing about what you think the most confusing parts of Javascript are.

I’ll try my best to explain a concept and, hopefully, others will chime in 😊.

This is a safe space, which means all questions are good questions!

Discussion (10)

pic
Editor guide
Collapse
pris_stratton profile image
pris stratton

One thing I have never wrapped my head around is Symbols. I get that they’re unique objects and I understand some of the use cases I’ve seen.. but what are they under the surface?

Collapse
murkrage profile image
Mike Ekkel Author

Great question! I don't fully understand Symbols myself, but I do know that they are a primitive data type under the surface. This means they are, data wise, the same as numbers (int / float), booleans, strings, etc. They cannot be mutated (=ability to change) just like the other primitives.

From what I understand, their main use case is being an identifier for object properties.

Collapse
pris_stratton profile image
pris stratton

Yeah I think the time I saw them used that made sense was in the O’Reilly book Learning JavaScript where they were used to prevent an object property being accessed directly - they’d have to be accessed using get or set methods instead. But I think there are easier ways to achieve this like proxies.

Collapse
pinich profile image
Pini Cheyni

Splice & Slice, I think the names are even confusing.

Collapse
murkrage profile image
Mike Ekkel Author

These gave me such a headache when I started out and they sometimes still do. It warrants its own post, but I'll write it down for you anyway!

Aside from their names being incredibly similar they also appear to do the exact same thing, albeit in different ways, from a distance. This is because the returned value is, more or less, the same: the portion of the array you run the method for. This is also where the similarities stop.

Slice

Slice is the easier of the two to explain, so I'll start there.

Array.slice(startIndex, endIndex) will return a copy of the array from the starting index up until (not including) the ending index you've provided without changing the original array. If you don't provide an endIndex, it will go until the end of the array.

const numbers = [0, 1, 2, 3, 4, 5]
const slicedNumbersNoEnd = numbers.slice(2) // Will return [2, 3, 4, 5]
const slicedNumbers = numbers.slice(2, 4) // Will return [2, 3]
Enter fullscreen mode Exit fullscreen mode

Splice

Splice has a two gotchas that you need to be aware of. The first one being that splice changes the original array. The second one is the fact that there are three things you can do with splice:

  1. Remove part of the array
  2. Replace part of the array with a new value
  3. Insert something new anywhere within the array

The syntax for splice is: Array.splice(startIndex, itemAmount, replacingItems). I'll show you what they mean based on the three things you can do with splice. The only required parameter is startIndex.

Removing part of the array

Let’s say you are running a race and there are 6 finishers. To figure out who to give a trophy, you want to eliminate everyone except the top three. Everyone outside of the top three will get a medal.

// Top three trophies
const finishers = [1, 2, 3, 4, 5, 6]
finishers.splice(3)
console.log(finishers) // [1, 2, 3]
Enter fullscreen mode Exit fullscreen mode
// Medals outside of top three
const finishers = [1, 2, 3, 4, 5, 6]
finishers.splice(0, 4)
console.log(finishers) // [4, 5, 6]
Enter fullscreen mode Exit fullscreen mode

The above example can be done in a single go because Array.splice() returns the deleted portion of the array. This is what that would look like:

const finishers = [1, 2, 3, 4, 5, 6]
const medals = finishers.splice(3)

console.log(finishers) // [1, 2, 3]
console.log(medals) // [4, 5, 6]
Enter fullscreen mode Exit fullscreen mode

Replacing part of the array with a new value

Let’s say you want to fix the following array:

const months = ['January', 'September', 'March', 'April']
Enter fullscreen mode Exit fullscreen mode

Obviously, September is wrong and you want to replace it with February. Here’s what that would look like:

const months = ['January', 'September', 'March', 'April']
months.splice(1, 1, "February")

console.log(months) 
// ['January', 'February', 'March', 'April']
Enter fullscreen mode Exit fullscreen mode

Inserting something new anywhere within the array

Using the same sort of example as above, let’s say you forgot to add a month in your array:

const months = ['January', 'March', 'April']
Enter fullscreen mode Exit fullscreen mode

If you want to add February to the array, you can use the exact same setup as the example above except we don’t delete any elements:

const months = ['January', 'March', 'April']
months.splice(1, 0, "February")

console.log(months) 
// ['January', 'February', 'March', 'April']
Enter fullscreen mode Exit fullscreen mode
Collapse
madza profile image
Madza

Classes and all that 'this' stuff associated with it 😉
I'm glad React moved to hooks (tho classes are still supported) 😉

Collapse
pris_stratton profile image
pris stratton

‘This’ can be the source of confusion to even veteran coders I think. And not just in JS.

The fact it can mean different things in different contexts in JS makes it hard to work with sometimes.

Collapse
frondor profile image
Federico Vázquez

Generators

Collapse
ivanjeremic profile image
Ivan Jeremic

Regex in every language😂

Collapse
patarapolw profile image
Pacharapol Withayasakpunt

WeakMap, WeakSet. I haven't even tried.