JavaScript: Data types

Notes Home

Last week we introduced the concept of a variable, an object that stores a piece of information. Today we will look deeper at data types and how they are used in JavaScript. Variables are different data types, which are the most basic structural element of every programming language. Writing scripts involves manipulating the values of variables, which all have types. The basic types in JavaScript are numbers, strings, booleans, and objects. We will talk more about objects in the next class, but for now, objects are broken down further into functions and arrays, which we will talk about today. Also look out for error literals, like null, undefined and NaN.

Numbers

We talked about numbers last week. In JavaScript there are no integers, so numbers can be both integers and floating point numbers, such as 1 and 1.5. This makes is a bit easier for us to do math and change types without throwing an error every time we get an int but want a float (don't worry if that doesn't make sense, unless you've had some Processing or other language before this class). JavaScript usually converts strings that look like number to numbers for us, which is a nice thing for new programmers, but can get a little hairy. We talked about that last week and will look at it more when we talk about logical operators next week. There is a value called NaN, which stands for "Not a Number", which is exactly what the value means. You will get that if you try to evaluate a string that cannot be parsed to a number. You can test for NaN using the isNaN() function. Try writing this in the console:

isNaN(NaN);

Strings

Strings in JavaScript are sequences of characters, using Unicode they are represented by a 16-bit number. Characters are written as strings with the length of one. Strings provide length, a property that returns the length of the string. Try this in the console:

"Hello World".length

Strings also have some built in methods like charAt() and replace() which help us do evaluation and manipulation.

"Hello World".charAt(0);
"Hello World".replace("World", "Jerry");

Booleans

Booleans default to the values true and false. In JavaScript many values will become false, such as 0, "" (empty string), NaN, null, and undefined. Everything else defaults to true, such as "Hello World", 1, 99, or -99. Try evaluating some booleans in the console with this syntax:

Boolean("");
Boolean(null);
Boolean(4);

Arrays

An array is an object that contains a list of variables, such as this: var imgs = ["cat.jpg", "dog.jpg", "alligator.jpg"]; which is a list of images that might be loaded into a site. In JavaScript, the items in an array can have any datatype, like a number, string, boolean, or even another arrary. In other languages, the data in an array usually are all of the same type. The elements of an array are accessed by their index number, starting with zero. So, imgs[0] will return "cat.jpg". Like strings, arrays have a length property. Try creating an array, reading from the list, and returning the length:

myArray = ["cat", "dog", "alligator"];
myArray.length;
myArray[0];
myArray[2];

Arrays can be populated by creating a new Array or assigning values. Arrays can have any length, and unassigned spots will have the value undefined.

myArray[99] = "bird";
myArray[99];
myArray[98];

Arrays are useful for looping through data structures to perform functions and operations.

Null and undefined

JavaScript uses null and undefined as distinct values. null indicates a purposely unassigned value. undefined indicates a variable has not been instantiated, or created.