greatbody
/
freeCodeCamp
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #12963 from robbawebba/fix/beta-arrow-functions-tests 

Reformat ES6 arrow function challenges
pull/13066/head
mrugesh mohapatra 2017-02-02 12:04:09 +05:30 committed by GitHub
parent 4db24a8e7d c3cd614890
commit 0b9c939782
1 changed files with 31 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
seed/challenges/02-javascript-algorithms-and-data-structures/es6.json
View File

@ -11,7 +11,7 @@
[ [
"", "",
"", "",
"ECMAScript is a standardized version of JavaScript with the goal of unifying the language's specifications and features. As all major browsers and JavaScript-runtimes follow this specification, the term <i>ECMAScript</i> is interchangeable with the term <i>JavaScript</i>.<br><br>Most of the challenges on Free Code Camp use the ECMAScript 5 (ES5) specification of the language, finalized in 2009. But JavaScript is an evolving programming language. As features are added and revisions are made, new versions of the language are released for use by developers.<br><br>The most recent standardized version is called ECMAScript 6 (ES6), released in 2015. This new version of the language adds some powerful features that will be covered in this section of challenges, including:<br><br><ul><li>Arrow functions</li><li>Classes</li><li>Modules</li><li>Promises</li><li>Generators</li><li><code>let</code> and <code>const</code></li></ul><br><br><strong>Note</strong><br>Not all browsers support ES6 features. If you use ES6 in your own projects, you may need to use a program (transpiler) to convert your ES6 code into ES5 until browsers support ES6.", "ECMAScript is a standardized version of JavaScript with the goal of unifying the language's specifications and features. As all major browsers and JavaScript-runtimes follow this specification, the term <i>ECMAScript</i> is interchangeable with the term <i>JavaScript</i>.<br><br>Most of the challenges on freeCodeCamp use the ECMAScript 5 (ES5) specification of the language, finalized in 2009. But JavaScript is an evolving programming language. As features are added and revisions are made, new versions of the language are released for use by developers.<br><br>The most recent standardized version is called ECMAScript 6 (ES6), released in 2015. This new version of the language adds some powerful features that will be covered in this section of challenges, including:<br><br><ul><li>Arrow functions</li><li>Classes</li><li>Modules</li><li>Promises</li><li>Generators</li><li><code>let</code> and <code>const</code></li></ul><br><br><strong>Note</strong><br>Not all browsers support ES6 features. If you use ES6 in your own projects, you may need to use a program (transpiler) to convert your ES6 code into ES5 until browsers support ES6.",
"" ""
] ]
], ],
@ -176,25 +176,18 @@
}, },
{ {
"id": "587d7b87367417b2b2512b43", "id": "587d7b87367417b2b2512b43",
"title": "Arrow functions", "title": "Write Arrow Functions",
"description": [ "description": [
"In JS, we often, we often don't name our functions. Callback functions, for example.", "In JavaScript, we often don't need to name our functions, especially when passing a function as an argument to another function. Instead, we create inline functions. We don't need to name these functions because we do not reuse them anywhere else.",
"Because we often create function just to pass it as argument to some other function, and we might not need to reuse this function anywhere.", "To achieve this, we often use the following syntax:",
"To achieve this, we often use the boilerplate", "<blockquote>const myFunc = function() {<br> const myVar = \"value\";<br> return myVar;<br>}</blockquote>",
"<code>function(){</code>", "ES6 provides us with the syntactic sugar to not have to write anonymous functions this way. Instead, you can use <strong>arrow function syntax</strong>:",
"<code>// function body</code>", "<blockquote>const myFunc = () => {<br> const myVar = \"value\";<br> return myVar;<br>}</blockquote>",
"<code> return ;</code>", "When there is no function body, and only a return value, arrow function syntax allows you to omit the keyword <code>return</code> as well as the brackets surrounding the code. This helps simplify smaller functions into one-line statements:",
"<code>}</code>", "<blockquote>const myFunc= () => \"value\"</blockquote>",
"ES6 provides you with the syntactic sugar to not having to write this. Instead, you can use arrow function syntax", "This code will still return <code>value</code> by default.",
"<code>() => (</code>", "<hr>",
"<code>// function body</code>", "Rewrite the function assigned to the variable <code>magic</code> which returns a new <code>Date()</code> to use arrow function syntax. Also make sure nothing is defined using the keyword <code>var</code>.",
"<code>return ;</code>",
"<code>)</code>",
"When there is no function body, and only a return value, you can write that as a one-liner:",
"<code>() => (/* return value */)</code>",
"You don't have to write the keyword return here. You can even omit the paranthesis after =>",
"Instructions.",
"Refactor the function which returns the new Date(), to use arrow function syntax. Also make sure var is not there in the code anymore.",
"Note", "Note",
"Don't forget to use strict mode." "Don't forget to use strict mode."
], ],
@ -221,20 +214,20 @@
}, },
{ {
"id": "587d7b88367417b2b2512b44", "id": "587d7b88367417b2b2512b44",
"title": "Arrow functions with input parameters", "title": "Write Arrow Functions with Parameters",
"description": [ "description": [
"Just like a normal function, you can pass input parameters into arrow functions.", "Just like a normal function, you can pass arguments into arrow functions.",
"<code>const doubler = (item) => item * 2; // doubles input value and returns it</code>", "<blockquote>// doubles input value and returns it<br>const doubler = (item) => item * 2;</blockquote>",
"You can pass more than one parameter as well", "You can pass more than one argument into arrow functions as well.",
"Instructions.", "<hr>",
"Write the myConcat function that appends content of the second array, passed as argument arr2 to the first array, passed as arr1.", "Rewrite the <code>myConcat</code> function which appends contents of <code>arr2</code> to <code>arr1</code> so that the function uses arrow function syntax.",
"Note", "Note",
"Don't forget to use strict mode." "Don't forget to use strict mode."
], ],
"challengeSeed": [ "challengeSeed": [
"// change code below this line", "// change code below this line",
"var myConcat = function(arr1, arr2) {", "var myConcat = function(arr1, arr2) {",
" return arr1.concat(arr2)", " return arr1.concat(arr2);",
"}", "}",
"// change code above this line", "// change code above this line",
"// test your code", "// test your code",
@ -254,33 +247,25 @@
}, },
{ {
"id": "587d7b88367417b2b2512b45", "id": "587d7b88367417b2b2512b45",
"title": "Arrow functions with higher order functions", "title": "Write Arrow Functions with Higher Order Functions",
"description": [ "description": [
"It's time we see in action how easily arrow function let us write complex data processing code", "It's time we see how powerful arrow functions are when processing data.",
"It mixes really well with higher order functions, such as map(), filter(), reduce() etc., that takes other functions as inputs for processing collections.", "Arrow functions work really well with higher order functions, such as <code>map()</code>, <code>filter()</code>, and <code>reduce()</code>, that take other functions as arguments for processing collections of data.",
"Read the following code:", "Read the following code:",
"<code>FBPosts.</code>", "<blockquote>FBPosts.filter(function(post) {<br> return post.thumbnail !== null && post.shares > 100 && post.likes > 500;<br>})</blockquote>",
"<code>.filter(function(post){</code>", "We have written this with <code>filter()</code> to at least make it somewhat readable. Now compare it to the following code which uses arrow function syntax instead:",
"<code> return post.thumbnail !== null && post.shares > 100 && post.likes > 500</code>", "<blockquote>FBPosts.filter((post) => post.thumbnail !== null && post.shares > 100 && post.likes > 500)</blockquote>",
"<code>})</code>", "This code is more succinct and accomplishes the same task with fewer lines of code.",
"<code>.reduce(function(acc, current){</code>", "<hr>",
"<code> return acc + '<img alt=\"' + current.text + '\">' + current.thumbnail + '</img>'</code>", "Use arrow function syntax to compute the square of only the positive integers (fractions are not integers) in the array <code>realNumberArray</code> and store the new array in the variable <code>squaredIntegers</code>.",
"<code>})</code>",
"We have written this with filter() and reduce() to at least make it somewhat readable. Now compare the version with arrow functions",
"<code>FBPosts</code>",
"<code> .filter((post) => post.thumbnail !== null && post.shares > 100 && post.likes > 500)</code>",
"<code> .reduce((acc, current) => (acc + '<img alt=\"' + current.text + '\">' + current.thumbnail + '</img>'))</code>",
"This code is more succinct and keeps only the parts of the code where the real processing happen.",
"Instructions.",
"Use arrow function syntax to compute square of only the positive integers (fractions are not integers) in the array and return the array.",
"Note", "Note",
"Don't forget to use strict mode." "Don't forget to use strict mode."
], ],
"challengeSeed": [ "challengeSeed": [
"const realNumberArray = [4, 5.6, -9.8, 3.14, 42, 6, 8.34]", "const realNumberArray = [4, 5.6, -9.8, 3.14, 42, 6, 8.34];",
"// change code below this line", "// change code below this line",
"var squaredIntegers = realNumberArray", "var squaredIntegers = realNumberArray;",
"// change bcode above this line", "// change code above this line",
"// test your code", "// test your code",
"console.log(squaredIntegers);" "console.log(squaredIntegers);"
], ],