DEV Community

Cover image for JavaScript Object Getter and Setter Methods
Bello Osagie
Bello Osagie

Posted on • Edited on

2 2

JavaScript Object Getter and Setter Methods

image.png


Getter

Getter methods are used to return an object's properties.

See the examples below:

const person = {
  name: 'Bello',
  age: 27,
  getPerson() {
    if (typeof this.name === 'string' && typeof this.age === 'number') {
      return `${this.name} is ${this.age} years old!`;
    }

    return "Name or age is invalid";
  } 
}

console.log( person.getPerson() );
Enter fullscreen mode Exit fullscreen mode

We can add a little more get keyboard to the code snippet above.

const person = {
  name: 'Bello',
  age: 27,
  get getPerson() {
    if (typeof this.name === 'string' && typeof this.age === 'number') {
      return `${this.name} is ${this.age} years old!`;
    }

    return "Name or age is invalid";
  } 
}

console.log(person.getPerson); //  No parenthesis used
Enter fullscreen mode Exit fullscreen mode

The difference is when the get keyword was used, no parenthesis was used in the calling function.

getPerson, not getPerson()."

The name property

A function in on object looks like a property when the get keyword is used.

See the example:

const sayHi = {
  get name() {
    return "Hello World!";
  }
};

sayHi.name; // "Hello World!"
Enter fullscreen mode Exit fullscreen mode

The syntax above looks like object.property syntax.

We can get the name of a function with the name property.

See the example below:

function greet() {
  return "Hello World!";
}

console.log(greet.name); // greet
Enter fullscreen mode Exit fullscreen mode

A function name can also be accessible even if used as a default parameter in another function.

function func(greet = function() {}) {
  console.log(greet.name); // greet
}

func();
Enter fullscreen mode Exit fullscreen mode

The length property

The length or the number of parameters of a function can also be accessible by the length property.

See the example below:

const func = (name, age) => {
  return "${name} is ${age} today!";
}

console.log(func.length); // 2
Enter fullscreen mode Exit fullscreen mode

Setter

Setter methods are used to set or reassign values of existing properties within an object.

const person = {
  name: 'Bello',
  age: 27
} 

person.name = 'John';
console.log(person.name) // John;
Enter fullscreen mode Exit fullscreen mode

We can do more than the example above by checking if certain properties exist in an object.
In the example below, an existing property gets reassigned

const person = {
  name: 'Bello',

  set setPerson(name) {
    if (this.name) {
      this.name = name;
    } else { 
      console.log("Give a valid name");
    }
  } 

};

person.setPerson = 'John';
console.log(person.name, typeof person.name) // John string
Enter fullscreen mode Exit fullscreen mode

Happy coding!!!


image.png


Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

Top comments (0)

The best way to debug slow web pages cover image

The best way to debug slow web pages

Tools like Page Speed Insights and Google Lighthouse are great for providing advice for front end performance issues. But what these tools can’t do, is evaluate performance across your entire stack of distributed services and applications.

Watch video

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay