Aside from the insights provided in @millimoose's response, setters can also serve to modify other attributes.

function Person(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
}

Person.prototype = {
    get fullName() {
        return this.firstName + " " + this.lastName;
    },

    set fullName(name) {
        var names = name.split(" ");
        this.firstName = names[0];
        this.lastName = names[1];
    }
};

Now, by setting fullName, both firstName and lastName will be updated accordingly.

p = new Person('Vincent', 'Van Gogh')
p.firstName # "Vincent"
p.lastName # "Van Gogh"
p.fullName # "Vincent Van Gogh"
p.fullName = "Pablo Picasso"
p.firstName # "Pablo"
p.lastName # "Picasso"

Implementing Getters and Setters in JavaScript

Introduction

In JavaScript, getters and setters play a crucial role in defining computed properties or accessors. A computed property involves using functions to get or set the value of an object. Let’s illustrate this concept:

var person = { /* ... object with getters and setters ... */ };
person.email = 'example@email.com'; // triggers database update
console.log( person.username ); // outputs 'example'
console.log( person.city ); // outputs 'Anytown, USA'

Getters and setters enable automating actions when accessing a property, such as maintaining number ranges, reformatting strings, generating value-changed alerts, updating related data, granting access to private properties, etc.

The following examples demonstrate the basic syntax, but in real-world scenarios, you would customize input/output values based on your requirements, as mentioned earlier.

Using Keywords: get/set

ECMAScript 5 introduced the get and set keywords for defining computed properties. These keywords are supported by modern browsers, except for IE 8 and older versions.

var example = {
    age : 25,
    get age(){ return age; },
    set age( val ){ this.age = val; }
};
example.age = 30;
var currentAge = example.age;

Customizing Getters and Setters

Since get and set aren't reserved words, you can redefine them to create your own cross-browser computed property functions. This approach will function across all browsers.

var example = {
    _age : 25,
    get : function( prop ){ return this[ '_' + prop ]; },
    set : function( prop, val ){ this[ '_' + prop ] = val; }
};
example.set( 'age', 30 );
var currentAge = example.get( 'age' );

Alternatively, a more concise method is possible using a single function.

var example = {
    _age : 25,
    fetch : function( prop ){
        if( arguments.length < 2 ){ return this[ '_' + prop ]; }
        this[ '_' + prop ] = val;
    }
};
example.fetch( 'age', 30 );
var currentAge = example.fetch( 'age' );

Avoid the pattern below as it can lead to code bloat.

var example = {
    _a : 25, _b : 50, _c : 75,
    getA : function(){ return this._a; },
    getB : ..., getC : ..., setA : ..., setB : ..., setC : ...
};

To ensure security, the internal property names are prepended with underscores. This practice discourages direct access like example.name, encouraging the use of example.get('name') instead to retrieve a cleansed value. Conditional statements can be employed to execute different operations based on the accessed property name (prop).

Object.defineProperty() Functionality

An alternative to getters and setters is the Object.defineProperty() method, which allows adding these features to objects post-definition. It also enables setting configurable and enumerable behaviors. This mechanism works even on IE 8, albeit limited to DOM objects only.

var example = { _age : 25 };
Object.defineProperty( example, 'age', {
    get : function(){ return this._age; },
    set : function( val ){ this._age = val; }
} );
example.age = 30;
var currentAge = example.age;

Legacy Approach: __defineGetter__()

Although deprecated, __defineGetter__() remains popular online and is compatible with most browsers (excluding IE 10 and below). Nevertheless, given the availability of better alternatives that work effectively across various environments, its relevance may diminish over time.

var example = { _age : 25 };
example.__defineGetter__( 'age', function(){ return this._age; } );
example.__defineSetter__( 'age', function( val ){ this._age = val; } );

It's essential to utilize distinct names for internal properties versus accessor names in the latter case to prevent recursion (example.age calling example.get(age) calling example.age, creating a loop).

Further Reading

For detailed information on get, set, Object.defineProperty(), __defineGetter__(), __defineSetter__(), visit MDN. Explore more about IE8 support for getters through IE8 Getter Support documentation.

One way to make use of them is by implementing computed properties.

For instance:

function Square(side) {
    this.side = side;
}

Object.defineProperty(Square.prototype, 'perimeter', {
    get: function() { return 4*this.side; }
});

Object.defineProperty(Square.prototype, 'area', {
    get: function() { return this.side*this.side; }
});

s = new Square(5);
console.log(s.area); // Expected output is 25
console.log(s.perimeter); // Expected output is 20

^(CodePen)

Apologies for bringing back an old question, but I wanted to share a couple of basic examples and simple explanations for newcomers. None of the existing answers demonstrate syntax like the MDN guide's first example, which is very straightforward.

Getter:

var details = {
    firstname: 'John',
    lastname: 'Smith',
    get fullname() { return this.firstname + ' ' + this.lastname; }
};

console.log(details.fullname);

This will output John Smith. A getter acts like a variable object property but functions like a method by dynamically calculating its value. It's essentially a convenient way to define a function without requiring ().

Setter:

var location = {
    set data(what) {
        var loc = what.split(/\s*;\s*/),
        area = loc[1].split(/,?\s+(\w{2})\s+(?=\d{5})/);

        this.street = loc[0];
        this.city = area[0];
        this.state = area[1];
        this.zip = area[2];
    }
};

location.data = '123 Lexington Ave; New York NY  10001';
console.log(location.city);

When executed, this will display New York in the console. Similar to getters, setters follow the same syntax as setting an object's property, offering another elegant way to invoke a function without ().

For a more comprehensive and practical demonstration, visit this jsfiddle. Inputting values into the object's setter triggers the computation or population of other object elements. In the jsfiddle demo, providing an array of numbers prompts the setter to calculate mean, median, mode, and range; subsequently updating the object's properties with each result.

Understanding getters and setters in JavaScript can be confusing, especially if you are used to working with private properties in Object Oriented Languages. In JavaScript, there are no built-in ways to create truly private class properties, but you can emulate this behavior. Here is an example of a simple counter object that maintains its count privately.

var counter = function() {
    var count = 0;

    this.inc = function() {
        count++;
    };

    this.getCount = function() {
        return count;
    };
};

var myCounter = new Counter();
myCounter.inc();
myCounter.inc();
// Outputs "2" to the console
console.log(myCounter.getCount());

If you need further clarification, I recommend checking out Crockford's article on Private Members in Javascript.

One of the articles provided explains it clearly:

The advantage of writing JavaScript in this manner is that you can utilize hidden values that are not directly accessible to the user.

The objective is to protect and hide the fields by permitting access only through a get() or set() method. This way, you can internally store the data in any format you desire, while external components are only familiar with your public interface. This flexibility enables internal modifications without affecting outside interfaces, allowing for validation or error-checking within the set() method, among other things.

While it's common to see objects with public properties in JavaScript, we have the ability to define and control property access using descriptors. By doing so, we can determine how a property is accessed and manipulate its behavior. Take a look at this example:

var employee = {
    first: "Boris",
    last: "Sergeev",
    get fullName() {
        return this.first + " " + this.last;
    },
    set fullName(value) {
        var parts = value.toString().split(" ");
        this.first = parts[0] || "";
        this.last = parts[1] || "";
    },
    email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f0929f829983de83958297959586b09588919d809c95de939f9d">[email protected]</a>"
};

By utilizing descriptors, we can achieve the following outcome:

console.log(employee.fullName); //Boris Sergeev
employee.fullName = "Alex Makarenko";

console.log(employee.first);//Alex
console.log(employee.last);//Makarenko
console.log(employee.fullName);//Alex Makarenko

To create an instance method for a JavaScript class, you can utilize the constructor's prototype.

Here is an example code snippet:

// MyClass

var MyClass = function(name) {
    // instance property
    this.name = name;
};

// instance method
MyClass.prototype.getName = function() {
    return this.name;
};
MyClass.prototype.setName = function(name) {
    return this.name = name;
};


// test - start
function test() {
    var obj1 = new MyClass("obj1");
    var obj2 = new MyClass("obj2");
    console.log(obj1.getName());
    console.log(obj2.getName());

    obj1.setName("obj1_updated");
    console.log(obj1.getName());
    console.log(obj2.getName());
}

test();
// test - end

This code should be compatible with all browsers and can also be executed using nodejs.

When discussing accessors, the primary aim is to shield the underlying storage from random modifications. One way to achieve encapsulation is through a method like:

function Foo(someValue) {
    this.getValue = function() { return someValue; }
    return this;
}

var myFoo = new Foo(5);
/* By using getValue(), we can retrieve someValue but cannot alter it -- success in achieving encapsulation!
 */
myFoo.getValue();

On the other hand, if you're talking about JS getter/setter functionality such as defineGetter/defineSetter, or { get Foo() { /* code */ } }, it's important to note that in most modern engines, accessing these properties repeatedly may result in significantly slower performance. For example, consider the contrast between:

var a = { getValue: function(){ return 5; }; }
for (var i = 0; i < 100000; i++)
    a.getValue();

and

var a = { get value(){ return 5; }; }
for (var i = 0; i < 100000; i++)
    a.value;

Do you ever find getters and setters confusing? Getters are functions that execute when you retrieve a property, while setters run when you assign a value to it. To illustrate, consider the following code snippet:

obj.prop = "abc";

In this scenario, we are assigning the value "abc" to the prop property. If getters/setters are utilized, the setter function will be invoked with "abc" as an argument. A typical definition of a setter function within an object might resemble this:

set prop(var) {
   // perform actions using var...
}

The implementation of getters and setters may vary across different browsers. For instance, Firefox offers an alternative syntax involving double-underscored special ("magic") methods. On the other hand, Internet Explorer does not provide support for these features.

When I encountered a similar issue, I found the explanation I came across to be somewhat perplexing. The idea of replacing the prototype for an object that I did not create didn't quite sit right with me. In order to add a last property to the Array prototype without resorting to such drastic measures, I used the following method:

Object.defineProperty(Array.prototype, "last", {
    get: function() { return this[this.length - 1] }
});

In my opinion, this approach is just a tad more elegant than introducing a new function.

If you'd like, you can also employ the __defineGetter__ method:

function Vector2(x,y) {
    this.x = x;
    this.y = y;
}

Vector2.prototype.__defineGetter__("magnitude", function () {
   return Math.sqrt(this.x*this.x+this.y*this.y);
});

console.log(new Vector2(1,1).magnitude)

Alternatively, you could use this method:

function Vector2(x,y) {
    this.x = x;
    this.y = y;
    this.__defineGetter__("magnitude", function () {
       return Math.sqrt(this.x*this.x+this.y*this.y);
    });
}



console.log(new Vector2(1,1).magnitude)

There is no example provided here showcasing the usage of ES6 class (which has now become the norm and not something new):

class Student {

    contructor(firstName, lastName){
        this.firstName = firstName
        this.lastName = lastName
        this.secretId = Math.random()    
    }
    
    get fullName() {
        return `${this.firstName} ${this.lastName}`; // this is backtick in js, you can check it out here: https://stackoverflow.com/a/27678299/12056841
    }

    set firstName(newFirstName) {
        // validate that newFirstName is a string (and maybe limit length)
        this.firstName = newFirstName
    }

    get studentId() { return this.secretId }
}

Also, there is no setter for secretId to prevent unauthorized changes.

** If secretId is not meant to be changed at all, one effective approach is to declare it as 'private' within this class by using '#' before it (for example: this.#secretId = Math.random(), and return this.#secretId)

Update: regarding backing fields In cases where renaming your field or setter function is necessary, it might be more logical to change the field name. One option is, as mentioned earlier, utilizing a # to indicate the field as 'private'. Another method is simply altering the field name (_firstName, firstName_...)