| 
									
										
										
										
											2018-09-30 23:01:58 +01:00
										 |  |  | --- | 
					
						
							|  |  |  | id: 587d7b8b367417b2b2512b50 | 
					
						
							|  |  |  | title: Write Concise Declarative Functions with ES6 | 
					
						
							|  |  |  | challengeType: 1 | 
					
						
							| 
									
										
										
										
											2019-08-05 09:17:33 -07:00
										 |  |  | forumTopicId: 301224 | 
					
						
							| 
									
										
										
										
											2018-09-30 23:01:58 +01:00
										 |  |  | --- | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ## Description
 | 
					
						
							|  |  |  | <section id='description'> | 
					
						
							|  |  |  | When defining functions within objects in ES5, we have to use the keyword <code>function</code> as follows: | 
					
						
							| 
									
										
										
										
											2019-05-17 06:20:30 -07:00
										 |  |  | 
 | 
					
						
							|  |  |  | ```js | 
					
						
							|  |  |  | const person = { | 
					
						
							|  |  |  |   name: "Taylor", | 
					
						
							|  |  |  |   sayHello: function() { | 
					
						
							|  |  |  |     return `Hello! My name is ${this.name}.`; | 
					
						
							|  |  |  |   } | 
					
						
							|  |  |  | }; | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2018-09-30 23:01:58 +01:00
										 |  |  | With ES6, You can remove the <code>function</code> keyword and colon altogether when defining functions in objects. Here's an example of this syntax: | 
					
						
							| 
									
										
										
										
											2019-05-17 06:20:30 -07:00
										 |  |  | 
 | 
					
						
							|  |  |  | ```js | 
					
						
							|  |  |  | const person = { | 
					
						
							|  |  |  |   name: "Taylor", | 
					
						
							|  |  |  |   sayHello() { | 
					
						
							|  |  |  |     return `Hello! My name is ${this.name}.`; | 
					
						
							|  |  |  |   } | 
					
						
							|  |  |  | }; | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2018-09-30 23:01:58 +01:00
										 |  |  | </section> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ## Instructions
 | 
					
						
							|  |  |  | <section id='instructions'> | 
					
						
							|  |  |  | Refactor the function <code>setGear</code> inside the object <code>bicycle</code> to use the shorthand syntax described above. | 
					
						
							|  |  |  | </section> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ## Tests
 | 
					
						
							|  |  |  | <section id='tests'> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ```yml | 
					
						
							| 
									
										
										
										
											2018-10-04 14:37:37 +01:00
										 |  |  | tests: | 
					
						
							| 
									
										
										
										
											2019-03-06 23:30:58 +00:00
										 |  |  |   - text: Traditional function expression should not be used. | 
					
						
							| 
									
										
										
										
											2019-04-30 17:26:07 -07:00
										 |  |  |     testString: getUserInput => assert(!removeJSComments(code).match(/function/)); | 
					
						
							| 
									
										
										
										
											2019-03-06 23:30:58 +00:00
										 |  |  |   - text: <code>setGear</code> should be a declarative function. | 
					
						
							| 
									
										
										
										
											2019-04-30 17:26:07 -07:00
										 |  |  |     testString: assert(typeof bicycle.setGear === 'function' && code.match(/setGear\s*\(.+\)\s*\{/)); | 
					
						
							| 
									
										
										
										
											2019-03-06 23:30:58 +00:00
										 |  |  |   - text: <code>bicycle.setGear(48)</code> should change the <code>gear</code> value to 48. | 
					
						
							|  |  |  |     testString: assert((new bicycle.setGear(48)).gear === 48); | 
					
						
							| 
									
										
										
										
											2018-09-30 23:01:58 +01:00
										 |  |  | 
 | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | </section> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ## Challenge Seed
 | 
					
						
							|  |  |  | <section id='challengeSeed'> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | <div id='js-seed'> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ```js | 
					
						
							|  |  |  | // change code below this line | 
					
						
							|  |  |  | const bicycle = { | 
					
						
							|  |  |  |   gear: 2, | 
					
						
							|  |  |  |   setGear: function(newGear) { | 
					
						
							|  |  |  |     this.gear = newGear; | 
					
						
							|  |  |  |   } | 
					
						
							|  |  |  | }; | 
					
						
							|  |  |  | // change code above this line | 
					
						
							|  |  |  | bicycle.setGear(3); | 
					
						
							|  |  |  | console.log(bicycle.gear); | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | </div> | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2019-04-30 17:26:07 -07:00
										 |  |  | ### After Test
 | 
					
						
							|  |  |  | <div id='js-teardown'> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ```js | 
					
						
							|  |  |  | const removeJSComments = str => str.replace(/\/\*[\s\S]*?\*\/|\/\/.*$/gm, ''); | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | </div> | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2018-09-30 23:01:58 +01:00
										 |  |  | </section> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ## Solution
 | 
					
						
							|  |  |  | <section id='solution'> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ```js | 
					
						
							| 
									
										
										
										
											2019-02-13 22:11:56 +03:00
										 |  |  | const bicycle = { | 
					
						
							|  |  |  |   gear: 2, | 
					
						
							|  |  |  |   setGear(newGear) { | 
					
						
							|  |  |  |     this.gear = newGear; | 
					
						
							|  |  |  |   } | 
					
						
							|  |  |  | }; | 
					
						
							|  |  |  | bicycle.setGear(3); | 
					
						
							| 
									
										
										
										
											2018-09-30 23:01:58 +01:00
										 |  |  | ``` | 
					
						
							| 
									
										
										
										
											2019-02-13 22:11:56 +03:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2018-09-30 23:01:58 +01:00
										 |  |  | </section> |