{"componentChunkName":"component---src-templates-post-template-js","path":"/posts/en/2016-06-27-getters-setters/","webpackCompilationHash":"a3ac22c47fe06e2afd02","result":{"data":{"markdownRemark":{"id":"cdd853a8-a681-5c0c-ab92-f4afc4b587a5","html":"

Problem

\n

You want to create getters and setters for a class in ES2015.

\n

Ingredients

\n\n

Directions

\n
    \n
  1. \n

    Create a class with some properties.

    \n
    class Person {\n  constructor(firstName, lastName) {\n    this._firstName = firstName;\n    this._lastName = lastName;\n  }\n}
    \n
    2. \n
\n\n
    \n
  1. \n

    Add methods that return the properties.

    \n
    class Person {\n  constructor(firstName, lastName) {\n    this._firstName = firstName;\n    this._lastName = lastName;\n  }\n  firstName() {\n    return this._firstName;\n  }\n  lastName() {\n    return this._lastName;\n  }\n}
    \n
    2. \n
  2. \n

    Define those methods as getters using the get keyword.

    \n
    class Person {\n  constructor(firstName, lastName) {\n    this._firstName = firstName;\n    this._lastName = lastName;\n  }\n  get firstName() {\n    return this._firstName;\n  }\n  get lastName() {\n    return this._lastName;\n  }\n}
    \n
    3. \n
  3. \n

    Add methods that sets new values to the properties.

    \n
    class Person {\n  constructor(firstName, lastName) {\n    this._firstName = firstName;\n    this._lastName = lastName;\n  }\n  firstName(value) {\n    this._firstName = value;\n  }\n  get firstName() {\n    return this._firstName;\n  }\n  lastName(value) {\n    this._lastName = value;\n  }\n  get lastName() {\n    return this._lastName;\n  }\n}
    \n
    4. \n
  4. \n

    Define those methods as setters using the set keyword.

    \n
    class Person {\n  constructor(firstName, lastName) {\n    this._firstName = firstName;\n    this._lastName = lastName;\n  }\n  set firstName(value) {\n    this._firstName = value;\n  }\n  get firstName() {\n    return this._firstName;\n  }\n  set lastName(value) {\n    this._lastName = value;\n  }\n  get lastName() {\n    return this._lastName;\n  }\n}
    \n
    5. \n
  5. \n

    Voilá, there you got perfect getters and setters.

    \n
    let person = new Person('John', 'Doe');\nconsole.log(person.firstName);  // \"John\"\nconsole.log(person.lastName);   // \"Doe\"\nperson.firstName = 'Jane';      // \"Jane\"\nconsole.log(person.lastName);   // \"Doe\"
    \n
    6. \n
\n

Notes

\n\n

Served best

\n\n

Alternative recipes

\n","fields":{"slug":"/posts/en/2016-06-27-getters-setters/","tagSlugs":["/tag/java-script/"]},"frontmatter":{"date":"2016-06-27T08:00:00.000Z","description":null,"tags":["JavaScript"],"title":"Create getters and setters in class syntax"}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"/posts/en/2016-06-27-getters-setters/"}}}