Object creation in Javascript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create an empty object named person.

Javascript

const person = [1];

Drag options to blanks, or click blank then click option'

A{}

B[]

Cnull

D''

Attempts:

3 left

💡 Hint

Common Mistakes

Using square brackets creates an array, not an object.

Using quotes creates a string, not an object.

Use curly braces {} to create an empty object in JavaScript.

2fill in blank

medium

Complete the code to create an object car with a property make set to 'Toyota'.

Javascript

const car = [1];

Drag options to blanks, or click blank then click option'

Amake: 'Toyota'

B['make', 'Toyota']

C('make', 'Toyota')

D{make: 'Toyota'}

Attempts:

3 left

💡 Hint

Common Mistakes

Using square brackets creates an array, not an object.

Leaving out curly braces causes syntax errors.

Use curly braces with key-value pairs to create an object with properties.

3fill in blank

hard

Fix the error in the code to create an object book with a property title set to 'JavaScript'.

Javascript

const book = [1];

Drag options to blanks, or click blank then click option'

A{title: 'JavaScript'}

B{title = 'JavaScript'}

C[title: 'JavaScript']

D(title: 'JavaScript')

Attempts:

3 left

💡 Hint

Common Mistakes

Using equals sign = instead of colon : in object literals.

Using square brackets or parentheses instead of curly braces.

Use colon : to assign values to keys in objects, not equals =.

4fill in blank

hard

Fill both blanks to create an object user with properties name and age.

Javascript

const user = [1] name[2] 'Alice', age: 30 };

Drag options to blanks, or click blank then click option'

A{

B[

C:

D=

Attempts:

3 left

💡 Hint

Common Mistakes

Using square brackets instead of curly braces to start the object.

Using equals sign = instead of colon : for properties.

Objects start with { and properties use colon : to assign values.

5fill in blank

hard

Fill all three blanks to create an object product with properties id, name, and price.

Javascript

const product = [1] id[2] 101, name[3] 'Pen', price: 1.5 };

Drag options to blanks, or click blank then click option'

A{

B:

C,

D=

Attempts:

3 left

💡 Hint

Common Mistakes

Using equals sign = instead of colon :.

Forgetting commas between properties.

Start the object with {, use colon : to assign values, and separate properties with commas ,.

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