Get Programming with JavaScript

Get Programming with JavaScript - Listing 4.09

Listing 4.09 - Using a function to display object properties

var showMovieInfo;

showMovieInfo = function () {
    console.log("Movie information for " + movie.title);
    console.log("------------------------------");
    console.log("Actors: " + movie.actors);
    console.log("Directors: " + movie.directors);
    console.log("------------------------------");
};

Further Adventures

Listing 4.09 - Using a function to display object properties - Task 1

Add a call to showMovieInfo.

var showMovieInfo;

showMovieInfo = function () {
    console.log("Movie information for " + movie.title);
    console.log("------------------------------");
    console.log("Actors: " + movie.actors);
    console.log("Directors: " + movie.directors);
    console.log("------------------------------");
};

showMovieInfo();    // Call the function

When called, the showMovieInfo function tries to use the movie variable. However, the movie variable has not been declared in the program - it does not exist.

Listing 4.09 - Using a function to display object properties - Task 2

Declare a movie variable.

var showMovieInfo;
var movie;    // Declare a movie variable

showMovieInfo = function () {
    console.log("Movie information for " + movie.title);
    console.log("------------------------------");
    console.log("Actors: " + movie.actors);
    console.log("Directors: " + movie.directors);
    console.log("------------------------------");
};

showMovieInfo();

The movie variable is declared. However, it is not explicitly assigned a value. When the program is run, JavaScript will automatically assign the movie variable the special value undefined.

When the showMovieInfo function is called, it tries to access the title, actors and directors properties of movie. But the value of movie is undefined. It doesn't have properties. Objects have properties. The value of movie is the wrong type - it is undefined rather than an object.

Listing 4.09 - Using a function to display object properties - Task 3

Create an empty object and assign it to the movie variable.

var showMovieInfo;
var movie;

// Create an empty object
// Assign it to movie
movie = {};

showMovieInfo = function () {
    console.log("Movie information for " + movie.title);
    console.log("------------------------------");
    console.log("Actors: " + movie.actors);
    console.log("Directors: " + movie.directors);
    console.log("------------------------------");
};

showMovieInfo();

The movie variable is declared. This time it is also explicitly assigned a value. That value is an empty object.

When the showMovieInfo function is called, it tries to access the title, actors and directors properties of movie. The value of movie is an object, so it is the right type of value to have properties. However, the title, actors and directors properties have not been assigned values. JavaScript reports the properties' values as undefined.

Listing 4.09 - Using a function to display object properties - Task 4

Add title, actors and directors properties to the movie object.

var showMovieInfo;
var movie;

// Assign properties
movie = {
    title: "Inside Out",
    actors: "Amy Poehler, Bill Hader",
    directors: "Pete Doctor, Ronaldo Del Carmen"
};

showMovieInfo = function () {
    console.log("Movie information for " + movie.title);
    console.log("------------------------------");
    console.log("Actors: " + movie.actors);
    console.log("Directors: " + movie.directors);
    console.log("------------------------------");
};

showMovieInfo();

The movie variable is declared. This time it is also explicitly assigned a value. That value is an object with properties set.

When the showMovieInfo function is called, it tries to access the title, actors and directors properties of movie. The value of movie is an object, so it is the right type of value to have properties. The title, actors and directors properties have been assigned values so they are displayed.