Git Product home page Git Product logo

fewpjs-getter-and-setter-methods-atx01-seng-ft-071320's Introduction

Building Cells: 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 {
  constructor(name) {
    this.name = name;
  }
  
  set phrase(phrase) {
    this._phrase = phrase;
  }

  get speak() {
    return `${this.name} says ${this._phrase || 'squawk'}`;
  }
}

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

let 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

fewpjs-getter-and-setter-methods-atx01-seng-ft-071320's People

Contributors

maxwellbenton avatar drakeltheryuujin avatar ihollander avatar dependabot[bot] avatar sdcrouse avatar thuyanduong-flatiron avatar

Watchers

James Cloos avatar Kaitlin Vignali avatar  avatar Victoria Thevenot avatar Otha avatar raza jafri avatar  avatar Joe Cardarelli avatar The Learn Team avatar  avatar Ben Oren avatar Matt avatar Alex Griffith avatar  avatar Amanda D'Avria avatar  avatar Ahmed avatar Nicole Kroese  avatar Dominique De León avatar  avatar Vicki Aubin avatar  avatar  avatar

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.