Git Product home page Git Product logo

fewpjs-oo-initializing-instances-dumbo-web-120919's Introduction

Initializing Instances

Learning Goals

  • Create a class in JavaScript using the class keyword
  • Provide a JavaScript class's constructor instantiation data for an instance

Introduction

In this lab, we are going to practice creating Object Oriented classes and instances using JavaScript's class keyword. We are also going to use JavaScript's class constructor to instantiate data into a class. In other words, we're going to create a class, and then put some data in it.

Create a class in JavaScript using the class keyword

Remember, when we want to create a class in JavaScript, we want to create it using the class keyword:

class Dog {}

Provide a JavaScript class's constructor instantiation data for an instance

Within our class, JavaScript class's constructor allows us to pass data to our new class.

class Dog {
  constructor(name, breed) {
    this.name = name;
    this.breed = breed;
  }
}

You could then create data for the class above by doing something like the following:

let bigFluffyDog1 = new Dog("Buzz", "greatPyrenees");
let bigFluffyDog2 = new Dog("Woody", "labrador");

bigFluffyDog1; // => Dog { name: 'Buzz', breed: 'greatPyrenees' }
bigFluffyDog2; // => Dog { name: 'Woody', breed: 'labrador' }

Instructions

To practice OOP concepts, let's create 3 classes that use constructor methods. These constructors will assign properties based on initial parameters.

  1. Create a class for Breakfast. Breakfast will have a constructor with a food and a drink.
  2. Create a class for Lunch. Lunch will have a constructor with a salad, a soup, and a drink.
  3. Create a class for Dinner. Since dinner is a little bit fancier, Dinner will have a constructor with salad, soup, entree, and dessert. Indicate that dessert is intended to be a private property by including an underscore (_) at the beginning.

Conclusion

By effectively creating classes and instances, you have mastered the beginning of Object Oriented JavaScript. Feel free to play around with your newly created classes to create more instances!

Resources

fewpjs-oo-initializing-instances-dumbo-web-120919's People

Contributors

maxwellbenton avatar cjbrock avatar shannon-nabors avatar thuyanduong-flatiron avatar drakeltheryuujin avatar dependabot[bot] avatar

Watchers

James Cloos avatar  avatar  avatar Victoria Thevenot avatar Bernard Mordan avatar Otha avatar raza jafri avatar  avatar Joe Cardarelli avatar The Learn Team avatar  avatar  avatar Ben Oren avatar Matt avatar Antoin avatar  avatar Alex Griffith avatar  avatar Amanda D'Avria avatar  avatar Ahmed avatar Nicole Kroese  avatar Kaeland Chatman avatar Lisa Jiang 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.