The JavaScript Object Literal

I have been really trying to beef up my JavaScript skills lately.  One really interesting aspect from this experience is how cool I find the object literal.

You can use it to create really any kind of data structure you desire.  It can hold the primitive types like strings and numbers, it can hold objects like arrays or other object literals, and it can store functions.  I created a fiddle at JSFiddle to demonstrate the object literal.

Here is the JavaScript for my object literal which I call oPerson.

var oPerson = {
    firstName: "John",
    lastName: "Doe",
    age: Math.floor((Math.random() * 33) + 17),
    "favorite color": "Blue",
    Interests: {
        movies: ["The Blob", "History of the World Part 1", "Ferris Bueller's Day Off"],
        bands: ["Lacuna Coil", "Soft Cell", "Naked Eyes"]
    },
    greeting: function () {
        return "Hello, my name is " + this.firstName + " " + this.lastName + ".";
    }
};

As you can see the person object has a few properties.

  • firstName, lastName, and “favorite color” are all strings.  I named the one “favorite color” to show that you can have property names that include a space.  If you want to do it you need to surround it with quotes, this also means that to access it you must use the bracket [] notation instead of the dot . notation.
  • age returns the value from a function, in this case we generate a random number from 1 to 33 and add 17 to it to give us an age from 18 to 50.
  • greeting is actually a function, it returns a string that uses the firstName and lastName of the object.
  • Interests is another object literal, it contains two arrays; movies and bands

To access the properties and their values you can use the bracket or dot notation.  Since I am a C# developer I prefer dot notation whenever possible.  Here is the function that populates a form, you can see how I have accessed each item in the object literal.

function populateForm() {
    //Get the elements to populate
    var greeting = document.getElementById("divGreeting");
    var firstName = document.getElementById("firstName");
    var lastName = document.getElementById("lastName");
    var age = document.getElementById("age");
    var color = document.getElementById("favoriteColor");
    var movies = document.getElementById("favoriteMovies");
    var bands = document.getElementById("favoriteBands");

    //Populate the elements with the data
    greeting.innerHTML = oPerson.greeting();
    firstName.value = oPerson.firstName;
    lastName.value = oPerson.lastName;
    age.value = oPerson.age;
    color.value = oPerson["favorite color"];
    bands.value = oPerson.Interests.bands.sort();
    movies.value = oPerson.Interests.movies.sort();
}

You will notice I did have to use the bracket notation for “favorite color” and I used JavaScript’s sort method on the arrays.  If you want to see this thing in action you can view my Object Literal Fiddle.  The Object Literal notation is very similar to JSON with only a few differences;

  • The keys (property names) but be strings enclosed in double quotes
  • Values must be string, number, an array, true, false, null, or another JSON object

 

Advertisements

About SheldonS

Web developer for over 15 years mainly with Microsoft technologies from classic ASP to .NET 4. Husband, father, and aspiring amateur photographer.

Posted on June 4, 2014, in JavaScript and tagged , . Bookmark the permalink. Leave a comment.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: