Adding and removing properties in Javascript - Cheat Sheet & Quick Revision

Recall & Review

beginner

How do you add a new property to an existing JavaScript object?

You add a new property by assigning a value to it using dot notation or bracket notation. For example:
obj.newProp = value; or obj['newProp'] = value;

beginner

How do you remove a property from a JavaScript object?

You remove a property using the delete operator. For example:
delete obj.propName; removes the property propName from obj.

beginner

What happens if you try to access a property that does not exist on an object?

If a property does not exist, accessing it returns undefined. It does not cause an error.

intermediate

Can you add properties to objects created from classes or functions in JavaScript?

Yes, JavaScript objects are flexible. You can add properties to any object, including those created from classes or constructor functions, by assigning new properties.

intermediate

What is the difference between dot notation and bracket notation when adding or removing properties?

Dot notation uses a fixed property name (like obj.prop). Bracket notation uses a string or variable (like obj['prop'] or obj[varName]). Bracket notation is useful when property names have spaces or special characters or are dynamic.

Which of the following adds a property 'age' with value 30 to the object 'person'?

A Both B and C

B person['age'] = 30;

C person.age = 30;

D person.add('age', 30);

Both dot notation and bracket notation can add properties to an object.

How do you remove the property 'name' from the object 'user'?

A user.remove('name');

B user.name = null;

C delete user.name;

D user['name'] = undefined;

The 'delete' operator removes a property from an object.

What will be the output of console.log(obj.nonExistentProp); if 'nonExistentProp' does not exist on 'obj'?

A null

B Error

C 0

D undefined

Accessing a non-existing property returns 'undefined' in JavaScript.

Which notation allows you to use a variable as the property name when adding a property?

A Bracket notation

B Neither

C Both dot and bracket notation

D Dot notation

Bracket notation allows dynamic property names using variables.

If you set a property to undefined, does it remove the property from the object?

A Yes, it removes the property

B No, the property still exists with value undefined

C It depends on the object type

D It throws an error

Setting a property to undefined does not remove it; the property still exists.

Explain how to add and remove properties from a JavaScript object with examples.

Think about how you assign values to new keys and how you delete keys.

Describe the difference between setting a property to undefined and deleting a property from an object.

Consider what happens to the property key in each case.

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