Are you getting ready for an interview, or do you have a test next week?Lucky for you, I will show you the ins and outs of ES6 classes, right after this blueprint analogy!

A blueprint is a set of instructions on how to build something; that something could be anything, ranging from a chair to a house.

In JavaScript, blueprints are classes. Classes are used for creating objects with different properties.

For example, let’s say that we wish to build custom trees for Steve and Erica. The properties that you allow Steve and Erica to customize are the following:

• Size of the bush
• Color of the bush
• Size of the trunk
• Color of the trunk

Steve wants a tree with a black trunk and a green bush. Steve would also like his tree to have a bigger bush and trunk.

Similarly, Erica wants a tree with a blue trunk and a red bush.

Therefore, the class that you would use to build Ericas and Steves trees would look a little something like this:

class Tree {
    constructor(bushSize, bushColor, trunkSize, trunkColor) {
        this.bushSize = bushSize;
        this.bushColor = bushColor;
        this.trunkSize = trunkSize,
        this.trunkColor = trunkColor;
    }
}

const ericaTree = new Tree('1 ft^3', 'red', '1 ft', 'blue');
const stevesTree = new Tree('3 ft^3', 'green', '3 ft', 'black');

console.log(ericaTree);   // Tree {bushSize: '1 ft^3', bushColor: 'red', trunkSize: '1 ft',trunkColor: 'blue'}
console.log(stevesTree);  // Tree {bushSize: '3 ft^3', bushColor: 'green', trunkSize: '3 ft',trunkColor: 'black'}

The diagram below illustrates how the class Tree works:

Don’t worry if you are feeling a bit confused as a result of this example, you are not alone! We have a lot of examples up ahead that should help you master ES6 classes.

Let’s get right into it!

#es6 #javascript #developer