From Python to Javascript: My Journey Into Javascript

My experience transitioning from Python to Javascript and all the twist and turns in my learning.

When I decided to go back into programming, I picked up and primarily worked in Python. Instantly, I fell in love. It was readable and quick to write. If you were like me and had to learn Java in undergrad, you know how much of a beautiful transition that was.

But I knew I would need to have to learn more. I needed to expand my horizons (and also not has the same pitfalls that many “self-taught” developers face). So I enrolled in a bootcamp.

To my surprise, this bootcamp heavily emphasized Javascript. I saw this as a great opportunity to learn what was new with ES6. (Spoiler alert: ES6 is a game-changer.)

What was even more surprising was the difference between Javascript and Python. I really struggled to understand why Javascript wasn’t behaving the way I expected. Why is 1 + “1” suddenly “11” but 1-“1”=1?

In this article, I hope to go into detail about what differences — or quirks — I found when I went from Python to Javascript, and hopefully, you won’t have the same issues. (Many of the points I am going to mention are inspired by RealPython’s Python vs. Javascript for Python Devs)

Arrays vs. Lists

Unlike Python, Javascript has arrays instead of lists. This semantic difference is small, but I often found myself referring to arrays as lists. That said, it is a small change and one you can probably pick up on quickly.

Where things get really complicated is how arrays differ from lists. First of all, when you delete something from your array, the array leaves an empty spot where you deleted the item. This can be weird. Why wouldn’t delete just delete the item from the array and shift everything?

This can be a problem for a myriad of reasons. For example, the array length won’t change. So if you need to check the length after deletion, you will see no change! Another example would be if you needed to iterate through the array — error empty item. But I deleted it! No, no, Javascript just left an empty item in that spot.

Instead, you need to splice the array from the index you want to remove, and then optionally how many items you want to remove.

Alternatively, you can be more functional and instead of mutating the original array, you can return a new array with everything but the removed item. This can be achieved by slice. Slice the array from the starting point until the item(s) you want to delete and concatenate it with another slice from the item after the deleted one(s). This is a bit longer and complex to write, but has the advantages of fuctional programming.

Another difference between arrays and lists is that the “in” keyword is meant for objects and properties and cannot be used to find whether an item is in an array. “In” checks whether a given key is in an object. This can be confusing since if I want to see if a given number is in an array, it will return true if the array has said index — but the array still might not have that number in it.

Lastly, sorting in arrays only works for strings. Want to sort numbers? Well that won’t behave how you might expect! It will convert each of the numbers into a string and order the string version of the number. 100 will be sorted before 2 and 83 before 7. It will not be in numerical order at all. Instead, you will need to specify in the sort method how you would like to sort — in this case, you would need to do the following:

array.sort((a,b) => a - b)

Equality: Too Much Equality!

In Python, it is quite simple: is variable x equal to variable y.

>>> x = 1
>>> y = 1
>>> x == y
True
>>> x == "1"
False

In Javascript, there are two different ways of checking equality — the double equals and triple equals. Double equals will typecast then compare the two variables, while triple equals will check that the types are the same and if they are the same then it will compare the two.

The double equals will have weird behavior if you are not careful. See the below example:

> [1] == 1
true

This happens, even though the thing of the left is an array, not a single number. It is best to always use triple equals to prevents such issues, but some Javascript programmers take advantage of this quirk in interesting ways. Kyle Cook, from WebDevSimplified, has a great example of when it might be smart to use double equals — when comparing null and undefined.

Much Ado About Nothing

Null vs. Undefined

This brings me to my personal pet peeve — the existence of two ways of representing empty. Javascript has two ways of saying nothing: null and undefined. Defined, but uninitialized variables get undefined, while null will be explicitly assigned to a variable.

This is Javascript’s way of differentiating between “I want this to be empty” and “This wasn’t initialized with a value.” This difference can be seen when you compare the two. Null is not strictly the same as undefined, but can be loosely compared with a double equals.

Another weird aspect of these two “nothing” values is that null is treated like a number, while undefined is not. If you check if null is not a number (NaN), then you get false — it is a number? But if you check if undefined is a number, you get true — it isn’t a number, as I would expect.

Checking if null is not a number

Checking if undefined is not a number

If you try to do any mathematical operation on null, Javascript treats it like zero, while if you do the same operations on undefined it will return NaN (Not a Number). This complicates things and can be quite confusing to the uninitiated.

Lastly, the type of null is an object, while the type of undefined is undefined. This can lead to weird behavior since if you are expecting an object back from something you could get an object back — but that object is null.

As you have seen, there are some quirks to look out for. Hopefully, you will avoid some of the gotcha’s that I found when learning Javascript. If you want to see more, take a look at WTF Javascript for a longer list of weird things in Javascript.