2.6. JavaScript Data Types

There are five primitive types in JavaScript

Lets look at a simple example that demonstrates some ideas with numbers.

Next, lets look at the JavaScript equivalent.

There are several new concepts introduced in this example. We will look at them in the following order:

2.6.1. Declaring Variables

JavaScript has three scopes – global, function, and block. Any variable declared outside of a function belongs to the global scope, and is therefore accessible from anywhere in your code. Each function has its own scope, and any variable declared, using var, within that function is only accessible from that function and any nested functions. You can also declare a variable to be local to a block, such as inside a loop or an if statement using let. If you think carefully about this you may realize that function scope is kind of redundant with block scope, after all a function defines its own block. You would be right, but JavaScript has been changing and the introduction of let to create block level scope is pretty new. In fact many programmers have hurt themselves over the years by assuming that JavaScript had block level scope when it actually did not. Thankfully, those days are over provided you use the right syntax. The best advice I have seen is to stop using var and just use let in your code.

Both Python and JavaScript are dynamically typed languages. In a dynamically typed language a variable can refer to any kind of object at any time. When the variable is used, the interpreter figures out what kind of object it is. However JavaScript allows you to declare a variable to determine its scope. Undeclared variables in JavaScript have global scope, which is definitely not what you usually want.

In the example above, we show an old style declaration of the fahr variable. This ensures that fahr is a local variable to the function. The const declaration of the ratio makes ratio read only. If you add a line later in the function and try to change ratio you will get an error. The new style let declaration creates a variable that also has function scope. We’ll look at block level scope of variables when we get to loops and conditionals shortly.

If you remove line 1 in the example below, you will see that the code works just fine. However, as I just mentioned fahr will now be a global variable. This can have all kinds of unintended consequences. I once spent a week trying to track down an error in the code used to run the examples in this book, caused by me being too lazy to type var and creating a global! To help catch these kinds of unintended variable creations JavaScript introduced ‘strict mode’ several years ago. With strict mode enabled you will get an error for any variable that is not declared one way or another. Run the example below to see for yourself. To correct the error, add let in front of fahr on line 3. From now on we’ll use strict mode, and only let and const to declare our variables.

2.6.2. Simple Input

For simple user input in our practice functions we can use JavaScript’s prompt function. This acts like Python’s input function except that it pops up a dialog box. Again we could use some much fancier user interface to get the input, but we’ll leave the web page design for later.

2.6.3. Type Conversion

In the Python example we had to use int(input(....)) to convert the result of our input from a string to an integer. This brings up two very interesting points.

  1. JavaScript usually does the right thing and automatically converts strings to numbers and numbers to strings when necessary. Hence no need to explicitly convert the result of prompt to a number when we use it in the calculation.

  2. Whereas Python differentiates between int and float JavaScript has only a single numeric data type. JavaScript does not support the infinite precision integers like Python does. If you need that, you can find a module that implements it for you. In JavaScript 2 ** 100 results in 1.2676506002282294e+30 whereas in Python 2 ** 100 results in 1267650600228229401496703205376.

2.6.4. Boolean

JavaScript has a boolean type. But like Python many things evaluate Truthy and some things evaluate Falsey. Like converting string to integer and vice versa JavaScript does its best to evaluate something as Truthy or Falsey based on the context its used in. For example in Python an empty list, an empty string or dictionary, and False are all Falsey. In JavaScript the following things are Falsey: null, undefined, NaN, 0 "" and false (note the lower case f). Everything else in JavaScript evaluates Truthy especially true (note the lower case t).

2.6.5. Null and Undefined

The value null is used when you want to represent the absence of an object or value.

A variable that has not been assigned a value is of type undefined. If a function does not explicitly return a value then the value it returns is also undefined.

2.6.6. Strings

Strings in JavaScript and Python are quite similar. Like Python, JavaScript strings are immutable. However, manipulating strings in JavaScript is not quite as obvious since Strings do not support an indexing or slicing operator. That is not to say that you can’t index into a JavaScript string, you can. You can also pull out a substring just as you can with slicing. The difference is that JavaScript uses method calls where Python uses operators.

In fact this is the first example of another big difference between JavaScript and Python. JavaScript does not support any operator overloading. Table 3 maps common Python string operations to their JavaScript counterparts. For the examples shown in the table we will use a string variable called “str”. JavaScript uses zero-based numbering, just like Python.

Python

JavaScript

Description

str[3]

str.charAt(3)

Return character in 3rd position

str[2:5]

str.substring(2,5)

Return substring from 2nd to (and including) 4th

len(str)

str.length

Return the length of the string

str.find('x')

str.indexOf('x')

Find the first occurrence of x

str.split()

str.split(/\s+/)

Split the string on whitespace into a list/array of strings

str.split(',')

str.split(',')

Split the string at ',' into a list/array of strings

str + str

str.concat(str)

Concatenate two strings together

str.strip()

str.trim()

Remove any whitespace at the beginning or end

str.replace(a,b)

str.replace(a,b)

Replace all occurances of a with b in string str

Let us look at a simple example that will illustrate a few of the string functions. We will write a function that takes a string as a parameter and returns a new string with all of the vowels removed.

This is a pretty simple example of the accumulator pattern using strings. We iterate over every character in the given string, if the character is not a vowel we concatenate it to create a new return string. If the character is a vowel we ignore it and move on to the next.

The JavaScript version illustrates a few of the string methods and idioms and a few key differences. First, to test whether one string contains another you have to use the indexOf string method. This method returns a number to indicate the position of the string passed as a parameter in the original string. If the given string is not present indexOf returns -1. The JavaScript string index operator does not support negative index values so there is no confusion that -1 clearly means “not found.”

The second difference is the for loop. We’ll look in detail at the for loop later as there are many variations and subtle different kinds of for loops possible in JavaScript. for (let eachChar of s) is the best equivalent of the for eachChar in s used in Python. With every iteration of the loop, eachChar takes on the value of the next char in the sequence. The use of let restricts the scope of eachChar to the loop, so once the loop is exited eachChar does not exist anymore.

2.6.6.1. Multiline Strings and Formatted Strings

The latest version of JavaScript adds two very welcome additions! Multiline and formatted strings. Prior to ECMAScript 6 JavaScript programmers did not have the equivalent of Python’s triple quoted strings. This can be a real pain for web programmers who are constructing and inserting templated chunks of text into a web page. JavaScript now supports multiline strings using the ` (backquote) character.

Note that writeln prints a multiline string with the explicit newline characters. If you change the writeln to alert you will see that the newlines are right where they should be.

Python has many ways of doing formatted strings.

  • The standard modulus operator for insertion "The total is %d \n" % total

  • The the format function: "The total is {}\n".format(total)

  • As of Python 3.6 formatted string literals. f"the total is {total}\n" These are a lot like format but the string just starts with f and you embed the name of the variable you want to insert between the curly braces.

The JavaScript formatted strings are called Template literals. They are closest to the new Python 3.6 formatted strings. Like multiline strings they are delimited by backquotes.

JavaScript template literals can contain expressions and can contain dotted and indexed objects as well. In fact there is even more power in the template literals than we have seen here, but we will delay further exploration until the web programming section.

2.6.7. Check Your Understanding

Write a function to compute the sum of the first N numbers, starting at 0.

You have attempted of activities on this page