Object creation in Javascript - Mini Project: Build & Apply

Object creation

📖 Scenario: You are creating a simple contact card for a friend. You want to store their name, age, and city in one place.

🎯 Goal: Build a JavaScript object that holds a friend's details and then display the information.

📋 What You'll Learn

Create an object with exact properties and values

Add a helper variable for a greeting message

Use the object properties in a template string

Print the greeting message

💡 Why This Matters

🌍 Real World

Objects are used to group related information about things like people, products, or places in one place.

💼 Career

Understanding how to create and use objects is essential for any JavaScript developer working on websites or apps.

1

Create the friend object

Create an object called friend with these exact properties and values: name set to "Emma", age set to 28, and city set to "New York".

Javascript

// Your code here

Hint

Use curly braces {} to create an object and separate properties with commas.

2

Add a greeting message variable

Create a variable called greeting and set it to the string "Hello! Here is your friend's info:".

Javascript

const friend = { name: "Emma", age: 28, city: "New York" };
// Your code here

Hint

Use const to create a variable and assign the exact string.

3

Create a message using object properties

Create a variable called message and set it to a template string that uses friend.name, friend.age, and friend.city to say: "Emma is 28 years old and lives in New York."

Javascript

const friend = { name: "Emma", age: 28, city: "New York" };
const greeting = "Hello! Here is your friend's info:";
// Your code here

Hint

Use backticks ` and ${} to insert variables inside the string.

4

Print the greeting and message

Use two console.log statements to print the greeting and then the message.

Javascript

const friend = { name: "Emma", age: 28, city: "New York" };
const greeting = "Hello! Here is your friend's info:";
const message = `${friend.name} is ${friend.age} years old and lives in ${friend.city}.`;
// Your code here

Hint

Use console.log to print each string on its own line.

Practice

1. Which of the following is the correct way to create an object with a key name and value "Alice"?

easy

A. const obj = { name: "Alice" };

B. const obj = (name = "Alice");

C. const obj = [name: "Alice"];

D. const obj = name => "Alice";

Solution

1. Step 1: Understand object literal syntax

   Objects in JavaScript are created using curly braces with key-value pairs inside, like { key: value }.

2. Step 2: Identify the correct syntax for key-value pair

   The key name and value "Alice" should be inside curly braces separated by a colon.

3. Final Answer:

   const obj = { name: "Alice" }; -> Option A

4. Quick Check:

   Object literal = curly braces with key: value [OK]

Hint: Objects use curly braces with key: value pairs [OK]

Common Mistakes:

• Using parentheses instead of curly braces
• Using array brackets for objects
• Confusing arrow functions with object creation

2. Which of the following is the correct syntax to create an empty object in JavaScript?

easy

A. const obj = {};

B. const obj = ();

C. const obj = [];

D. const obj = new Object[];

Solution

1. Step 1: Recall empty object syntax

   An empty object is created using empty curly braces {}.

2. Step 2: Check each option

   const obj = {}; uses {}, which is the correct syntax. Others use parentheses, array brackets, or invalid syntax.

3. Final Answer:

   const obj = {}; -> Option A

4. Quick Check:

   Empty object = {} [OK]

Hint: Empty objects use just curly braces {} [OK]

Common Mistakes:

• Using parentheses instead of curly braces
• Using array brackets for objects
• Trying to use new Object[] which is invalid

3. What will be the output of the following code?

const person = { name: "Bob", age: 30 };
console.log(person.name);

medium

A. Error

B. 30

C. "Bob"

D. undefined

Solution

1. Step 1: Understand object property access

   Using dot notation person.name accesses the value of the key name in the object.

2. Step 2: Identify the value of name

   The value of name is the string "Bob".

3. Final Answer:

   "Bob" -> Option C

4. Quick Check:

   person.name = "Bob" [OK]

Hint: Dot notation gets value by key name [OK]

Common Mistakes:

• Confusing key name with value
• Using brackets without quotes incorrectly
• Expecting age instead of name

4. Find the error in the following code that tries to create an object:

const car = { brand = "Toyota", year: 2020 };

medium

A. Missing semicolon after object

B. Using = instead of : for the key brand

C. Using const instead of let

D. year value should be a string

Solution

1. Step 1: Check object key-value syntax

   In objects, keys and values are separated by a colon :, not an equals sign =.

2. Step 2: Identify the incorrect part

   The code uses brand = "Toyota" which is invalid syntax for object properties.

3. Final Answer:

   Using = instead of : for the key brand -> Option B

4. Quick Check:

   Object key-value separator = colon : [OK]

Hint: Use colon : between key and value in objects [OK]

Common Mistakes:

• Using = instead of : in object literals
• Thinking semicolon is mandatory inside object
• Confusing variable declaration keywords

5. You want to create an object student with keys name, age, and grades (an array). Which code correctly creates this object?

hard

A. const student = [ name: "Eva", age: 22, grades: [90, 85, 88] ];

B. const student = { "name" = "Eva", "age" = 22, "grades" = [90, 85, 88] };

C. const student = { name: "Eva", age: "22", grades: "90, 85, 88" };

D. const student = { name: "Eva", age: 22, grades: [90, 85, 88] };

Solution

1. Step 1: Verify object literal syntax with multiple keys

   Objects use curly braces with keys and values separated by colons, and multiple pairs separated by commas.

2. Step 2: Check each option for correct syntax and data types

   const student = { name: "Eva", age: 22, grades: [90, 85, 88] }; correctly uses colons and commas, and grades is an array. const student = { "name" = "Eva", "age" = 22, "grades" = [90, 85, 88] }; uses equals signs which is wrong. const student = [ name: "Eva", age: 22, grades: [90, 85, 88] ]; uses array brackets instead of curly braces. const student = { name: "Eva", age: "22", grades: "90, 85, 88" }; uses a string for grades instead of an array.

3. Final Answer:

   const student = { name: "Eva", age: 22, grades: [90, 85, 88] }; -> Option D

4. Quick Check:

   Object with array value uses colon and brackets [OK]

Hint: Use colons for keys and arrays inside objects with brackets [OK]

Common Mistakes:

• Using = instead of : for keys
• Using arrays brackets instead of curly braces for objects
• Putting arrays as strings instead of actual arrays