What is a Property

Object in JavaScript is an unordered collection of Key-Value pairs. Each key-value pair is known as Property. Where key is the name of the Property. JavaScript uses it to search for the Property in the collection.

You can also think of property as a variable attached to the JavaScript object. They are similar to a regular variable but attached to the Object.

The Javascript objects can have any number of properties. You can also create an empty object without any properties.

The key or name of the property must be unique. The property name must be a string. (But can also be a symbol type). No two properties can have the same name.

We can assign value to the Property, just like we assign value to a regular variable. The value of the Property can be a primitive value, object, function, or special getters and setters methods.

There are two kinds of Properties. Data Property & Data PropertyAccessor Property

Creating Object Property

We usually create a Property when we create a Javascript object. JavaScript also allows us to add or delete properties even after the creation of the object.

There are many ways in which you can create a Javascript object. For Example, the following code creates the person object consist of three properties firstName, lastName & age using the object literalsyntax

        
var person = { 
    firstName: "Allie",      //FirstName Property
    lastName: "Grater",      //lastName Property
    age: 50                  //age Property
};
  

        
    

You can read more about Object Literal in JavaScript.

        
person.mobile = "999111999"
person.city= "New York"
    
        
    

        
var person = { 
    firstName: "Allie",   
    lastName: "Grater",   
    age: 50 ,             
    firstName:"test"
};
 
 
console.log(person.firstName)  //test
    
        
    

        
Object.defineProperty(obj, prop, descriptor)
    
        
    

        
var person = {};   // Creates a new object
 
 //Adding n new property using defineProperty
 Object.defineProperty(person, 'firstName', {
   value: "Bill",
   writable: true,
   enumerable: true,
   configurable: true
 });
  
 console.log(person)     //{firstName: "Bill"}
    
        
    

        
expression.property
    
        
    

        
var person = { 
    firstName: "Allie",   
    lastName: "Grater",   
    age: 50 ,             
};
 
 
person.firstName   //Allie
 
    
        
    

        
expression[property]
 
    
        
    

        
var person = { 
    "full name":"Allie Grater",   
};
 
person["full name"]   //Allie Grater
 
    
        
    

Setting Properties

You can use the assignment operator (=) to set the value of a property referred to via the dot notation or bracket notation. For example:

        
var person = { 
    age: 50 ,             
    "full name":"Allie Grater",   
};
 
 
person.age=60
person["full name"]="Hugo First"
 
 
console.log(person)   //{age: 60, full name: "Hugo First"}
 
    
        
    

When the property doesn’t exist, JavaScript will create it. Hence you need to be careful.

In the following example, we mistype full name as ful name. The JavaScript just creates a new property with that name and does not give any warning.

                            
var person = { 
    age: 50 ,             
    "full name":"Allie Grater",   
};
 
 
person.age=60
person["ful name"]="Hugo First"
 
console.log(person)  // {age: 60, full name: "Allie Grater", ful name: "Hugo First"}
 
  
    
        
    

The Second argument to object.create is a property descriptors.

                            
const person = {
  fullName: function() {
    console.log(this.firstName+' '+this.lastName);
  }
};
 
descriptors=  { firstName: { value: 'Alex' }, lastName: { value:'Ferguson' }}
 
const alex = Object.create(person,  descriptors);
alex.fullName()  
 
  
    
        
    

Property Names

You can use any valid string literal or Symbol as a Property Name.

We can even use the Reserved words as the property name. For Example, words like var & function etc are perfectly ok as Property Name (but not recommended)

The following example shows

        
var person = { 
    function: 50 ,                // function as property name      
    var:1000                      // keyword
};
 
 
console.log(person.function)        //50
console.log(person.var)             //1000
 
    
        
    

Creating a new object from Multiple Sources.

        
var src1 = { a: 10 };
var src2 = { b: 20 };
var src3 = { a: 1, c:30 };
var obj = Object.assign({}, src1,src2,src3);
 
console.log(obj )    //{a: 1, b: 20, c: 30}
 
    
        
    

You can also use any arbitrary string as Property Name. But we must use quotes around them. Also, you can access them only using bracket notation.

        
var obj = { 'not an identifier': 123 };
 
console.log(obj['not an identifier'])  //123
 
 
    
        
    

        
var prefix='book_'
 
 book= {} 
 book[prefix+'title']="Eloquent JavaScript"
 book[prefix+'author']="Marijn Haverbeke"
  
  
 console.log(book.book_title)
 console.log(book.book_author)
  
 
 
    
        
    

Deleting the Javascript Property

The delete operator allows us to remove property from the object. It will remove the key-value pair from the object.

                        
obj = {
    foo:'1',
    boo:'2'
}
 
console.log(obj)  {foo: "1", boo: "2"}
 
delete obj.foo
 
console.log(obj)   {boo: "2"}                                
                                

Trying to access and property that does not exist returns undefined. Hence deleted Property returns undefined. But note that you can also set a property to undefined, the Property still exists but has the value undefined. Hence merely checking for undefined does not tell you whether the property does exist or not.

You can only delete the property owned by the object. You cannot delete the inherited properties (i.e. Prototype Properties)

You can read more about Deleting a Property in JavaScript

Read More

1. JavaScript Tutorial
2. Functions in JavaScript
3. Function Arguments & Parameters
4. Default Parameters
5. Pass By Value & Pass By Reference
6. Function Expression
7. Nested Functions
8. Immediately-invoked Function Expressions (IIFE)
9. Callback functions
10. Arrow functions
11. Arguments Object
12. Rest Parameters