diff --git a/challenges/02-javascript-algorithms-and-data-structures/es6.json b/challenges/02-javascript-algorithms-and-data-structures/es6.json index 2de7d32bf2..115b21203c 100644 --- a/challenges/02-javascript-algorithms-and-data-structures/es6.json +++ b/challenges/02-javascript-algorithms-and-data-structures/es6.json @@ -538,45 +538,33 @@ }, { "id": "587d7b8a367417b2b2512b4e", - "title": "Interpolate a String Using Backquotes", + "title": "Create Strings using Template Literals", "description": [ - "A new feature of ES6 or ES2015, is that it allows you to use string interpolation with back-ticks.", - "Consider the code below", - "const text = 'Hello World';", - "// string interpolation", - "const divText = `", - "
", - " ${text}", - "
", - "console.log(divText); // prints ", - "//
", - "// Hello World", - "//
", - "A lot of thing happened in there.", - "First, the ${variable} syntax. It's a template literal. Basically, you won't have to use concatenation with + anymore. Just drop the variable in your string, wrapped with ${ and }.", - "Second, we used backticks, not quotes, to wrap around the string. Notice that the string is multi-line.", - "In ES6, back-ticks give you more robust string creation ability.", - "Instructions", - "Use proper template literal syntax with backticks.", - "The expected output is each entry of result object's failure array, wrapped inside an
  • element, with class attribute text-warning.", - "If you have trouble finding backticks, it's the ` key, to the left of your 1; and has ~ on it." + "A new feature of ES6 is the template literal. This is a special type of string that allows you to use string interpolation features to create strings.", + "Consider the code below:", + "
    const person = {
    name: \"Zodiac Hasbro\",
    age: 56
    };

    // string interpolation
    const greeting = `Hello, my name is ${person.name}!
    I am ${person.age} years old.`;

    console.log(greeting); // prints
    // Hello, my name is Zodiac Hasbro!
    // I am 56 years old.
    ", + "A lot of things happened there.", + "Firstly, the ${variable} syntax used above is a place holder. Basically, you won't have to use concatenation with the + operator anymore. To add variables to strings, you just drop the variable in a template string and wrap it with ${ and }.", + "Secondly, the example uses backticks (`), not quotes (' or \"), to wrap the string. Notice that the string is multi-line.", + "This new way of creating strings gives you more flexibility to create robust strings.", + "
    ", + "Use template literal syntax with backticks to display each entry of the result object's failure array. Each entry should be wrapped inside an li element with the class attribute text-warning." ], "challengeSeed": [ "const result = {", - " success: ['max_length', 'no-amd', 'prefer-arrow-functions'],", - " failure: ['no-var', 'var-on-top', 'linebreak'],", - " skipped: ['id-blacklist', 'no-dup-keys']", - "}", - "/* Alter code below this line */", - "const resultDisplay = undefined;", - "/* Alter code above this line */", + " success: [\"max-length\", \"no-amd\", \"prefer-arrow-functions\"],", + " failure: [\"no-var\", \"var-on-top\", \"linebreak\"],", + " skipped: [\"id-blacklist\", \"no-dup-keys\"]", + "};", + "// change code below this line", + "const resultDisplay = null;", + "// change code above this line", "console.log(resultDisplay);", "/**", - " * ", " * should look like this", " *
  • no-var
    • ", - " *
  • var-on-top
    • ", - " *
  • linebreak
    • ", + " *
  • var-on-top
    • ", + " *
  • linebreak
    • ", " **/" ], "tests": [ @@ -593,32 +581,27 @@ "id": "587d7b8a367417b2b2512b4f", "title": "Write Concise Object Literal Declarations Using Simple Fields", "description": [ - "ES6 adds some nice support for removing boiler-plate from object literals declaration.", - "Consider the following:", - "const getMousePosition = (x, y) => {", - " return {", - " x: x,", - " y: y", - " } ", - "}", - "It's a simple function that returns an object, which has two fields.", - "ES6 provides a syntactic sugar to remove the redundancy from having to write x: x. You can simply write x once, and it would convert that to x : x (or some equivalent of it) under the hood.", - "The code now becomes:", - "const getMousePosition = (x, y) => ({x, y})", - "Instructions", - "Use object literal simplification to create and return a Person object" + "ES6 adds some nice support for easily definining object literals.", + "Consider the following code:", + "
    const getMousePosition = (x, y) => ({
    x: x,
    y: y
    });
    ", + "getMousePosition is a simple function that returns an object containing two fields.", + "ES6 provides the syntactic sugar to eliminate the redundancy of having to write x: x. You can simply write x once, and it will be converted tox: x (or something equivalent) under the hood.", + "Here is the same function from above rewritten to use this new syntax:", + "
    const getMousePosition = (x, y) => ({ x, y });
    ", + "
    ", + "Use simple fields with object literals to create and return a Person object." ], "challengeSeed": [ - "/* Alter code below this line */", + "// change code below this line", "const createPerson = (name, age, gender) => {", - " return {", - " name: name,", - " age: age,", - " gender: gender", - " }", - "}", - "/* Alter code above this line */", - "console.log(createPerson('Zodiac Hasbro', 56, 'male')); // returns a proper object" + " return {", + " name: name,", + " age: age,", + " gender: gender", + " };", + "};", + "// change code above this line", + "console.log(createPerson(\"Zodiac Hasbro\", 56, \"male\")); // returns a proper object" ], "tests": [ "// Test the output is {name: \"Zodiac Hasbro\", age: 56, gender: \"male\"}", @@ -633,29 +616,24 @@ "id": "587d7b8b367417b2b2512b50", "title": "Write Concise Declarative Functions with ES6", "description": [ - "With ES6, it's possible to remove the keyword function as follows, from object literals:", - "
    const Container extends Component {
      render: function() {
        return {
          Container
        }
      }
    }
    ", - "We can remove the function keyword and colon (:) altogether - and get this:", - "
    const Container extends Component {
      render() {
        return {
          Container
        }
      }
    }
    ", - "Instructions", - "Use object literal simplification to create and return a Person object" + "When defining functions within objects in ES5, we have to use the keyword function as follows:", + "
    const person = {
    name: \"Taylor\",
    sayHello: function() {
    return `Hello! My name is ${this.name}.`;
    }
    };
    ", + "With ES6, You can remove the function keyword and colon altogether when defining functions in objects. Here's an example of this syntax:", + "
    const person = {
    name: \"Taylor\",
    sayHello() {
    return `Hello! My name is ${this.name}.`;
    }
    };
    ", + "
    ", + "Refactor the function setGear inside the object bicycle to use the shorthand syntax described above." ], "challengeSeed": [ - "/* Alter code below this line */", - "const Person = (name, age, gender) => {", - " return {", - " name: name,", - " age: age,", - " gender: gender,", - " sendFriendRequest: function(person){", - " console.log(`Sending request to ${person.name}`);", - " }", - " }", - "}", - "/* Alter code above this line */", - "const zod = Person(\"Zodiac Hasbro\", 56, 'male');", - "const yan = Person(\"Yanoshi Mimoto\", 55, 'male');", - "zod.sendFriendRequest(yan);" + "// 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);" ], "tests": [ "// Test the output is Sending request to Yanoshi Mimoto",