Objects

Initializing JavaScript Objects

An Object in JavaScript can be initialized using several notations:

• new Object()
• Object.create()
• Object Initializer

An object initializer is a comma-delimited list of property names and associated values enclosed in curly brackets {}. We already witnessed the use of an object initializer with studentInformation in our starter code.

const objectInit = {
	"property1" : value1,
	"property2" : value2,
	"property3" : value3
};

• Property Names: property names may be single or multiple word strings. Typically, it is best to keep property names a single string. However in some cases, you may have property names with multiple words and spaces if they are visible to users on the frontend view.
• Values: The values in an object do not have to be the same data type. The value for the first property may be a string type, while another property value may be a number or object type.

Accessing Property Values in JavaScript Objects

There are two ways of accessing property values of a JavaScript Object

• object.propertyName: Using the . symbol accesses the property value. This is what we used in the previous step to get the studentInformation name, advisor, grade, etc.
• object[propertyName]: In this notation, we use the square brackets [] to access the property value, this is similar to Array/List notation.

Both methods are acceptable and receive the same value. The first method with use of the . symbol is more widely used by developers as it mimics class Object notations. However, the second is used when property names contain multiple words separated by a space.

Take a look at the example below, adapted from MDN’s Object initializer reference. It illustrates three ways to populate an object:

// 1. Literal values
const object1 = { a: "foo", b: 42, c: {} };
console.log(object1.a); // "foo"

// 2. Named properties referencing variables
const a = "foo";
const b = 42;
const c = {};
const object2 = { a: a, b: b, c: c };
console.log(object2.b); // 42

// 3. Shorthand property names (ES2015+)
const object3 = { a, b, c };
console.log(object3.a); // "foo"

1. Paste the snippet into your browser’s developer console (or any JavaScript REPL) and run it. Analyze the different ways to initialize Objects and how values are accessed.

2. Change the property names in object2 to property names with a space in between (i.e. prop 1, prop 2, prop 3).

      const a = 'foo';
      const b = 42;
      const c = {};
      const object2 = { "prop 1": a, "prop 2": b, "prop 3": c };
   
   

3. Next, try to access the value of prop 2. Because the property name contains a space, dot notation is not valid syntax here — only bracket notation works.

   // Dot notation with a property name that contains a space is a SyntaxError:
   //   object2.prop 2          // SyntaxError
   //   object2."prop 2"        // SyntaxError (quoted property names aren't allowed after a dot)
   // Bracket notation accepts any string as a key, including names with spaces:
   console.log(object2["prop 2"]); // 42
   

4. Re-run the updated snippet and confirm the bracket-notation line prints 42.

5. The takeaway: property names that contain spaces (or other characters that aren’t valid JavaScript identifiers) cannot be accessed with dot notation — attempting it is a SyntaxError. In these cases, bracket notation with a string key is required. For property names that are valid identifiers (e.g. prop1), both object2.prop1 and object2["prop1"] work and return the same value.