Javascript basics

I think the easiest way to learn is to do. In this tutorial you can try the javascript right in the browser and see results immediately. The aim is to understand how the basic data structures behave and what we can do with them. If you want to learn more programming this is fundamental.

First open your dev tools:

Win: F12 or Ctrl + Shift + i

Mac: Cmd + Shift + i

Then click the ‘console’ tab to open your web browsers javascript console. In this console we can write javascript and see it in action.

Variables

A variable is a name for some data and you can give rit any name you want, but try to give it a name that makes sense and that others than yourself can understand.

let phoneNumber = 45452143;

You can paste that into your console, or make up something yourself. You have now given a name to some data so you can retrieve the data again by using the name

phoneNumber;
returns 45452143

So that works. Let’s try one more variable:

let myName = "Gaute";

This is quite similar, but pay attention to the quotation marks around my name. We did not use quotation marks around the phone number. Why is that?

Data types: text strings and numbers

All variables get a data type when they are created. Many programming languages require the developer to specify the data type when a variable is created, but javascript does this automatically. That makes the language a bit easier to use, but it can cause a lot of trouble if the you are unaware of the effects. Here is a short article on techterms.com that will explain data types. We will look a bit closer at text strings and numbers. If you mix these up you might get errors. Errors like this can make a real mess of how a dataset is interpreted, which may cause visual mess or for lists to be ordered wrong among other issues.

When we made our variables, phoneNumber and myName, we did not specify the data type, but we made two variables with different data types. There is a handy operator called typeof that can tell us what data type our variables have. Try this:

typeof phoneNumber;
returns number

typeof myName;
returns string

You can see that the two variables have different types, number and string. With numbers you can make numerical operations, with text strings you can make other operations. If anything has quotation marks around it it has string as data type.

Operators

Operators are parts of the code that do something to produce a result from the data. You can read more and try yourself on w3schools.

The data type is important because it determines what operations can be used on that data. If you were to use a mathematical operation such as square root on the variable myName that would not make sense. We can try with the operator for sqaure root.

Math.sqrt(4);
returns 2

Math.sqrt(myName);
returns Nan;

Nan does not refer to delicious indian flat bread, it means Not A Number. This is an error message you will get when trying to run operations that require the data to be numbers. This is a very common error message. You can also test oerators by using values, rather than making variables. Try the following values with the + operator to see what happens.

2 + 2;
returns 4

So what does this return?

"2" + "2";

It returns “22” so that means the + operator did not do a mathematical operation, it added two pieces of text together. It just so happened that these two pieces of text contained numbers.

Errors due to wrong data types are quite common and can often go undetected until its too late. Knowing why data types matter and recognizing what is a string and what is a number can help you understand issues that typically occur when testing new data in a component. You should especially look out for strings containing numbers. In cases where numbers are stored as strings in a datafile it is quite easy to convert the string values to number values. This can literally make or break your visualization.