2018-09-30 23:01:58 +01:00 
										
									 
								 
							 
							
								
							 
							
								 
							
							
								---
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								id: 587d7b8b367417b2b2512b53
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								title: Use class Syntax to Define a Constructor Function
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								challengeType: 1
							 
						 
					
						
							
								
									
										
										
										
											2019-08-05 09:17:33 -07:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
							
								forumTopicId: 301212
							 
						 
					
						
							
								
									
										
										
										
											2018-09-30 23:01:58 +01:00 
										
									 
								 
							 
							
								
							 
							
								 
							
							
								---
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								## Description
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								< section  id = 'description' >  
						 
					
						
							
								
									
										
										
										
											2019-11-24 21:38:30 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
							
								ES6 provides a new syntax to create objects, using the < dfn > class< / dfn >  keyword.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								It should be noted that the < code > class< / code >  syntax is just syntax, and not a full-fledged class-based implementation of an object-oriented paradigm, unlike in languages such as Java, Python, Ruby, etc.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								In ES5, we usually define a constructor function and use the < code > new< / code >  keyword to instantiate an object.
							 
						 
					
						
							
								
									
										
										
										
											2019-05-17 06:20:30 -07:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								```js
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								var SpaceShuttle = function(targetPlanet){
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								  this.targetPlanet = targetPlanet;
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								}
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								var zeus = new SpaceShuttle('Jupiter');
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								```
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-11-24 21:38:30 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
							
								The < code > class< / code >  syntax simply replaces the constructor function creation:
							 
						 
					
						
							
								
									
										
										
										
											2019-05-17 06:20:30 -07:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								```js
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								class SpaceShuttle {
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								  constructor(targetPlanet) {
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								    this.targetPlanet = targetPlanet;
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								  }
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								}
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								const zeus = new SpaceShuttle('Jupiter');
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								```
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-11-24 21:38:30 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
							
								It should be noted that the < code > class< / code >  keyword declares a new function, to which a constructor is added. This constructor is invoked when < code > new< / code >  is called to create a new object.< br > 
							 
						 
					
						
							
								
									
										
										
										
											2019-03-26 12:53:19 -04:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
							
								< strong > Notes:< / strong > < br > < ul >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								< li >  UpperCamelCase should be used by convention for ES6 class names, as in < code > SpaceShuttle< / code >  used above.< / li >  
						 
					
						
							
								
									
										
										
										
											2019-03-28 09:35:41 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
							
								< li >  The constructor method is a special method for creating and initializing an object created with a class. You will learn more about it in the Object Oriented Programming section of the JavaScript Algorithms And Data Structures Certification.< / li > < / ul >  
						 
					
						
							
								
									
										
										
										
											2018-09-30 23:01:58 +01:00 
										
									 
								 
							 
							
								
							 
							
								 
							
							
								< / section >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								## Instructions
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								< section  id = 'instructions' >  
						 
					
						
							
								
									
										
										
										
											2019-11-24 21:38:30 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
							
								Use the < code > class< / code >  keyword and write a constructor to create the < code > Vegetable< / code >  class.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								The < code > Vegetable< / code >  class allows you to create a vegetable object with a property < code > name< / code >  that gets passed to the constructor.
							 
						 
					
						
							
								
									
										
										
										
											2018-09-30 23:01:58 +01:00 
										
									 
								 
							 
							
								
							 
							
								 
							
							
								< / section >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								## Tests
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								< section  id = 'tests' >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								```yml
							 
						 
					
						
							
								
									
										
										
										
											2018-10-04 14:37:37 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
							
								tests:
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								  -  text: < code > Vegetable</ code >  should be a < code > class</ code >  with a defined < code > constructor</ code >  method.
							 
						 
					
						
							
								
									
										
										
										
											2019-03-25 19:49:34 +05:30 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
							
								    testString: assert(typeof Vegetable === 'function' & &  typeof Vegetable.constructor === 'function');
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								  -  text: < code > class</ code >  keyword should be used.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								    testString: assert(code.match(/class/g));
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								  -  text: < code > Vegetable</ code >  should be able to be instantiated.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								    testString: assert(() => {const a = new Vegetable("apple"); return typeof a === 'object';});
							 
						 
					
						
							
								
									
										
										
										
											2018-10-04 14:37:37 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
							
								  -  text: < code > carrot.name</ code >  should return < code > carrot</ code > .
							 
						 
					
						
							
								
									
										
										
										
											2019-03-25 19:49:34 +05:30 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
							
								    testString: assert(carrot.name=='carrot');
							 
						 
					
						
							
								
									
										
										
										
											2018-09-30 23:01:58 +01:00 
										
									 
								 
							 
							
								
							 
							
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								```
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								< / section >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								## Challenge Seed
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								< section  id = 'challengeSeed' >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								< div  id = 'js-seed' >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								```js
							 
						 
					
						
							
								
									
										
										
										
											2020-03-04 13:08:54 -06:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
							
								// Only change code below this line
							 
						 
					
						
							
								
									
										
										
										
											2019-03-25 19:49:34 +05:30 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2020-03-04 13:08:54 -06:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
							
								// Only change code above this line
							 
						 
					
						
							
								
									
										
										
										
											2018-09-30 23:01:58 +01:00 
										
									 
								 
							 
							
								
							 
							
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								const carrot = new Vegetable('carrot');
							 
						 
					
						
							
								
									
										
										
										
											2020-03-04 13:08:54 -06:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
							
								console.log(carrot.name); // Should display 'carrot'
							 
						 
					
						
							
								
									
										
										
										
											2018-09-30 23:01:58 +01:00 
										
									 
								 
							 
							
								
							 
							
								 
							
							
								```
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								< / div >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								< / section >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								## Solution
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								< section  id = 'solution' >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								```js
							 
						 
					
						
							
								
									
										
										
										
											2019-03-25 19:49:34 +05:30 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
							
								class Vegetable {
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								  constructor(name) {
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								    this.name = name;
							 
						 
					
						
							
								
									
										
										
										
											2019-01-24 20:36:57 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
							
								  }
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								}
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
							
								const carrot = new Vegetable('carrot');
							 
						 
					
						
							
								
									
										
										
										
											2018-09-30 23:01:58 +01:00 
										
									 
								 
							 
							
								
							 
							
								 
							
							
								```
							 
						 
					
						
							
								
									
										
										
										
											2019-07-18 08:24:12 -07:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-09-30 23:01:58 +01:00 
										
									 
								 
							 
							
								
							 
							
								 
							
							
								< / section >