JavaScript Setter

Why javascript setter?

The setters are functions or methods used to assign variables. The setter concept is common in computer programming: almost all high-end programming languages, including JS, come with a syntax for the setter.

Looking at the topic “getter” before this article allows you to understand this topic better.

---

What is Encapsulation?

If you have learned an object-oriented programming language, you have heard this statement. First of all I will talk about this term and connect it to getter setter methods. Some features and functions may need to be stored from users first when writing programs. So let’s give an example of everyday life and understand better. We can compare the encapsulation to a phone. The phone buttons are in the middle, but many parts are hidden in the phone. The user is prompted to press only the keys. We can do this by encapsulation. Encapsulation gives the programmer the power to protect objects.

Encapsulation

Because of this situation getter and setter methods have emerged. “Setter” is used to write data to a hidden variable and “getter” to read data.

---

When to use getters and setters?

If you need to store the data in the project you have to use getter and setter. Maybe at first sight, it may not be easy. However, after understanding the logic of work, getter and setter are very useful.

---

Note the following when working with Set Syntax:

• You may have an identifier that is a number or string.
• It should not appear in an object that has data entry for another set or for the same property.
• You must have exactly a parameter

---

JavaScript Setter Examples

Example 1

        var person = {
            firstName: 'Tom',
            lastName: 'Smith',
            get fullName() {
                return this.firstName + ' ' + this.lastName;
            },
            set fullName(name) {
                var words = name.toString().split(' ');
                this.firstName = words[0] || '';
                this.lastName = words[1] || '';
            }
        }

        person.fullName = 'Jack Franklin';
        console.log(person.firstName); 
        console.log(person.lastName) 

output:

Tom
Franklin

---

Example 2

        let classExample = {
            number: 123456,
            get myFunction() { return number },
            set myFunction(x) { this.number = x; }
        };

        console.log(classExample.number )
        console.log(classExample.number = 123)

output:

123456
123

---

Example 3

        var obj = {
            fooVal: 'this is the value of foo',
            get foo() {
                return this.fooVal;
            },
            set foo(val) {
                this.fooVal = val;
            }
        }

        console.log(obj.foo);

        obj.foo = 'hello';

        console.log(obj.foo);

output:

this is the value of foo
hello

---

Example 4

        var obj = {
            n: 67,
            get id() {
                return 'The ID is: ' + this.n;
            },
            set id(val) {
                if (typeof val === 'number')
                    this.n = val;
            }
        }

        console.log(obj.id);

        obj.id = 893;
        console.log(obj.id);

        obj.id = "hello";
        console.log(obj.id);

output:

The ID is: 67
The ID is: 893
The ID is: 893

---

Example 5

        let text = {
            message: "truecodes.org",
            get mes() { return this.message },
            set mes(txt) { this.message = txt }
        };

        console.log(text.mes);
        console.log(text.mes = "codeblogger" );

output:

truecodes.org
codeblogger

---

Browser Support

Chrome	1
Edge	yes
Firefox	2
Internet Explorer	9
Opera	9.5
Safari	3
Android webview	1
Chrome for Android	18
Edge mobile	yes
Firefox for Android	4
Opera Android	yes