| In this article |
|---|
| Bracket Notation for Properties |
| Using Descriptors property |
| Writable attribute |
| Using Enumerabe Attribute |
| Useing Configurable Attribute |
| Using get and set |
1 - Bracket Notation for Properties
You can access property by using object followed by its property like this:
'use strict'
var employee = {
name: 'Ahmed',
salary: '5000'
}
// use object followed by property
document.write(employee.name)
//
output Ahmed
Or by using bracket notation like this:
'use strict'
var employee = {
name: 'Ahmed',
salary: '5000'
}
// bracket notation
document.write(employee['name']) // output Ahmed
Also you can define a new property like this:
'use strict'
var employee = {
name: 'Ahmed',
salary: '5000'
}
//assign new property
employee['lastName']
= 'Saad';
// bracket notation
document.write(employee['lastName']) // output Saad
2 - Using Descriptors property
Beside name and value every property has a property Descriptor.
Use property Descriptor to see attributes of that property.
Every property has attributes value , writable , enumerable and configurable attributes and by default it's all set to true.
You can see attributes by looping over Object.getOwnPropertyDescriptor() property like this:
'use strict'
var employee = {
name: 'Ahmed',
salary: '5000'
}
// looping over Object.getOwnPropertyDescriptor()
for (var property in
Object.getOwnPropertyDescriptor(employee, 'name')) {
document.write(property + ' ' +
Object.getOwnPropertyDescriptor(employee, 'name')[property])
document.write('<br/>')
}
//Output
//value Ahmed
//writable true
//enumerable true
//configurable true
3 - Writable attribute
You can use writable attribute to define whether the value of property can be changed from initial value or not.
You can change the value of writable attribute by using Object.defineProperty() like this :
'use strict'
var employee = {
name: 'Ahmed',
salary: '5000'
}
Object.defineProperty(employee, 'name', { writable: false
});
//trying to alter name
employee['name']
= 'Saad'
document.write(employee['name']);
//Output
//If you go to developer tools in your browser you will see error like
this
// " Uncaught TypeError: Cannot assign to read only property 'name'
of #<Object> "
// Note : you have
to use 'use strict'
You can not apply non-writable property if a property contains an object , you can use Object.freeze() instead like this :
'use strict'
var employee = {
name: {
firstName: 'Ahmed',
lastName: 'Saad'
},
salary: '5000'
}
Object.defineProperty(employee, 'name', { writable: false
});
//trying to alter name.lastName
employee.name.lastName = 'Salah'
document.write(employee.name.lastName); //Output Salah
Object.freeze(employee.name);
//trying to alter name.lastName
employee.name.lastName = 'Saad';
document.write(employee.name.lastName);
//Output
//If you go to developer tools in your browser you will see error like
this
// "Uncaught TypeError: Cannot assign to read only property
'lastName' of #<Object> "
// Note : you have
to use 'use strict'
4 - Using Enumerabe Attribute
You can prevent property from being looping by setting enumerable attribute to false like this:
Note : If you set enumerable attribute to false it will affect when you try to serialize object to JSON
'use strict'
var employee = {
name: 'Ahmed',
salary: '5000'
}
// looping over Object.getOwnPropertyDescriptor()
for (var property in employee) {
document.write(property + ' ' + employee[property])
document.write(' ')
} //Output value Ahmed , salary 5000
//new line
document.write('<br/>')
Object.defineProperty(employee, 'name', { enumerable: false
});
for (var property in employee) {
document.write(property + ' ' + employee[property])
} //Output salary 5000
4 - Useing Configurable Attribute
Configurable Attribute can prevent an attribute from being changed or any property from being deleted from the object.
Use Object.defineProperty(Object, 'property' , {configurable : false}) to set value to false.
5 - Using get and set
You can use get and set to set or return value by using a function like this
'use strict'
var employee = {
name: {
firstName: 'Ahmed',
lastName: 'Saad'
},
salary: '5000'
}
Object.defineProperty(employee, 'fullName', {
get: function () {
return this.name.firstName + ' ' + this.name.lastName
}
});
document.write(employee.fullName) //output Ahmed Saad
// Note you can use
same technique for set to set new value
