[prev]Objects[next]

An "object" is a way of grouping data together where the different parts are given names.

Example: Keeping Track of Books

 
1
2
3
4
5
6
7
8
9
10
11
var bookA = {title: "Moby Dick", author: "Melville"}
var bookB = {title: "Jane Eyre", author: "Bronte"}
var bookC = {title: "The Bible", author: "Steve"}

printp(bookA.title, " is by ", bookA.author)
printp(bookB.title, " is by ", bookB.author)
printp(bookC.title, " is by ", bookC.author)

bookA["rating"] = 10

print(bookA)

Click to run the code.

An object is like a bag of names. Each name is called a property of that object, and has an associated value. In the example above, each object stored in one of the book variables has the properties title and author. The first three lines show the syntax for creating a new object using what's called an object literal — code that literally forms an object.

You can access the properties of an object using the properties' names in two different ways. book.title and book["title"] both mean "the value of the title property of the object in the variable book". You can also assign a new value to a property of an object, even a property that doesn't yet exist.

Why are there two different kinds of syntax to access a property of an object?

In the expression book.title, the name title is a lot like a variable name, one consequence being that it has to be made up of only letters and numbers. The second syntax, book["title"], expresses the property name as a string, and brings to mind arrays, where constituent parts are accessed using numbers in brackets. In fact, you can assign a value to book[2] if you want, or even book[1+1] (which does the same thing). Just make sure not to say book[title] unless you've defined a variable named title elsewhere that you want to use the value of.

As for the real "why" of the matter, it's a complex issue having to do with the way JavaScript combines influences from different programming languages.

Exercise: Put the books in an array. Create an array containing the three books and assign it to a variable called books. Then change the rest of the code to refer to books by number, for example replacing bookA with books[0].

Exercise: Use a loop. Now that you have the books in an array, make the code less repetitive by looping over the books array, printing who authored each book. This will require combining the syntax for accessing an array with the syntax for accessing a property, as in books[i].title.

Object Properties and Methods

By now you've seen how to access properties of objects and arrays, like book.title, myArray[2], and myArray.length. Even strings have a length property: "abcde".length evaluates to 5.

Somewhat more exciting than properties are methods, which are like a cross between properties and commands. Remember the syntax request.param("blah")? In that case, the object named request has a method named param. Objects, arrays, and strings have some very useful methods you can call. (This style of command-attached-to-object is quite common in JavaScript and other object-oriented languages like PHP, Ruby, Java, and C++.)

Example: You're Twisting My Words

Here's an app that does some manipulation on a string of text.

 
1
2
3
4
var mySentence = "This is an awesome app."
var words = mySentence.split(" ")
var newSentence = words.join(", like, ")
printp(newSentence.toUpperCase())

Click to run the code.

As you can see, methods can be powerful! Understanding this code requires understanding the methods split and join.

Exercise: Splitting a string. split is a method you can call on any string. It takes an argument, which in the above program is a space (" "), and "splits" the original string wherever the argument occurs, resulting in an array of the strings left in-between. Add the line print(words) after the call to split to see the array of words. What happens if you split on " awesome " (that's the word awesome with space on either side) instead of a space?

Exercise: Joining an array. Conveniently, arrays have a join method that allows an array of strings to be stuck together into a single string, pretty much the opposite of split. What happens if you change the argument to join to a single space? To the empty string? To something else?

Exercise: Make it interactive. Instead of always starting with the sentence "This is an awesome app", let the user type their own sentence into a form. The path that receives the form data can then do the manipulation.

String Methods

You've seen toUpperCase in use; is there a toLowerCase? Yes! What else?

Strings and other object have lots of built-in methods. There is some good documentation available from Mozilla. See string methods and array methods.

Previous Lesson: Arrays Next Lesson: Functions