Skip to content
Advertisements

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
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

Chrome1
Edgeyes
Firefox2
Internet Explorer9
Opera9.5
Safari3
Android webview1
Chrome for Android18
Edge mobileyes
Firefox for Android4
Opera Androidyes
Advertisements

1 Comment »

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: