Although Python and JavaScript are quite different languages, there are some analogies which full stack Python developers should know when developing web projects. In this series of 4 parts, I will explore what is similar in each of those languages and what are the common ways to solve common problems. This is not meant to be a reference and I will skip the basics like primitive variable types, conditions, and loops. But I will dig into more complex structures and data operations using both, Python and JavaScript. Also, I will try to focus on the practical use cases. This series should be interesting for the developers of Django, Flask, or another Python framework who want to get a grasp of traditional and modern vanilla JavaScript. On the other hand, it will be useful for the front-enders who want to better understand how the backend is working and maybe even start their own Django website.
Parsing integer
We'll begin with integer parsing.
In Python that's straightforward:
number = int(text)
But in JavaScript you have to explain what number system you expect: decimal, octal, hexadecimal, or binary:
number = parseInt(text, 10);
To use the "normal" decimal number system we are passing number 10 as the second parameter of the parseInt() function. 8 goes for octal, 16 for hexadecimal, or 2 - for binary. If the second parameter is missing, the number in text starts with zero, and you are using a slightly older browser, the number in the text will be interpreted as octal. For example,
parseInt('012') == 10 // in some older browsers
parseInt('012', 10) == 12
And that can really mess up your calculations.
Conditional assignment
For conditional assignment, Python and JavaScript have different syntaxes, but conditional assignments are quite popular in both languages. That's popular, because it's just a single statement to have a condition checking, the true-case value, and the false-case value.
Since Python 2.7 you can write conditional assignments like this:
value = 'ADULT' if age >= 18 else 'CHILD'
In JavaScript conditional assignments are done using ternary operator ?:, similar to the ones in C, C++, C#, Java, Ruby, PHP, Perl, Swift, and ActionScript:
value = age >= 18? 'ADULT': 'CHILD';
Object attribute value by attribute name
The normal way to access an object's attribute is by the dot notation in both, Python and JavaScript:
obj.color = 'YELLOW'
But what if you want to refer to an attribute by its name saved as a string? For example, the attribute name could be coming from a list of attributes or the attribute name is combined from two strings like 'title_' + lang_code.
For that reason, in Python, there are functions getattr() and setattr(). I use them a lot.
attribute = 'color'
value = getattr(obj, attribute, 'GREEN')
setattr(obj, attribute, value)
In JavaScript you can treat an object like a dictionary and pass the attribute name in square brackets:
attribute = 'color';
value = obj[attribute] || 'GREEN';
obj[attribute] = value;
To retrieve a default value when an object has no such attribute, in Python, getattr() has the third parameter. In JavaScript, if obj attribute doesn't exist, it will return the undefined value. Then it can be OR-ed with the default value that you want to assign. That's a common practice in JavaScript that you can find in many JavaScript libraries and frameworks.
Dictionary value by key
This is similar to the previous one. The normal way to assign a dictionary's value by key in both languages is using the square brackets:
dictionary = {}
dictionary['color'] = 'YELLOW'
To read a value in Python you can use the square-bracket notation, but it will fail on non-existing keys with KeyError. The more flexible way is to use the get() method which returns None for non-existing keys. Also you can pass an optional default value as the second parameter:
key = 'color'
value = dictionary.get(key, 'GREEN')
In JavaScript you would use the same trick as with object attributes, because dictionaries and objects are the same there:
key = 'color';
value = dictionary[key] || 'GREEN';
Slicing lists and strings
Python has the slice [:] operator to get parts of lists, tuples, and similar more complex structures, for example Django QuerySets:
items = [1, 2, 3, 4, 5]
first_two = items[:2] # [1, 2]
last_two = items[-2:] # [4, 5]
middle_three = items[1:4] # [2, 3, 4]
In JavaScript arrays have the slice() method with the same effect and similar usage:
items = [1, 2, 3, 4, 5];
first_two = items.slice(0, 2); // [1, 2]
last_two = items.slice(-2); // [4, 5]
middle_three = items.slice(1, 4); // [2, 3, 4]
But don't mix it up with the splice() method which modifies the original array!
The [:] slice operator in Python also works for strings:
text = 'ABCDE'
first_two = text[:2] # 'AB'
last_two = text[-2:] # 'DE'
middle_three = text[1:4] # 'BCD'
In JavaScript strings just like arrays have the slice() method:
text = 'ABCDE';
first_two = text.slice(0, 2); // 'AB'
last_two = text.slice(-2); // 'DE'
middle_three = text.slice(1, 4); // 'BCD'
Operations with list items
In programming it is very common to collect and analyze sequences of elements. In Python that is usually done with lists and in JavaScript with arrays. They have similar syntax and operations, but different method names to add and remove values.
This is how to concatenate two lists, add one value to the end, add one value to the beginning, get and remove a value from the beginning, get and remove a value from the end, and delete a certain value by index in Python:
items1 = ['A']
items2 = ['B']
items = items1 + items2 # items == ['A', 'B']
items.append('C') # ['A', 'B', 'C']
items.insert(0, 'D') # ['D', 'A', 'B', 'C']
first = items.pop(0) # ['A', 'B', 'C']
last = items.pop() # ['A', 'B']
items.delete(0) # ['B']
This is how to do exactly the same with arrays in JavaScript:
items1 = ['A'];
items2 = ['B'];
items = items1.concat(items2); // items === ['A', 'B']
items.push('C'); // ['A', 'B', 'C']
items.unshift('D'); // ['D', 'A', 'B', 'C']
first = items.shift(); // ['A', 'B', 'C']
last = items.pop(); // ['A', 'B']
items.splice(0, 1); // ['B']
Joining lists of strings
It is very common after having a list or array of strings, to combine them into one string by a separator like comma or new line.
In Python that is done by the join() method of a string where you pass the list or tuple. Although it might feel unnatural, you start with the separator there. But I can assure that you get used to it after several times of usage.
items = ['A', 'B', 'C']
text = ', '.join(items) # 'A, B, C'
In JavaScript the array has the join() method where you pass the separator:
items = ['A', 'B', 'C'];
text = items.join(', '); // 'A, B, C'
The Takeaways
- List and tuples in Python are similar to arrays in JavaScript.
- Dictionaries in Python are similar to objects in JavaScript.
- Strings in Python are similar to strings in JavaScript.
- Numbers in JavaScript should be parsed with care.
- Single-line conditional assignments exist in both languages.
- Joining sequences of strings in Python is confusing, but you can quickly get used to it.
I compiled the whole list of equivalents of Python and JavaScript to a cheat sheet that you can print out and use for good. Side by side it compares traditional Python 2.7 and JavaScript based on ECMAScript 5 standard, as well as newer Python 3.6 and JavaScript based on ECMAScript 6 standard with such goodies as string interpolation, lambdas, generators, classes, etc.
Get the Ultimate Cheat Sheet of
Equivalents in Python and JavaScript
✨✨✨
In the next part of the series, we will have a look at JSON creation and parsing, operations with regular expressions, and error handling. Stay tuned!
Cover photo by Benjamin Hung.
Top comments (1)
You can find all 4 parts of the series here: Part 1, Part 2, Part 3, Part 4
Also feel free to buy the cheat sheet which will surely save you time when looking for the correct methods or syntax in your lesser known language.