Let us suppose we have an object called User like this:
Now suppose we want to return the full name of the function it will something be like this:
But this is a naive approach and in case if we have to add something extra in the statement, we have to change every where, instead the better way is to give a function that will return this expression/value like:
Now this is good but:
Here in this code there are 2 keywords we have seen,
1 2 3 4 | const user = { firstName: 'A', lastName: 'B', } |
Now suppose we want to return the full name of the function it will something be like this:
1 | console.log(`${user.firstName} ${user.lastName}`) |
But this is a naive approach and in case if we have to add something extra in the statement, we have to change every where, instead the better way is to give a function that will return this expression/value like:
1 2 3 4 5 6 7 8 9 | const user = { firstName: 'A', lastName: 'B', fullName () { // previous version was like fullName: function () {...} but changed in ES6 return `${this.firstName} ${this.lastName}` } } console.log(${user.fullName()) |
Now this is good but:
- what if you want to use it as a field and not as a function, I mean, I want to use it something like: console.log(${user.fullName).
- And we want to set the value of firstName and lastName on the basis of value we are going to pass to fullName like user.fullName = 'Javascript rocks'
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | const user = { firstName: 'A', lastName: 'B', get fullName () { return `${this.firstName} ${this.lastName}` } set fullName (value) { const tokens = value.split(' '); this.firstName = tokens[0]; this.lastName = tokens[1]; } } console.log('Before set', ${user.fullName}) user.fullName = 'Javascript Rocks'. console.log('After set', ${user.fullName}) |
Here in this code there are 2 keywords we have seen,
- get = for accessing the property (at line 4)
- set = for setting the property (at line 8)
These 2 keywords make the function as a property and that is the reason at line 15 and line 19 we have accessed the fullName without the parenthesis.
That's it, its awesome right :)
Happy Coding :)
For reference, please check out this: https://www.youtube.com/watch?v=bl98dm7vJt0
Happy Coding :)
For reference, please check out this: https://www.youtube.com/watch?v=bl98dm7vJt0