Learn JavaScript - Objects, Properties

Question Click to View Answer

What does the following code print to the console?

var person = {
  name: "Joe Camel",
  age: 42,
  status: "dead"
}
console.log(typeof person);

"object"

The person variable is assigned to an object. An object is an unordered collection of properties. Each property consists of a name and a value. In the person object, name: "Joe Camel", age: 42, and status: "dead" are called properties. name, age, and status are called property names and "Joe Camel", 42, and "dead" are called property values.

What does the following code print to the console?

var hat = {
  size: "large",
  color: "orange"
}
console.log(hat.size);

"large"

Property values can be accessed with the following syntax: object_name.property_name.

What does the following code print to the console.

var teddy_bear = {
  texture: "fluffy"
}
console.log(teddy_bear["texture"]);

"fluffy"

The property value corresponding with the property name "texture" can also be accessed with the following syntax: console.log(teddy_bear.texture);

What does the following code print to the console?

var fat_joe = {
  crew: "Terror Squad"
}
fat_joe.crew = "something";
console.log(fat_joe.crew);

"something"

Property values can be updated by assigning the property name to a new value.

What does the following code print to the console?

var pen = {};
pen.ink = "blue";
console.log(pen.ink);

"blue"

The pen variable is initially assigned to the empty object (i.e. an object without any properties). The ink property is added to the pen object and this attribute can be queried like any other attribute once it is added.

What does the following code print to the console?

var walking_dead = {
  topic: "zombie apocalypse"
}
console.log(walking_dead["main_character"]);

undefined

undefined is returned when querying a property that does not exist in an object.

What does the following code print to the console?

var bottle = {
  contents: function () { return "some fine bubbly" },
  color: "green"
}
console.log(bottle.contents());

"some fine bubbly"

Functions are values and can be a property value just like any other value in JavaScript. Functions that are bound to an object are called methods. The function in this example is bound to the bottle object.

What does the following code print to the console?

var yao = {
  self: function () { return this }
}
console.log(yao === yao.self());

true

The "this" keyword is available throughout the object and refers to the object itself. this is similar to the concept of self in object oriented programming languages. In this contrived example, the self() method returns this, which is the same as the yao object.

What does the following code print to the console?

var lebron = {
  occupation: "basketball",
  introduction: function () {
    return "My name is LeBron and I play " + this.occupation
  }
}
lebron.introduction();

"My name is LeBron and I play basketball"

In the introduction() method, the keyword "this" refers to the lebron object. lebron.occupation returns the string "basketball" and so does this.occupation. In fact, the code could be refactored as follows and will still yield the same result:

var lebron = {
  occupation: "basketball",
  introduction: function () {
    return "My name is LeBron and I play " + lebron.occupation
  }
}
lebron.introduction();

What does the following code print to the console?

var square = {
  side_length: 4,
  area: function () { 
    var l = this.side_length;
    return l * l;
  }
}
console.log(square.area());

16

The "this" keyword refers to the square object anywhere inside the square object.

What does the following code print to the console?

var me = {
  first_name: "Matthew",
  last_name: "Powers",
  full_name: function () {
    return this.first_name + " " + this.last_name;
  }
}
console.log(me.full_name());

"Matthew Powers"

The "this" keyword refers to the me object anywhere inside the me object. full_name() is referred to as a "method" because it is bound to the 'me' object.

What does the following code print to the console?

var mug = {
  capacity: "10 fluid ounces",
  customer_message: function (desired_size) {
    if (desired_size > 10) { return "This mug is not large enough for you" };
  }
}
console.log(customer_message(13));

ReferenceError: customer_message is not defined

The customer_message() method is only defined for the mug object, it is not a global function that can be called anywhere. In order to call the customer_message() method, the mug object needs to be referenced, as in the following example: console.log(mug.customer_message(13));

What does the following code print to the console?

function global_function () { return "I can be called anywhere" };
var an_obj = {
  something: global_function
}
console.log(an_obj.something());

"I can be called anywhere"

The global_function() is bound to the global object and can be called anywhere.

What does the following code print to the console?

var person = {
  age: 32,
  address: {
    city: "New York",
    state: "NY"
  }
}
console.log(person.address.city);

"New York"

Objects are values in JavaScript, so the property value can be another object (in other words, objects can be nested). In this example, person.address returns { city: "New York", state: "NY" } and ({ city: "New York", state: "NY" }).city returns "New York".

What does the following code print to the console?

var golf = {
  type: "sport",
  clubs: {
    high_end: "taylor made",
    low_end: "rusty basement clubs"
  }
}  
golf.clubs.high_end = "callaway";
console.log(golf.clubs.high_end);

"callaway"

Property values of nested objects can be updated by assigning the property value to a new value.

What does the following code print to the console?

var ideal_scene = {
  status: "chillin'",
  location: "somewhere with good waves",
  thoughts: "bling bling"
}
delete ideal_scene.thoughts
console.log(ideal_scene.thoughts);

The thoughts property is deleted from the ideal_scene object in the delete ideal_scene.thoughts line. When a property is deleted, it cannot be accessed anymore.

Describe the value that the zombie variable is assigned to.

var zombie = new Object();

The zombie variable is assigned to the empty object. The new Object(); syntax for creating an empty object is equivalent to {}.

Object() is called a constructor function and these are special functions that make objects when they are preceded with the new keyword. Object() is a built-in constructor function and JavaScript allows for the creation of custom constructor functions. The next quiz will explore constructor functions in detail.

What does the following code print to the console?

var game = { title: "tic tac toe" };
var same_game = { title: "tic tac toe" };
console.log(game === same_game );

false

The game and same_game objects have the same contents, but they are different objects. JavaScript only considers two objects equal if the equality operator is referring to exactly the same object, not two different objects that have the same contents.

What does the following code print to the console?

var lyric = { lyric: "right now, aight" };
console.log(lyric === lyric);

true

The equality operator returns true when the lyric object is compared with itself. For object equality comparisons, the equality operator returns true when both operands are the same object and false otherwise.

What does the following code print to the console?

var ruff_ryders = {
  dmx: {
    birthplace: "Mount Vernon, NY"
  }
}
console.log(ruff_ryders.lox.birthplace);

TypeError: Cannot read property 'birthplace' of undefined

ruff_ryders.lox returns undefined because lox is not a property in the ruff_ryders object. undefined.birthplace causes a TypeError because undefined does not have a birthplace property.

What does the following code print to the console?

var ruff_ryders = {
  dmx: {
    birthplace: "Mount Vernon, NY"
  }
}
console.log(ruff_ryders.lox && ruff_ryders.lox.birthplace);

A guard clause can be added when querying nested objects to avoid TypeErrors if objects are not found. The && operator returns the first operand and does not evaluate the second operand if the first operand is falsey. ruff_ryders.lox is undefined and undefined is a falsey value in JavaScript. The && operator returns the first operand (undefined) and does not evaluate the second operand (ruff_ryders.lox.birthplace), so the code that would cause a TypeError (the second operand) is not executed.

What does the following code print to the console?

var a = {
  x: "y"
}
console.log("x" in a);

true

The in operator returns true if the property specified on the left of the operator is included in the object on the right of the operator.

What does the following code print to the console?

var abc = {
  zz: "ll"
}
console.log(abc.hasOwnProperty("zz"));

true

The hasOwnProperty() method returns true if the object has the property and false otherwise.

Add a real_name property to the following dmx object with the value "Earl Simmons".

var dmx = {
  occupation: "rapper"
}

dmx.real_name = "Earl Simmons";

Add a circumference method to the following circle object that returns the circumference of the circle (Pi equals Math.PI).

var circle = {
  radius: 10
}

circle.circumference = function () { return 2 * Math.PI * this.radius; }

Test the circumference() method with the following line:

console.log(circle.circumference());