ES6 (ex. 13 to 29)

+ Finished ES6 module

Author: hgonzaga

02-es6/13-use-destructuring-assignment-with-the-rest-parameter-to-reassign-array-elements.js

@@ -0,0 +1,20 @@
+/*
+Use Destructuring Assignment with the Rest Parameter to Reassign Array Elements:
+Use destructuring assignment with the rest parameter to perform an effective Array.prototype.slice() so that arr is a
+sub-array of the original array source with the first two elements omitted.
+
+- arr should be [3,4,5,6,7,8,9,10]
+- source should be [1,2,3,4,5,6,7,8,9,10]
+- Array.slice() should not be used.
+- Destructuring on list should be used.
+ */
+const source = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+
+function removeFirstTwo(list) {
+    // Only changed code below this line
+    const [first, second, ...arr] = list;
+    // Only changed code above this line
+    return arr;
+}
+
+const arr = removeFirstTwo(source);

02-es6/14-use-destructuring-assignment-to-pass-an-object-as-function-parameters.js

@@ -0,0 +1,21 @@
+/*
+Use Destructuring Assignment to Pass an Object as a Function's Parameters:
+Use destructuring assignment within the argument to the function half to send only max and min inside the function.
+
+- stats should be an object.
+- half(stats) should be 28.015
+- Destructuring should be used.
+- Destructured parameter should be used.
+ */
+const stats = {
+    max: 56.78,
+    standard_deviation: 4.34,
+    median: 34.54,
+    mode: 23.87,
+    min: -0.75,
+    average: 35.85
+};
+
+// Only changed code below this line
+const half = ({max, min}) => (max + min) / 2.0;
+// Only changed code above this line

02-es6/15-create-strings-using-template-literals.js

@@ -0,0 +1,33 @@
+/*
+Create Strings using Template Literals:
+Use template literal syntax with backticks to create an array of list element (li) strings.
+Each list element's text should be one of the array elements from the failure property on the result object and have a
+class attribute with the value text-warning.
+The makeList function should return the array of list item strings.
+Use an iterator method (any kind of loop) to get the desired output (shown below).
+
+[
+  '<li class="text-warning">no-var</li>',
+  '<li class="text-warning">var-on-top</li>',
+  '<li class="text-warning">linebreak</li>'
+]
+
+- failuresList should be an array containing result failure messages.
+- failuresList should be equal to the specified output.
+- Template strings and expression interpolation should be used.
+- An iterator should be used.
+ */
+const result = {
+    success: ["max-length", "no-amd", "prefer-arrow-functions"],
+    failure: ["no-var", "var-on-top", "linebreak"],
+    skipped: ["no-extra-semi", "no-dup-keys"]
+};
+
+function makeList(arr) {
+    // Only changed code below this line
+    const failureItems = arr.map(value => `<li class="text-warning">${value}</li>`);
+    // Only changed code above this line
+    return failureItems;
+}
+
+const failuresList = makeList(result.failure);

02-es6/16-write-concise-object-literal-declarations-using-object-property-shorthand.js

@@ -0,0 +1,12 @@
+/*
+Write Concise Object Literal Declarations Using Object Property Shorthand:
+Use object property shorthand with object literals to create and return an object with name, age and gender properties.
+
+- createPerson("Zodiac Hasbro", 56, "male") should return {name: "Zodiac Hasbro", age: 56, gender: "male"}.
+- Your code should not use key:value.
+ */
+const createPerson = (name, age, gender) => {
+    // Only changed code below this line
+    return ({name, age, gender});
+    // Only changed code above this line
+};

02-es6/17-write-concise-declarative-functions-with-es6.js

@@ -0,0 +1,19 @@
+/*
+Write Concise Declarative Functions with ES6:
+Refactor the function setGear inside the object bicycle to use the shorthand syntax described above.
+
+- Traditional function expression should not be used.
+- setGear should be a declarative function.
+- bicycle.setGear(48) should change the gear value to 48.
+*/
+// Only changed code below this line
+const bicycle = {
+        gear: 2,
+        setGear(newGear) {
+            this.gear = newGear;
+        }
+    }
+;
+// Only changed code above this line
+bicycle.setGear(3);
+console.log(bicycle.gear);

02-es6/18-use-class-syntax-to-define-a-constructor-function.js

@@ -0,0 +1,22 @@
+/*
+Use class Syntax to Define a Constructor Function:
+Use the class keyword and write a constructor to create the Vegetable class.
+The Vegetable class allows you to create a vegetable object with a property name that gets passed to the constructor.
+
+- Vegetable should be a class with a defined constructor method.
+- The class keyword should be used.
+- Vegetable should be able to be instantiated.
+- carrot.name should return carrot.
+ */
+
+// Only changed code below this line
+class Vegetable {
+    constructor(name) {
+        this.name = name;
+    }
+}
+
+// Only changed code above this line
+
+const carrot = new Vegetable('carrot');
+console.log(carrot.name); // Should display 'carrot'

02-es6/19-use-getters-and-setters-to-control-access-to-an-object.js

@@ -0,0 +1,46 @@
+/*
+Use getters and setters to Control Access to an Object:
+Use the class keyword to create a Thermostat class. The constructor accepts a Fahrenheit temperature.
+In the class, create a getter to obtain the temperature in Celsius and a setter to set the temperature in Celsius.
+Remember that C = 5/9 * (F - 32) and F = C * 9.0 / 5 + 32, where F is the value of temperature in Fahrenheit, and C
+isthe value of the same temperature in Celsius.
+
+Note: When you implement this, you will track the temperature inside the class in one scale, either Fahrenheit or Celsius.
+
+This is the power of a getter and a setter. You are creating an API for another user, who can get the correct result
+regardless of which one you track.
+In other words, you are abstracting implementation details from the user.
+
+- Thermostat should be a class with a defined constructor method.
+- class keyword should be used.
+- Thermostat should be able to be instantiated.
+- When instantiated with a Fahrenheit value, Thermostat should set the correct temperature.
+- A getter should be defined.
+- A setter should be defined.
+- Calling the setter with a Celsius value should set the temperature.
+ */
+
+// Only change coded below this line
+class Thermostat {
+    constructor(temperature) {
+        this._temperature = temperature;
+    }
+
+    get temperature() {
+        return 5 / 9 * (this._temperature - 32);
+    }
+
+    set temperature(temperature) {
+        this._temperature = temperature * 9.0 / 5 + 32;
+    }
+}
+
+// Only change coded above this line
+
+const thermos = new Thermostat(76); // Setting in Fahrenheit scale
+let temp = thermos.temperature; // 24.44 in Celsius
+console.log(temp);
+thermos.temperature = 26;
+console.log(thermos);
+temp = thermos.temperature; // 26 in Celsius
+console.log(temp);

02-es6/20-create-a-module-script.html

@@ -0,0 +1,15 @@
+<!--
+Create a Module Script:
+Add a script to the HTML document of type module and give it the source file of index.js
+
+- You should create a script tag.
+- Your script tag should have the type attribute with a value of module.
+- Your script tag should have a src of index.js.
+-->
+<html>
+<body>
+    <!-- Only changed code below this line -->
+    <script type="module" src="index.js"></script>
+    <!-- Only changed code above this line -->
+</body>
+</html>

02-es6/21-use-export-to-share-a-code-block.js

@@ -0,0 +1,16 @@
+/*
+Use export to Share a Code Block:
+There are two string-related functions in the editor. Export both of them using the method of your choice.
+
+- You should properly export uppercaseString.
+- You should properly export lowercaseString.
+ */
+const uppercaseString = (string) => {
+    return string.toUpperCase();
+}
+
+const lowercaseString = (string) => {
+    return string.toLowerCase()
+}
+
+export {uppercaseString, lowercaseString};

02-es6/22-reuse-js-code-using-import.js

@@ -0,0 +1,15 @@
+/*
+Reuse JavaScript Code Using import:
+Add the appropriate import statement that will allow the current file to use the uppercaseString and lowercaseString
+functions you exported in the previous lesson. These functions are in a file called string_functions.js, which is in
+the same directory as the current file.
+
+- You should properly import uppercaseString.
+- You should properly import lowercaseString.
+ */
+
+import {lowercaseString, uppercaseString} from "./21-use-export-to-share-a-code-block";
+// Only change coded above this line
+
+uppercaseString("hello");
+lowercaseString("WORLD!");