Adding and removing properties in Javascript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a new property age with value 25 to the object.

Javascript

const person = { name: 'Alice' };
person.[1] = 25;

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

Aage

Blength

Cpush

Dpop

Attempts:

3 left

💡 Hint

Common Mistakes

Using array methods like push or pop on an object.

Trying to assign a value to a method name.

To add a new property to an object, use dot notation with the property name. Here, person.age = 25; adds the property age.

2fill in blank

medium

Complete the code to remove the property color from the object.

Javascript

const car = { brand: 'Toyota', color: 'red' };
delete car.[1];

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

Acolor

Bbrand

Clength

Dmodel

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to assign null or undefined instead of deleting.

Deleting a property that does not exist.

The delete operator removes a property from an object. Here, delete car.color; removes the color property.

3fill in blank

hard

Fix the error in the code to correctly add a property height with value 180.

Javascript

const obj = {};
obj[1] = 180;

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

A[height]

B.height

C['height']

Dheight

Attempts:

3 left

💡 Hint

Common Mistakes

Using brackets without quotes for property names.

Trying to assign a value without dot or bracket notation.

To add a property using dot notation, use a dot followed by the property name without quotes or brackets. So, obj.height = 180; works correctly.

4fill in blank

hard

Fill both blanks to add a property score with value 100 and then remove it.

Javascript

const game = {};
game[1] = 100;
delete game[2];

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

A.score

B['score']

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing dot and bracket notation incorrectly.

Forgetting quotes in bracket notation.

You can add a property using dot notation: game.score = 100;. To delete it using bracket notation: delete game['score'];.

5fill in blank

hard

Fill all three blanks to add a property name with value 'Bob', update it to 'Robert', and then remove it.

Javascript

const user = {};
user[1] = 'Bob';
user[2] = 'Robert';
delete user[3];

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

A.name

B['name']

Attempts:

3 left

💡 Hint

Common Mistakes

Using bracket notation without quotes.

Trying to delete with dot notation without quotes.

Add and update the property using dot notation: user.name = 'Bob'; user.name = 'Robert';. Remove it using bracket notation: delete user['name'];.

Practice

1.

Which of the following is the correct way to add a new property age with value 25 to an existing object person?

easy

A. person.age = 25;

B. add person.age = 25;

C. person->age = 25;

D. person(age) = 25;

Solution

1. Step 1: Understand how to add properties in JavaScript objects

   Properties are added by assigning a value to object.property.

2. Step 2: Check each option's syntax

   Only person.age = 25; uses correct JavaScript syntax to add a property.

3. Final Answer:

   person.age = 25; -> Option A

4. Quick Check:

   Adding property = person.age = 25 [OK]

Hint: Use dot notation: object.property = value to add [OK]

Common Mistakes:

• Using invalid syntax like 'add' keyword
• Using arrow or parentheses incorrectly
• Trying to call property as a function

2.

Which of the following lines correctly removes the property color from the object car?

easy

A. car.color = null;

B. remove car.color;

C. car.delete(color);

D. delete car.color;

Solution

1. Step 1: Recall how to remove properties in JavaScript

   The delete keyword removes a property from an object.

2. Step 2: Verify each option

   Only delete car.color; correctly removes the property.

3. Final Answer:

   delete car.color; -> Option D

4. Quick Check:

   Remove property = delete object.property [OK]

Hint: Use 'delete object.property;' to remove properties [OK]

Common Mistakes:

• Using 'remove' keyword which doesn't exist
• Assigning null instead of deleting
• Calling delete as a method

3.

What will be the output of the following code?

const obj = {a: 1};
obj.b = 2;
delete obj.a;
console.log(obj);

medium

A. {a: 1, b: 2}

B. {b: 2}

C. {a: undefined, b: 2}

D. {}

Solution

1. Step 1: Add property 'b' to object

   After obj.b = 2;, object is {a:1, b:2}.

2. Step 2: Delete property 'a'

   delete obj.a; removes property 'a', so object becomes {b:2}.

3. Final Answer:

   {b: 2} -> Option B

4. Quick Check:

   Delete removes property completely [OK]

Hint: Deleting removes property; it doesn't set undefined [OK]

Common Mistakes:

• Thinking delete sets property to undefined
• Expecting original property to remain
• Confusing object output format

4.

Find the error in the following code that tries to remove the name property from user:

const user = {name: 'Alice', age: 30};
remove user.name;

medium

A. The keyword remove is invalid in JavaScript.

B. The property name cannot be deleted.

C. The object user is not defined.

D. The property should be set to null instead.

Solution

1. Step 1: Check the keyword used for deletion

   JavaScript uses delete, not remove, to delete properties.

2. Step 2: Confirm object and property validity

   user is defined and name is a valid property.

3. Final Answer:

   The keyword remove is invalid in JavaScript. -> Option A

4. Quick Check:

   Use 'delete' keyword, not 'remove' [OK]

Hint: Use 'delete' keyword to remove properties, not 'remove' [OK]

Common Mistakes:

• Using 'remove' instead of 'delete'
• Trying to set property to null to delete
• Assuming property can't be deleted

5.

You have an object settings with properties {theme: 'dark', fontSize: 14, showSidebar: true}. You want to remove showSidebar only if it exists, then add a new property language with value 'en'. Which code correctly does this?

hard

A. settings.showSidebar = undefined;
settings.language = 'en';

B. delete settings.showSidebar;
settings.language == 'en';

C. if ('showSidebar' in settings) {
delete settings.showSidebar;
}
settings.language = 'en';

D. if (settings.showSidebar) {
settings.showSidebar = null;
}
settings.language = 'en';

Solution

1. Step 1: Check if property exists before deleting

   Using 'showSidebar' in settings ensures property exists before deletion.

2. Step 2: Add new property correctly

   settings.language = 'en'; adds the new property properly.

3. Step 3: Verify other options

   delete settings.showSidebar;
   settings.language == 'en';

   uses wrong comparison operator == instead of assignment =.

   settings.showSidebar = undefined;
   settings.language = 'en';

   sets property to undefined but does not remove it.

   if (settings.showSidebar) {
     settings.showSidebar = null;
   }
   settings.language = 'en';

   sets property to null but does not remove it.

4. Final Answer:

   if ('showSidebar' in settings) { delete settings.showSidebar; } settings.language = 'en'; -> Option C

5. Quick Check:

   Check existence, delete, then add property [OK]

Hint: Check property with 'in' before delete; assign new property with '=' [OK]

Common Mistakes:

• Using '==' instead of '=' for assignment
• Setting property to undefined or null instead of deleting
• Not checking if property exists before deleting