2.2 Data Types

Hi folks. In this lesson, we're going to learn about the different types of data that we can use in JavaScript. JavaScript is a loosely typed language. And while it doesn't have as many types as some other languages, the ones it does have should be more than sufficient. Let's take a look at what's available. The first group of data types and the most basic, are known as the primitives. These are, number, string, Boolean, undefined, null and symbol. A number can be any regular positive or negative integer or decimal within the range that JavaScript is able to handle. We can also express numbers in octal, hexadecimal and binary formats. To use octal, which is base eight, we prefix the number with a 0 and an O. The O that we use as the second character in an octal can be lowercase or uppercase, it makes no difference. In this case we specify the octal number 77 which is the same as the regular base ten number, 63. To use a hexidecimal number, which is base 16. We prefixed the number with a zero and an x. Again, the second character, the x, may be uppercase or lowercase. This time we specified the hexadecimal number 0011. Which is equal to the base 10 number 17. To use a binary number, which is base 2, we prefix the number with a 0 and a B. Once again the B may be upper case or lower case. In this example we specified the binary number 1100. And that is equal to the regular base-10 number 12. If we try to use a number outside of JavaScript's supported range, we'll get plus or minus infinity, which is a special type of number. If we try to do something invalid to a number like divide it by a string or something like that, we'll get the value NaN, or NaN, which stands for not a number. This is another special type of number. Interestingly, nothing equals NaN, not even itself. JavaScript has a special is NaN function that we can use to check if a number NaN. We can perform numerical operations on numbers as you'd expect and JavaScript has a range of different math functions that we can make use of. We'll look at this in more detail later in the course. A string is a sequence of characters enclosed within quotes. These quotes can be either single or double quotes, or back tics. Single and double quotes are treated exactly the same by JavaScript, but back tics have some additional behavior. Single and double quotes can be nested inside of each other. So if we wanted to use a quote in a string for example, we would have to do something like this. In this case, we just need to take sure that we match the opening and closing quote marks. If we want a quote mark to be treated like a normal character, instead of the start or end of the string, we can escape it with a backslash. We can't perform numerical operations on strings in the same way that we can with numbers, but we can concatenate, or join strings together, to form new strings. To do this we use the plus operator. In this case, the join variable will contain the single string, wait, what? The backtick string form was added in ES2015, and provides several benefits over regular, double, or single-quote strings. We can easily create multi-line strings for example using the back tick. When this string is rendered the line breaks will be preserved as we can see if we loop this to the console. This is much for readable than using new line characters like we used to have to do in JavaScript, which would look something like this. The string still has the line breaks in it when it is rendered, but in the code it is much less readable. So the back tick can be really useful even in basic scenarios like this. A Boolean has either the value true or false. As well as the literal values true or false, JavaScript also has the notion of truthy or falsey values. A falsey value is any one of the following values. False, the number zero, an empty string, null, undefined, or NaN. All other values are truthy. Don't get too hung up on this now, we'll look at the nature of truthy-ness and falsey-ness in more detail in section four. These data types, number string and Boolean, are known as the primary data types. The other primitives are sometimes known as special data types. These are undefined, null, and symbol. When we declare a variable but don't assign it a value, it automatically has the value undefined. In some situations, it is treated the same as the null data type. But it's not quite the same. We can set a variable to undefined intentionally if we wish. Null is a data type that is used in place of any regular value, like a string or a number. Once a variable has been declared, it cannot be undeclared, but it can have it's value set to null. This is where the null data type is most useful. The symbol is the most recent data type to be added to JavaScript. Unlike other primitives, it does not have a constructor function. So we cannot create a symbol using the new keyword. Instead we use a global function, which looks a bit like a constructor because it is capitalized. Optionally, we can pass a description to the symbol function. But this description is only used for debugging purposes. The symbol data type has a very specific purpose, and that is for use as keys in an object. Because symbols are always unique we can add a new key to an object using a symbol, and we know for certain that we won't overwrite any existing keys. So symbols are always unique. To illustrate this, let's look at the following example. Now let's take a look in the browser console and see what gets logged. We can see that false has been logged, the two symbols are not equal. Now, we've used the special type of operator in this expression, the triple equal sign. We'll come back and look that in more detail very shortly. For now, just understand when we use the triple equal sign to compare two values, not only must the values be identical, but the types of the value must be identical also. As I said, though, we'll come back and look at that in more detail later on. So these are all of the primitives in JavaScripts. There are also two different composite types. That is, types that are made up of multiple entities. These types are arrays and objects. An array is a container like a variable except that it can hold multiple values. Arrays are not associative arrays in JavaScript. They're like objects but they have fixed numerical indexes. These indexes are also zero based. So the first item in an array has the index zero. To create an array literal, we use square brackets containing one or more comma separated items. In this case, we declare an array that contains three items, the number 5, the string something, and the Boolean value true. So we can see already that arrays can be composed of multiple data types. We can also create arrays using the array constructor. However, the first form using square brackets, the literal form, is the preferred way of creating arrays in JavaScript. And we'll see why when we come back and look at arrays in more detail in section three. To access one of the items in an array, we use the name of the array, or the identifier, followed by square brackets containing the index number that we wish to get the value of. For example, to get the first item in the array that we declared first, we would do this. Arrays have a length property which correlates to the number of items in the array. Arrays also have some methods that can be used to operate on the items within the array. Objects are containers for key value pairs of data like this. Each key value pair is separated by a comma, and within each pair the key is separated from the value with the colon. There are several different ways that we can access the values held within objects. The first way is to use the name of the key and the name of the object separated by a dot. This format is known as dot notation, we can also use something called a bracket notation. In this case, the name of the key that we want to access is specified as a string within square brackets. Objects are very similar, conceptually, to an array, except, that they have indexes based on words instead of numbers. Again, we'll look at objects in much more detail later in the course. So in this lesson, we learned about the different data types that we can use in JavaScript. We looked at the primitive types, number, string, Boolean, undefined, null, and symbol, and covered the composite data types array and object. In the next lesson, we'll start looking at the different operators that we have available. Thanks for watching.