• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

JavaScript

coding learning websites codepractice

JS Basics

JS Variables & Operators

JS Data Types & Conversion

JS Numbers & Math

JS Strings

JS Dates

JS Arrays

JS Control Flow

JS Loops & Iteration

JS Functions

JS Objects

JS Classes & Modules

JS Async Programming

JS Advanced

JS HTML DOM

JS BOM (Browser Object Model)

JS Web APIs

JS AJAX

JS JSON

JS Graphics & Charts

JavaScript Object Properties

← Previous Next →

In JavaScript, properties are the key–value pairs inside an object. The key (property name) is always a string (or symbol), and the value can be any valid JavaScript data type, including numbers, strings, arrays, functions, or even other objects.

Understanding object properties is essential because they allow you to store, retrieve, and manipulate data in objects. Properties can be enumerable, configurable, writable, and can even have getter and setter methods for advanced use cases.

Property Names

1. String Keys

Most properties use strings as keys.

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 25
};

console.log(person.firstName); // John

2. Keys with Spaces or Special Characters

If a key contains spaces or symbols, you must use quotes and bracket notation.

const employee = {
  "full name": "Alice Smith",
  "job-title": "Developer"
};

console.log(employee["full name"]); // Alice Smith
console.log(employee["job-title"]); // Developer

3. Symbol Keys

Symbols are unique identifiers that can also be used as property names.

const id = Symbol("id");
const user = {
  name: "Rahul",
  [id]: 101
};

console.log(user[id]); // 101

Accessing Object Properties

There are two ways:

  1. Dot Notation – Used when the property name is a valid identifier.

console.log(person.lastName); // Doe

  1. Bracket Notation – Useful when the property name has spaces, special characters, or is dynamic.

const key = "age";
console.log(person[key]); // 25

Adding, Modifying, and Deleting Properties

Adding Properties

person.country = "USA";
console.log(person.country); // USA

Modifying Properties

person.age = 26;
console.log(person.age); // 26

Deleting Properties

delete person.age;
console.log(person.age); // undefined

Property Attributes

Each property in JavaScript has internal attributes:

  1. Writable – Determines if the property value can be changed.

  2. Enumerable – Determines if the property shows up in loops like for...in.

  3. Configurable – Determines if the property can be deleted or changed to an accessor property.

You can inspect these attributes using Object.getOwnPropertyDescriptor():

const obj = { name: "Sam" };
console.log(Object.getOwnPropertyDescriptor(obj, "name"));
/*
{
  value: "Sam",
  writable: true,
  enumerable: true,
  configurable: true
}
*/

Defining Properties Explicitly

You can define properties with custom attributes using Object.defineProperty():

const person = {};
Object.defineProperty(person, "id", {
  value: 101,
  writable: false,      // Cannot be changed
  enumerable: true,     // Will appear in loops
  configurable: false   // Cannot be deleted
});

console.log(person.id); // 101
person.id = 202;        // Ignored
console.log(person.id); // 101

Getter and Setter Properties

JavaScript allows getter and setter methods to control access to a property.

const student = {
  firstName: "Rahul",
  lastName: "Sharma",
  get fullName() {
    return this.firstName + " " + this.lastName;
  },
  set fullName(name) {
    const parts = name.split(" ");
    this.firstName = parts[0];
    this.lastName = parts[1];
  }
};

console.log(student.fullName); // Rahul Sharma
student.fullName = "Anil Kumar";
console.log(student.firstName); // Anil
console.log(student.lastName);  // Kumar

Getters are useful for computed properties, while setters allow controlled modification.

Checking Property Existence

There are multiple ways to check if a property exists in an object:

  1. in operator

console.log("firstName" in student); // true

  1. hasOwnProperty() method

console.log(student.hasOwnProperty("age")); // false

Enumerating Properties

Properties can be listed or iterated using:

  1. for...in loop

for (let key in student) {
  console.log(key + " : " + student[key]);
}

  1. Object.keys(), Object.values(), Object.entries()

console.log(Object.keys(student));   // ["firstName", "lastName", "fullName"]
console.log(Object.values(student)); // ["Anil", "Kumar", "Anil Kumar"]
console.log(Object.entries(student));
/*
[
  ["firstName", "Anil"],
  ["lastName", "Kumar"],
  ["fullName", "Anil Kumar"]
]
*/

Note: Getter properties appear in Object.keys() and Object.entries() if enumerable.

Summary

  • Properties are key–value pairs inside objects.

  • Property names can be strings or symbols; values can be any type.

  • Properties are accessed using dot or bracket notation.

  • Properties can be added, modified, deleted, or made read-only using descriptors.

  • Getter and setter methods allow controlled access to properties.

  • You can check property existence with in or hasOwnProperty().

  • Enumerating properties can be done using for...in, Object.keys(), Object.values(), or Object.entries().

Understanding object properties deeply helps in working with advanced objects, classes, and APIs efficiently in JavaScript.

Practice Questions

  1. Create an object car with properties brand, model, and year. Then, log the brand property using dot notation.

  2. Add a new property color to the car object and assign it any value. Log the updated object.

  3. Modify an existing property year in the car object to a new value. Log the updated property.

  4. Delete the property model from the car object. Verify that it has been removed.

  5. Use a property name with space: Create an object employee with a property "job title" and assign a value. Access this property using bracket notation.

  6. Check if a property exists in an object: Use in operator and hasOwnProperty() to check if the property color exists in the car object.

  7. Create a getter property: Create an object student with firstName and lastName. Add a getter property fullName that returns the full name. Log student.fullName.

  8. Create a setter property: Using the student object, add a setter for fullName that splits a string into firstName and lastName. Update the full name using the setter and log both first and last names.

  9. Inspect property attributes: Use Object.getOwnPropertyDescriptor() to check the attributes (writable, enumerable, configurable) of the car object's brand property.

  10. Enumerate all properties of an object: Use for...in and Object.keys() on the student object to list all property names. Compare the output of both methods.

← Previous Next →

JavaScript

online coding class codepractice

JS Basics

JS Variables & Operators

JS Data Types & Conversion

JS Numbers & Math

JS Strings

JS Dates

JS Arrays

JS Control Flow

JS Loops & Iteration

JS Functions

JS Objects

JS Classes & Modules

JS Async Programming

JS Advanced

JS HTML DOM

JS BOM (Browser Object Model)

JS Web APIs

JS AJAX

JS JSON

JS Graphics & Charts

codepractice logo
Login
Go Back Top