Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction 
2.
Accessor Property
3.
Javascript Getter
4.
Javascript Setter
5.
Javascript Object.defineProperty Method
6.
Frequently Asked Questions
7.
Key Takeaways
Last Updated: Mar 27, 2024

Getters and Setters in Js

Author Rubleen Kaur
0 upvote
gp-icon
Basics of Javascript
Free guided path
10 chapters
68+ problems
gp-badge
Earn badges and level up

Introduction 

In javascript, we have two types of object properties, Data Properties and Accessor Properties. In this article, we will briefly explain the Accessor Properties - Getters and Setters. Accessor Properties are represented using Getters and Setters methods. In object literals, these properties are denoted by get and set keywords. 

 

 

This article will further cover how to create getters and setters in Javascript. Getters and Setters work in a pair. A getter is used to return the current value of the variable; on the other hand, the setter is used to change the value of the variable to which it is defined. 

To have a deeper understanding of Getters and Setters, let’s start by learning a bit more about them in detail.


Accessor Property

Javascript has two functions, the getters and setters methods. When we need to access the property, the return value is used from the getter, and for setting the value, the setter is used. 

→ The ‘get’ keyword is used to define a getter method to set the property’s value.

→ The ‘set’ keyword is used to define a setter method to allocate (set) the property’s value.

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Javascript Getter

In Js, we use the getter method to return the object’s private value to the user without the user directly accessing the variable itself. 

const codingninja = {

    // declaring the data property.
    firstName: 'Coding',
    
    // declaring the accessor property(getter).
    get getName() {
        return this.firstName;
    }
};

// Access the data property.
console.log(codingninja.firstName); //Ninja

// Access the getter method.
console.log(codingninja.getName); //Ninja.

// If we try to access as a method.
console.log(codingninja.getName()); // error

 

In the example given, the getter method is initialized using the get keyword. The getter method is used to read the value.

Javascript Setter

The Javascript Setter method is used to assign the value to a variable. We can use the Setter property even to modify the values assigned to the variable. For example, 

const codingninjas = {
    firstName: 'Coding',
    
    //declaring the accessor property(setter).
    set changeName(newName) {
        this.firstName = newName;
    }
};

console.log(codingninjas.firstName); //Coding.

// We can modify(set) object property using the setter method.
codingninjas.changeName = 'Ninjas';

console.log(codingninjas.firstName); // Ninjas.

 

In the example, explained above the setter method is used to modify the value of the object. We have used the setter method to change the value of firstName from Coding to Ninjas. 

Javascript Object.defineProperty Method

We can also use Object.defineProperty to add getters and setters in Javascript. 

For example,

const codingninjas = {
    firstName'Coding'
}

//Get the property 
Object.defineProperty(codingninjas, "getName", {
    getfunction () {
        return this.firstName;
    }
});

// Set the property
Object.defineProperty(codingninjas, "changeName", {
    setfunction (value) {
        this.firstName = value;
    }
});

console.log(codingninjas.firstName); // Coding

//Change the property value
codingninjas.changeName = 'Ninjas';

console.log(codingninjas.firstName); // Ninjas

 

In the example, we have used Object.defineProperty() for setting and getting the values.

The syntax of the Object.definePeroperty() is given as:

Object.defineProperty(obj, prop, descriptor)

In this method, the three parameters are passed, which can be briefly described as:

  • The first argument given is the Object name.
  • The second argument which is passed is the name of the property.
  • The third argument is the object which describes the property.

Practice by yourself with the help of online JS editor.

Frequently Asked Questions

  1. What is Accessor Property?
    Ans: Accessor Property is used to define the access to the object’s property by dot notation or bracket notation.
     
  2. What are Getters and Setters?
    Ans: When we need to access the property, the return value is used from the getter, and for setting the value, the setter is used. 
    → The ‘get’ keyword is used to define a getter method to set get the value of the property.
    → The ‘set’ keyword is used to define a setter method to allocate (set) the property’s value.
     
  3. How can we use Getters and Setters in Javascript?
    Ans: There are two ways to use Getters and Setters in Javascript,
    → The first is to use the get and the set methods. 
    → The second way is to use the Object.defineProperty() method. 

 

Key Takeaways

Hey everyone, so let’s brief out the article. 

  • This article has explained the use of Getters and Setters in Javascript and their uses.
  • We have discussed each of the methods with descriptive examples for better understanding.
  • Further, we have seen how we can use the Object.defineProperty() method to use the Getters and Setters. 

Isn’t Web Development engaging? Building new websites and using amazing animations and different APIs, don’t be scared if you cannot grasp the hold of this vast development. We have the perfect web development course for you to make you stand out from your fellow developers. 

 

Happy Learning Ninjas!

Previous article
“New” Constructor operator in JavaScript
Next article
Optional chaining
Guided path
Free
gridgp-icon
Basics of Javascript
10 chapters
68+ Problems
gp-badge
Earn badges and level up
Live masterclass