1.2 Lesson Examples: Data Types

typeof()

To get an idea of the type of data we're working with, we can use typeof(). Let's try it out in the console with the following:

typeof(37) === 'number';
=> true

typeof({}) === 'object';
=> true

typeof('hi there') === 'string';
=> true

typeof() returns a string with the type of the operand, or expression of the object you're looking at.

Numbers

In more low-level languages, numbers are divided into two classes or objects:

  • Integers

     ..., -1,0, 2, 3, 4, 5, ...

  • Floats (or Decimal numbers)

     2.718, 3.14, .5, .25, etc

All numbers in JavaScript are "double-precision 64-bit format IEEE 754 values" - read this as "There's really no such thing as an integer in JavaScript." You have to be a little careful with your arithmetic if you're used to math in other programming languages. Let's take a look at what happens when we do this:

0.1 + 0.2
=> 0.30000000000000004

In JavaScript, these data points are the same type of object, which it calls Numbers, so if you know floats and integers do not go looking for them.

Arithmetic Operators

Operators are used to work with data in JavaScript. The standard arithmetic operators - that you've been learning since grade school - are supported, including addition, subtraction, modulus (or remainder) arithmetic and so forth. Check it out:

1 + 2
=> 3

2 - 5
=> -3

5 / 2
=> 2.5

6 * 2
=> 12

Special Number Operators

JavaScript can be a little cheap with the number of operations it allows you to do. For example, how is someone supposed to square a number or cube a number easily? Luckily there is a special Math object with some very useful methods.

  • Taking a number to some power? Then just use Math.pow
// 3^2 becomes
Math.pow(3,2)
=> 4
// 2^4 becomes
Math.pow(2,4)
=> 16
  • Taking a square root
// √(4) becomes
Math.sqrt(4)
=> 2
  • Need a random number? Then use Math.random.
// The following only returns a random decimal
Math.random()
=> .229375290430
/**
  The following will return a
  random number between 0 and 10
*/
Math.random()*10
  • Since Numbers can be Floats or Integers we often want to get rid of remaining decimal places, which can be done using Math.floor.
// Remove the decimal
Math.floor(3.14)
=> 3
Math.floor(3.9999)
=> 3

Strings

Strings are collections of letters and symbols known as characters, and we use them to deal with words and text in JavaScript. Strings are just another type of value in Javascript.

"John"
"Jane"
"123"

String helper methods

To find the length of a string, access its length property:

"hello".length;
=> 5

There's our first brush with JavaScript objects! Did I mention that you can use strings like objects, too?

Strings have other methods as well that allow you to manipulate the string and access information about the string:

"hello".charAt(0);
=> "h"

"hello, world".replace("hello", "goodbye");
=> "goodbye, world"

"hello".toUpperCase();
=> "HELLO"

Types of values like Number or String are not very useful without being able to form Expressions or Combinations.

Try your favorite number operators as expressions:

  1 + 1
  => 2
  2 - 1
  => 1

You can also create expressions with strings using addition:

  "Hello, " + "world!"
  => "Hello, world!"

This is called String Concatentation.

Converting Strings to Integers with parseInt() and pasreFloat()

You can convert a string to an integer using the built-in parseInt() function. This takes the base for the conversion as an optional second argument, which you should always provide:

parseInt("123", 10);
=> 123

parseInt("010", 10);
=> 10

This will be important later when we're taking user input from the web and using it on our server or in our browser to do some type of numeric calculation.

Similarly, you can parse floating point numbers using the built-in parseFloat() function which uses base 10 always unlike its parseInt() cousin.

parseFloat("11.2");
=> 11.2

You can also use the unary + operator to convert values to numbers:

+"42";
=> 42

NaN

The parseInt() and parseFloat() functions parse a string until they reach a character that isn't valid for the specified number format, then return the number parsed up to that point. However the "+" operator simply converts the string to NaN if there is any invalid character in it.

A special value called NaN (short for "Not a Number") is returned if the string is non-numeric:

parseInt("hello", 10);
=> NaN

NaN is toxic: if you provide it as an input to any mathematical operation the result will also be NaN:

NaN + 5;
=> NaN

You can test for NaN using the built-in isNaN() function:

isNaN(NaN);
=> true

JavaScript's numeric operators are +, -, *, / and % and all work as you expect and should have practiced during your prework.

Null and Undefined

JavaScript distinguishes between:

  • null a value that indicates a deliberate non-value
  • undefined that indicates an uninitialized value — that is, a value hasn't even been assigned yet

The main note to make here is that these variables should always have the var keyword and use camelCase

Assignment Operators

Values are assigned using =, and there are also compound assignment statements such as += and -=:

var x = 1;
=> 1

x += 5
=> 6

You can use ++ and -- to increment and decrement, respectively. These can be used as prefix or postfix operators.

In Javascript we just discussed two types of values we can use. We call these values objects, which for now just means that in addition to storing some data you also get to use some helpful methods when you are working with them.

  • If you want to turn a number into a string you can use a helpful method called toString.
(1).toString()
=> "1"
/**
  be careful though,
  since numbers can be floats
  javascript might
  misunderstand you.
*/
1.toString()
=> Float Error
// but the following works
1..toString()

Arrays

Unfortunately, strings and numbers are not enough for most programming purposes. What is needed are collections of data that we can use efficiently, Arrays.

Arrays are great for:

  • Storing data
  • Enumerating data, i.e. using an index to find them
  • Quickly reordering data

Arrays, ultimately, are a data structure that is similar in concept to a list. Each item in an array is called an element, and the collection can contain data of the same or different types. In JavaScript, they can dynamically grow and shrink in size.

var friends = ['Moe', 'Larry', 'Curly'];
=> ['Moe', 'Larry', 'Curly']

Items in an array are stored in sequential order, and indexed starting at 0 and ending at length - 1.

// First friend
var firstFriend = friends[0];
 => 'Moe'
// Get the last friend
var lastFriend = friends[2]
=> 'Curly'

We can even use strings like arrays:

var friend = "bobby bottleservice";
// pick out first character
friend[0]
//=> 'b'
friend.length

Working with Arrays

Using the JavaScript Keyword new, is one way of creating arrays:

var a = new Array();
=> undefined

a[0] = "dog";
=> "dog"

a[1] = "cat";
=> "cat"

a[2] = "hen";
=> "hen"

a
=> ["dog", "cat", "hen"]

a.length;
=> 3

A more convenient notation is to use an array literal:

var a = ["dog", "cat", "hen"];

a.length;
=> 3

Length method

The length method works in an interesting way in Javascript. It is always one more than the highest index in the array.

So array.length isn't necessarily the number of items in the array. Consider the following:

var a = ["dog", "cat", "hen"];
a[100] = "fox";
a.length; // 101

Remember: the length of the array is one more than the highest index.

Getting data from an array

If you query a non-existent array index, you get undefined:

var a = ["dog", "cat", "hen"];
=> undefined

typeof a[90];
=> undefined


Array helper methods

Arrays come with a number of methods. Here's a list of some popular helpers:

Note: You might want to demonstrate a few of these.

  • a.toString() - Returns a string with the toString() of each element separated by commas.

  • a.pop() - Removes and returns the last item.

  • a.push(item1, ..., itemN) - Push adds one or more items to the end.

  • a.reverse() - Reverse the array.

  • a.shift() - Removes and returns the first item.

  • a.unshift([item]) - Prepends items to the start of the array.

Remember, though, you'll never remember every method. Explore the the full documentation for array methods and other helper methods given to you for particular objects.

Iterating through an array

Iterating through the elements of an array, one at a time, is a very common practice in programming.

We can use a for loop to iterate over the elements of an array like this:

var teams = ['Bruins', 'Cal Bears', 'Ravens', 'Ducks'];
for (var i = 0; i < teams.length; i++) {
    console.log(teams[i]);
}

JavaScript arrays have several advanced iterator methods.

Several of these methods require a function be supplied as an argument, and the code you write in the function will be applied to each item in the array, individually.

As an example, lets look at the forEach method that we can use instead of a for loop to iterate the elements:

var teams = ['Bruins', 'Cal Bears', 'Ravens', 'Ducks'];
teams.forEach(function(el) {
    console.log(el);
});

This function would return:

Bruins
Cal Bears
Ravens
Ducks
undefined

Notice how much clearer this syntax is than that of the for loop?

Here are some other iterator methods for you to research and practice with:

  • Array.every()
  • Array.some()
  • Array.filter()
  • Array.map()

results matching ""

    No results matching ""