Giter VIP home page Giter VIP logo

phase-1-getter-and-setter-methods's Introduction

Getter and Setter Methods

Learning Goals

  • Build getter and setter methods to calculate computed properties

Introduction

We've seen so far that we can write methods inside our classes that allow us to access and change properties. These methods work fine in some cases. However, we know about additional JS syntax that we can use: get and set. With get, we can return calculated or dynamic data based on object properties, and with set we can change a property in a controlled way. In this lab, we will be building pseudo-properties to illustrate these concepts.

Build Getter and Setter Method to Calculate Computed Properties

Let's look at a quick example for review:

class Bird {
  #phrase;

  constructor(name) {
    this.name = name;
  }

  set phrase(phrase) {
    this.#phrase = phrase;
  }

  get speak() {
    return `${this.name} says ${this.#phrase || "squawk"}`;
  }
}

const daffy = new Bird("Daffy");
daffy.speak; // => 'Daffy says squawk'
daffy.phrase = "it's rabbit season!";
daffy.speak; // => 'Daffy says it's rabbit season!'

Our Bird class accepts the parameter of name, which is set each time a new instance of Bird is created. When phrase is set, our new Bird instance can speak a phrase. If it is not set, it will squawk.

const buddy = new Bird("Buddy");
buddy.phrase = "What'cha doin'?";
buddy.speak; // returns 'Buddy says What'cha doin'?'

Building on this concept, we're going to build our own shape calculator!

  • First, let's create a class of Circle
  • Circle will accept 1 parameter, radius, and use this.radius to store the value
  • Use Math.PI to get an accurate measurement of pi (π)
  • Define getter methods for diameter, circumference, and area which will calculate each value using this.radius and pi
  • Define setter methods for diameter, circumference, and area which will accept values for each calculation, calculate the radius based on the input value and set this.radius accordingly
    • Hint: You will need to use Math.sqrt() in your area setter method

For reference, here are the formulas for calculating diameter, circumference and area:

  • Diameter = radius • 2
  • Circumference = π • diameter
  • Area = π • radius2

Don't forget about PEMDAS!

All instances of Circle should be able to calculate the diameter, circumference, and area based on the given radius. All instances should also be able to set this.radius by setting a value to diameter, circumference, or area.

Conclusion

Getter and setter methods are very useful for doing things behind-the-scenes in JavaScript. Using a setter, you can call a function each time the value of a pseudo-property is changed, making sure all data on a class instance is consistent. Using a getter, you can return a computed value as though it were a property! Just as you can set and retrieve basic information from properties, you can also perform a number of functions that will "automagically" spit out the output you want.

Resources

phase-1-getter-and-setter-methods's People

Contributors

dependabot[bot] avatar drakeltheryuujin avatar ihollander avatar jlboba avatar lizbur10 avatar maxwellbenton avatar thuyanduong-flatiron avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

phase-1-getter-and-setter-methods's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.