{
"name": "ES6",
"order": 2,
"time": "5 hours",
"helpRoom": "Help",
"challenges": [
{
"id": "587d7b86367417b2b2512b3e",
"title": "Introduction to the ES6 Challenges",
"description": [
[
"",
"",
"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 ECMAScript is interchangeable with the term JavaScript.
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.
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:
let
and const
var
keyword is that you can overwrite variable declarations without an error.",
"var camper = 'James';", "As you can see in the code above, the
var camper = 'David';
console.log(camper);
// logs 'David'
camper
variable is originally declared as James
and then overridden to be David
.",
"In a small application, you might not run into this type of problem, but when your code becomes larger, you might accidently overwrite a variable that you did not intend to overwrite.",
"Because this behavior does not throw an error, searching and fixing bugs becomes more difficult.let
was introduced in ES6 to solve this potential issue with the var
keyword.",
"If you were to replace var
with let
in the variable declarations of the code above, the result would be an error.",
"let camper = 'James';", "This error can be seen in the console of your browser.", "So unlike
let camper = 'David'; // throws an error
var
, when using let
, a variable with the same name can only be declared once.",
"let
keyword.",
"Notelet
prevents variables from being overridden, you will need to remove one of the declarations entirely."
],
"challengeSeed": [
"var catName;",
"var quote;",
"function catTalk() {",
" \"use strict\";",
"",
" catName = \"Oliver\";",
" quote = catName + \" says Meow!\";",
"",
"}",
"catTalk();"
],
"tests": [
"getUserInput => assert(!getUserInput('index').match(/var/g),'message: var
does not exist in code.');",
"assert(catName === \"Oliver\", 'message: catName
should be Oliver
.');",
"assert(quote === \"Oliver says Meow!\", 'message: quote
should be \"Oliver says Meow!\"
');"
],
"type": "waypoint",
"releasedOn": "Feb 17, 2017",
"challengeType": 1,
"translations": {}
},
{
"id": "587d7b87367417b2b2512b40",
"title": "Compare Scopes of the var and let Keywords",
"description": [
"When you declare a variable with the var
keyword, it is declared globally, or locally if declared inside a function.",
"The let
keyword behaves similarly, but with some extra features. When you declare a variable with the let
keyword inside a block, statement, or expression, its scope is limited to that block, statement, or expression.",
"For example:",
"var numArray = [];", "With the
for (var i = 0; i < 3; i++) {
numArray.push(i);
}
console.log(numArray);
// returns [0, 1, 2]
console.log(i);
// returns 3
var
keyword, i
is declared globally. So when i++
is executed, it updates the global variable. This code is similiar to the following:",
"var numArray = [];", "This behavior will cause problems if you were to create a function and store it for later use inside a for loop that uses the
var i;
for (i = 0; i < 3; i++) {
numArray.push(i);
}
console.log(numArray);
// returns [0, 1, 2]
console.log(i);
// returns 3
i
variable. This is because the stored function will always refer to the value of the updated global i
variable.",
"var printNumTwo;", "As you can see,
for (var i = 0; i < 3; i++) {
if(i === 2){
printNumTwo = function() {
return i;
};
}
}
console.log(printNumTwo());
// returns 3
printNumTwo()
prints 3 and not 2. This is because the value assigned to i
was updated and the printNumTwo()
returns the global i
and not the value i
had when the function was created in the for loop. The let
keyword does not follow this behavior:",
"'use strict';", "
let printNumTwo;
for (let i = 0; i < 3; i++) {
if (i === 2) {
printNumTwo = function() {
return i;
};
}
}
console.log(printNumTwo());
// returns 2
console.log(i);
// returns \"i is not defined\"
i
is not defined because it was not declared in the global scope. It is only declared within the for loop statement. printNumTwo()
returned the correct value because three different i
variables with unique values (0, 1, and 2) were created by the let
keyword within the loop statement.",
"i
declared in the if statement is a separate variable than i
declared in the first line of the function. Be certain not to use the var
keyword anywhere in your code.",
"This exercise is designed to illustrate the difference between how var
and let
keywords assign scope to the declared variable. When programming a function similar to the one used in this exercise, it is often better to use different variable names to avoid confusion."
],
"challengeSeed": [
"",
"function checkScope() {",
"\"use strict\";",
" var i = \"function scope\";",
" if (true) {",
" i = \"block scope\";",
" console.log(\"Block scope i is: \", i);",
" }",
" console.log(\"Function scope i is: \", i);",
" return i;",
"}"
],
"tests": [
"getUserInput => assert(!getUserInput('index').match(/var/g),'message: var
does not exist in code.');",
"getUserInput => assert(getUserInput('index').match(/(i\\s*=\\s*).*\\s*.*\\s*.*\\1('|\")block\\s*scope\\2/g), 'message: The variable i
declared in the if statement should equal \"block scope\".');",
"assert(checkScope() === \"function scope\", 'message: checkScope()
should return \"function scope\"');"
],
"type": "waypoint",
"releasedOn": "Feb 17, 2017",
"challengeType": 1,
"translations": {}
},
{
"id": "587d7b87367417b2b2512b41",
"title": "Declare a Read-Only Variable with the const Keyword",
"description": [
"let
is not the only new way to declare variables. In ES6, you can also declare variables using the const
keyword.",
"const
has all the awesome features that let
has, with the added bonus that variables declared using const
are read-only. They are a constant value, which means that once a variable is assigned with const
, it cannot be reassigned.",
"\"use strict\"", "As you can see, trying to reassign a variable declared with
const FAV_PET = \"Cats\";
FAV_PET = \"Dogs\"; // returns error
const
will throw an error. You should always name variables you don't want to reassign using the const
keyword. This helps when you accidentally attempt to reassign a variable that is meant to stay constant. A common practice is to name your constants in all upper-cases and with an underscore to separate words (e.g. EXAMPLE_VARIABLE
).",
"let
or const
. Use let
when you want the variable to change, and const
when you want the variable to remain constant. Also, rename variables declared with const
to conform to common practices, meaning constants should be in all caps"
],
"challengeSeed": [
"function printManyTimes(str) {",
" \"use strict\";",
"",
" // change code below this line",
"",
" var sentence = str + \" is cool!\";",
" for(var i = 0; i < str.length; i+=2) {",
" console.log(str);",
" }",
"",
" // change code above this line",
"",
"}",
"printManyTimes(\"freeCodeCamp\");"
],
"tests": [
"getUserInput => assert(!getUserInput('index').match(/var/g),'message: var
does not exist in code.');",
"getUserInput => assert(getUserInput('index').match(/(const SENTENCE)/g), 'message: SENTENCE
should be a constant variable (by using const
).');",
"getUserInput => assert(getUserInput('index').match(/(let i)/g), 'message: i
should be a variable only defined within the for loop scope (by usinglet
).');"
],
"type": "waypoint",
"releasedOn": "Feb 17, 2017",
"challengeType": 1,
"translations": {}
},
{
"id": "587d7b87367417b2b2512b42",
"title": "Mutate an Array Declared with const",
"description": [
"The const
declaration has many use cases in modern JavaScript.",
"Some developers prefer to assign all their variables using const
by default, unless they know they will need to reassign the value. Only in that case, they use let
.",
"However, it is important to understand that objects (including arrays and functions) assigned to a variable using const
are still mutable. Using the const
declaration only prevents reassignment of the variable identifier.",
"\"use strict\";", "As you can see, you can mutate the object
const s = [5, 6, 7];
s = [1, 2, 3]; // throws error, trying to assign a const
s[2] = 45; // works just as it would with an array declared with var or let
console.log(s); // returns [5, 6, 45]
[5, 6, 7]
itself and the variable s
will still point to the altered array [5, 6, 45]
. Like all arrays, the array elements in s
are mutable, but because const
was used, you cannot use the variable identifier s
to point to a different array using the assignment operator.",
"const s = [5, 7, 2]
. Change the array to [2, 5, 7]
using various element assignment."
],
"challengeSeed": [
"const s = [5, 7, 2];",
"function editInPlace() {",
" \"use strict\";",
" // change code below this line",
"",
" // s = [2, 5, 7]; <- this is invalid",
"",
" // change code above this line",
"}",
"editInPlace();"
],
"tests": [
"getUserInput => assert(getUserInput('index').match(/const/g), 'message: Do not replace const
keyword.');",
"getUserInput => assert(getUserInput('index').match(/const\\s+s/g), 'message: s
should be a constant variable (by using const
).');",
"getUserInput => assert(getUserInput('index').match(/const\\s+s\\s*=\\s*\\[\\s*5\\s*,\\s*7\\s*,\\s*2\\s*\\]\\s*;?/g), 'message: Do not change the original array declaration.');",
"assert.deepEqual(s, [2, 5, 7], 'message: s
should be equal to [2, 5, 7]
.');"
],
"type": "waypoint",
"releasedOn": "Feb 17, 2017",
"challengeType": 1,
"translations": {}
},
{
"id": "598f48a36c8c40764b4e52b3",
"title": "Prevent Object Mutation",
"description": [
"As seen in previous challenge, const
declaration alone doesn't really protect your data from mutation. To ensure your data doesn't change, JavaScript provides a function Object.freeze
to prevent data mutation.",
"Once the object is freezed, you can no longer add/update/delete properties from it. Any attempt at changing the object will be rejected without any error.",
"\nlet obj = {\n name:\"FreeCodeCamp\"\n review:\"Awesome\"\n};\nObject.freeze(obj);\nobj.review = \"bad\"; //will be ignored. Mutation not allowed\nobj.newProp = \"Test\"; // will be ignored. Mutation not allowed\nconsole.log(obj); \n// { name: \"FreeCodeCamp\", review:\"Awesome\"}\n", "
Object.freeze
to prevent mathematical constants from changing. You need to freeze MATH_CONSTANTS
object so that noone is able alter the value of PI
or add any more properties to it."
],
"challengeSeed": [
"function freezeObj() {",
" \"use strict\";",
" const MATH_CONSTANTS = {",
" PI: 3.14",
" };",
" // change code below this line",
"",
"",
" // change code above this line",
" try {",
" MATH_CONSTANTS.PI = 99;",
" } catch( ex ) {",
" console.log(ex);",
" }",
" return MATH_CONSTANTS.PI;",
"}",
"const PI = freezeObj();"
],
"tests": [
"getUserInput => assert(getUserInput('index').match(/const/g), 'message: Do not replace const
keyword.');",
"getUserInput => assert(getUserInput('index').match(/const\\s+MATH_CONSTANTS/g), 'message: MATH_CONSTANTS
should be a constant variable (by using const
).');",
"getUserInput => assert(getUserInput('index').match(/const\\s+MATH_CONSTANTS\\s+=\\s+{\\s+PI:\\s+3.14\\s+};/g), 'message: Do not change original MATH_CONSTANTS
.');",
"assert(PI === 3.14, 'message: PI
equals 3.14
.');"
],
"type": "waypoint",
"releasedOn": "Aug 12, 2017",
"challengeType": 1,
"translations": {}
},
{
"id": "587d7b87367417b2b2512b43",
"title": "Use Arrow Functions to Write Concise Anonymous Functions",
"description": [
"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.",
"To achieve this, we often use the following syntax:",
"const myFunc = function() {", "ES6 provides us with the syntactic sugar to not have to write anonymous functions this way. Instead, you can use arrow function syntax:", "
const myVar = \"value\";
return myVar;
}
const myFunc = () => {", "When there is no function body, and only a return value, arrow function syntax allows you to omit the keyword
const myVar = \"value\";
return myVar;
}
return
as well as the brackets surrounding the code. This helps simplify smaller functions into one-line statements:",
"const myFunc= () => \"value\"", "This code will still return
value
by default.",
"magic
which returns a new Date()
to use arrow function syntax. Also make sure nothing is defined using the keyword var
."
],
"challengeSeed": [
"var magic = function() {",
" \"use strict\";",
" return new Date();",
"};"
],
"tests": [
"getUserInput => assert(!getUserInput('index').match(/var/g), 'message: User did replace var
keyword.');",
"getUserInput => assert(getUserInput('index').match(/const\\s+magic/g), 'message: magic
should be a constant variable (by using const
).');",
"assert(typeof magic === 'function', 'message: magic
is a function
.');",
"assert(magic().getDate() == new Date().getDate(), 'message: magic()
returns correct date.');",
"getUserInput => assert(!getUserInput('index').match(/function/g), 'message: function
keyword was not used.');"
],
"type": "waypoint",
"releasedOn": "Feb 17, 2017",
"challengeType": 1,
"translations": {}
},
{
"id": "587d7b88367417b2b2512b44",
"title": "Write Arrow Functions with Parameters",
"description": [
"Just like a normal function, you can pass arguments into arrow functions.",
"// doubles input value and returns it", "You can pass more than one argument into arrow functions as well.", "
const doubler = (item) => item * 2;
myConcat
function which appends contents of arr2
to arr1
so that the function uses arrow function syntax."
],
"challengeSeed": [
"var myConcat = function(arr1, arr2) {",
" \"use strict\";",
" return arr1.concat(arr2);",
"};",
"// test your code",
"console.log(myConcat([1, 2], [3, 4, 5]));"
],
"tests": [
"getUserInput => assert(!getUserInput('index').match(/var/g), 'message: User did replace var
keyword.');",
"getUserInput => assert(getUserInput('index').match(/const\\s+myConcat/g), 'message: myConcat
should be a constant variable (by using const
).');",
"assert(typeof myConcat === 'function', 'message: myConcat
should be a function');",
"assert(() => { const a = myConcat([1], [2]); return a[0] == 1 && a[1] == 2; }, 'message: myConcat()
returns the correct array
');",
"getUserInput => assert(!getUserInput('index').match(/function/g), 'message: function
keyword was not used.');"
],
"type": "waypoint",
"releasedOn": "Feb 17, 2017",
"challengeType": 1,
"translations": {}
},
{
"id": "587d7b88367417b2b2512b45",
"title": "Write Higher Order Arrow Functions",
"description": [
"It's time we see how powerful arrow functions are when processing data.",
"Arrow functions work really well with higher order functions, such as map()
, filter()
, and reduce()
, that take other functions as arguments for processing collections of data.",
"Read the following code:",
"FBPosts.filter(function(post) {", "We have written this with
return post.thumbnail !== null && post.shares > 100 && post.likes > 500;
})
filter()
to at least make it somewhat readable. Now compare it to the following code which uses arrow function syntax instead:",
"FBPosts.filter((post) => post.thumbnail !== null && post.shares > 100 && post.likes > 500)", "This code is more succinct and accomplishes the same task with fewer lines of code.", "
realNumberArray
and store the new array in the variable squaredIntegers
."
],
"challengeSeed": [
"const realNumberArray = [4, 5.6, -9.8, 3.14, 42, 6, 8.34];",
"const squareList = (arr) => {",
" \"use strict\";",
" // change code below this line",
" const squaredIntegers = arr;",
" // change code above this line",
" return squaredIntegers;",
"};",
"// test your code",
"const squaredIntegers = squareList(realNumberArray);",
"console.log(squaredIntegers);"
],
"tests": [
"getUserInput => assert(!getUserInput('index').match(/var/g), 'message: User did replace var
keyword.');",
"getUserInput => assert(getUserInput('index').match(/const\\s+squaredIntegers/g), 'message: squaredIntegers
should be a constant variable (by using const
).');",
"assert(Array.isArray(squaredIntegers), 'message: squaredIntegers
should be an array
');",
"assert(squaredIntegers[0] === 16 && squaredIntegers[1] === 1764 && squaredIntegers[2] === 36, 'message: squaredIntegers
should be [16, 1764, 36]
');",
"getUserInput => assert(!getUserInput('index').match(/function/g), 'message: function
keyword was not used.');",
"getUserInput => assert(!getUserInput('index').match(/(for)|(while)/g), 'message: loop should not be used');",
"getUserInput => assert(getUserInput('index').match(/map|filter|reduce/g), 'message: map
, filter
, or reduce
should be used');"
],
"type": "waypoint",
"releasedOn": "Feb 17, 2017",
"challengeType": 1,
"translations": {}
},
{
"id": "587d7b88367417b2b2512b46",
"title": "Set Default Parameters for Your Functions",
"description": [
"In order to help us create more flexible functions, ES6 introduces default parameters for functions.",
"Check out this code:",
"function greeting(name = \"Anonymous\") {", "The default parameter kicks in when the argument is not specified (it is undefined). As you can see in the example above, the parameter
return \"Hello \" + name;
}
console.log(greeting(\"John\")); // Hello John
console.log(greeting()); // Hello Anonymous
name
will receive its default value \"Anonymous\"
when you do not provide a value for the parameter. You can add default values for as many parameters as you want.",
"increment
by adding default parameters so that it will add 1 to number
if value
is not specified."
],
"challengeSeed": [
"const increment = (function() {",
" \"use strict\";",
" return function increment(number, value) {",
" return number + value;",
" };",
"})();",
"console.log(increment(5, 2)); // returns 7",
"console.log(increment(5)); // returns NaN"
],
"tests": [
"assert(increment(5, 2) === 7, 'message: The result of increment(5, 2)
should be 7
.');",
"assert(increment(5) === 6, 'message: The result of increment(5)
should be 6
.');",
"getUserInput => assert(getUserInput('index').match(/value\\s*=\\s*1/g), 'message: default parameter 1
was used for value
.');"
],
"type": "waypoint",
"releasedOn": "Feb 17, 2017",
"challengeType": 1,
"translations": {}
},
{
"id": "587d7b88367417b2b2512b47",
"title": "Use the Rest Operator with Function Parameters",
"description": [
"In order to help us create more flexible functions, ES6 introduces the rest operator for function parameters. With the rest operator, you can create functions that take a variable number of arguments. These arguments are stored in an array that can be accessed later from inside the function.",
"Check out this code:",
"function howMany(...args) {", "The rest operator eliminates the need to check the
return \"You have passed \" + args.length + \" arguments.\";
}
console.log(howMany(0, 1, 2)); // You have passed 3 arguments
console.log(howMany(\"string\", null, [1, 2, 3], { })); // You have passed 4 arguments.
args
array and allows us to apply map()
, filter()
and reduce()
on the parameters array.",
"sum
so that is uses the rest operator and it works in the same way with any number of parameters."
],
"challengeSeed": [
"const sum = (function() {",
" \"use strict\";",
" return function sum(x, y, z) {",
" const args = [ x, y, z ];",
" return args.reduce((a, b) => a + b, 0);",
" };",
"})();",
"console.log(sum(1, 2, 3)); // 6"
],
"tests": [
"assert(sum(0,1,2) === 3, 'message: The result of sum(0,1,2)
should be 3');",
"assert(sum(1,2,3,4) === 10, 'message: The result of sum(1,2,3,4)
should be 10');",
"assert(sum(5) === 5, 'message: The result of sum(5)
should be 5');",
"assert(sum() === 0, 'message: The result of sum()
should be 0');",
"getUserInput => assert(getUserInput('index').match(/function\\s+sum\\s*\\(\\s*...args\\s*\\)\\s*{/g), 'message: The sum
function uses the ...
spread operator on the args
parameter.');"
],
"type": "waypoint",
"releasedOn": "Feb 17, 2017",
"challengeType": 1,
"translations": {}
},
{
"id": "587d7b89367417b2b2512b48",
"title": "Use the Spread Operator to Evaluate Arrays In-Place",
"description": [
"ES6 introduces the spread operator, which allows us to expand arrays and other expressions in places where multiple parameters or elements are expected.",
"The ES5 code below uses apply()
to compute the maximum value in an array:",
"var arr = [6, 89, 3, 45];", "We had to use
var maximus = Math.max.apply(null, arr); // returns 89
Math.max.apply(null, arr)
because Math.max(arr)
returns NaN
. Math.max()
expects comma-separated arguments, but not an array.",
"The spread operator makes this syntax much better to read and maintain.",
"const arr = [6, 89, 3, 45];", "
const maximus = Math.max(...arr); // returns 89
...arr
returns an unpacked array. In other words, it spreads the array.",
"However, the spread operator only works in-place, like in an argument to a function or in an array literal. The following code will not work:",
"const spreaded = ...arr; // will throw a syntax error", "
arr1
into another array arr2
using the spread operator."
],
"challengeSeed": [
"const arr1 = ['JAN', 'FEB', 'MAR', 'APR', 'MAY'];",
"let arr2;",
"(function() {",
" \"use strict\";",
" arr2 = []; // change this line",
"})();",
"console.log(arr2);"
],
"tests": [
"assert(arr2.every((v, i) => v === arr1[i]), 'message: arr2
is correct copy of arr1
.');",
"getUserInput => assert(getUserInput('index').match(/\\[\\s*...arr1\\s*\\]/g),'message: ...
spread operator was used to duplicate arr1
.');",
"assert((arr1, arr2) => {arr1.push('JUN'); return arr2.length < arr1.length},'message: arr2
remains unchanged when arr1
is changed.');"
],
"type": "waypoint",
"releasedOn": "Feb 17, 2017",
"challengeType": 1,
"translations": {}
},
{
"id": "587d7b89367417b2b2512b49",
"title": "Use Destructuring Assignment to Assign Variables from Objects",
"description": [
"We saw earlier how spread operator can effectively spread, or unpack, the contents of the array.",
"We can do something similar with objects as well. Destructuring assignment is special syntax for neatly assigning values taken directly from an object to variables.",
"Consider the following ES5 code:",
"var voxel = {x: 3.6, y: 7.4, z: 6.54 };", "Here's the same assignment statement with ES6 destructuring syntax:", "
var x = voxel.x; // x = 3.6
var y = voxel.y; // y = 7.4
var z = voxel.z; // z = 6.54
const { x, y, z } = voxel; // x = 3.6, y = 7.4, z = 6.54", "If instead you want to store the values of
voxel.x
into a
, voxel.y
into b
, and voxel.z
into c
, you have that freedom as well.",
"const { x : a, y : b, z : c } = voxel // a = 3.6, b = 7.4, c = 6.54", "You may read it as \"get the field
x
and copy the value into a
,\" and so on.",
"str
, and assign the length to len
in line."
],
"challengeSeed": [
"function getLength(str) {",
" \"use strict\";",
"",
" // change code below this line",
" const length = 0; // change this",
" // change code above this line",
"",
" return len; // you must assign length to len in line",
"",
"}",
"",
"console.log(getLength('FreeCodeCamp'));"
],
"tests": [
"assert(typeof getLength('') === 'number', 'message: the function getLength()
returns a number.');",
"assert(getLength(\"FreeCodeCamp\") === 12, 'message: getLength(\"FreeCodeCamp\")
should be 12
');",
"getUserInput => assert(getUserInput('index').match(/\\{\\s*length\\s*:\\s*len\\s*}\\s*=\\s*str/g),'message: destructuring with reassignment was used');"
],
"type": "waypoint",
"releasedOn": "Feb 17, 2017",
"challengeType": 1,
"translations": {}
},
{
"id": "587d7b89367417b2b2512b4a",
"title": "Use Destructuring Assignment to Assign Variables from Nested Objects",
"description": [
"We can similarly destructure nested objects into variables.",
"Consider the following code:",
"const a = {", "In the example above, the variable
start: { x: 5, y: 6},
end: { x: 6, y: -9 }
};
const { start : { x: startX, y: startY }} = a;
console.log(startX, startY); // 5, 6
start
is assigned the value of a.start
, which is also an object.",
"max
of forecast.tomorrow
and assign it to maxOfTomorrow
."
],
"challengeSeed": [
"const LOCAL_FORECAST = {",
" today: { min: 72, max: 83 },",
" tomorrow: { min: 73.3, max: 84.6 }",
"};",
"",
"function getMaxOfTmrw(forecast) {",
" \"use strict\";",
" // change code below this line",
" const maxOfTomorrow = undefined; // change this line",
" // change code above this line",
" return maxOfTomorrow;",
"}",
"",
"console.log(getMaxOfTmrw(LOCAL_FORECAST)); // should be 84.6"
],
"tests": [
"assert(getMaxOfTmrw(LOCAL_FORECAST) === 84.6, 'message: maxOfTomorrow
equals 84.6
');",
"getUserInput => assert(getUserInput('index').match(/\\{\\s*tomorrow\\s*:\\s*\\{\\s*max\\s*:\\s*maxOfTomorrow\\s*\\}\\s*\\}\\s*=\\s*forecast/g),'message: nested destructuring was used');"
],
"type": "waypoint",
"releasedOn": "Feb 17, 2017",
"challengeType": 1,
"translations": {}
},
{
"id": "587d7b89367417b2b2512b4b",
"title": "Use Destructuring Assignment to Assign Variables from Arrays",
"description": [
"ES6 makes destructuring arrays as easy as destructuring objects.",
"One key difference between the spread operator and array destructuring is that the spread operator unpacks all contents of an array into a comma-separated list. Consequently, you cannot pick or choose which elements you want to assign to variables.",
"Destructuring an array lets us do exactly that:",
"const [a, b] = [1, 2, 3, 4, 5, 6];", "The variable
console.log(a, b); // 1, 2
a
is assigned the first value of the array, and b
is assigned the second value of the array.",
"We can also access the value at any index in an array with destructuring by using commas to reach the desired index:",
"const [a, b,,, c] = [1, 2, 3, 4, 5, 6];", "
console.log(a, b, c); // 1, 2, 5
a
and b
so that a
receives the value stored in b
, and b
receives the value stored in a
."
],
"challengeSeed": [
"let a = 8, b = 6;",
"(() => {",
" \"use strict\";",
" // change code below this line",
" ",
" // change code above this line",
"})();",
"console.log(a); // should be 6",
"console.log(b); // should be 8"
],
"tests": [
"assert(a === 6, 'message: Value of a
should be 6, after swapping.');",
"assert(b === 8, 'message: Value of b
should be 8, after swapping.');",
"// assert(/\\[\\s*(\\w)\\s*,\\s*(\\w)\\s*\\]\\s*=\\s*\\[\\s*\\2\\s*,\\s*\\1\\s*\\]/g.test(code), 'message: Use array destructuring to swap a and b.');"
],
"type": "waypoint",
"releasedOn": "Feb 17, 2017",
"challengeType": 1,
"translations": {}
},
{
"id": "587d7b8a367417b2b2512b4c",
"title": "Use Destructuring Assignment with the Rest Operator to Reassign Array Elements",
"description": [
"In some situations involving array destructuring, we might want to collect the rest of the elements into a separate array.",
"The result is similar to Array.prototype.slice()
, as shown below:",
"const [a, b, ...arr] = [1, 2, 3, 4, 5, 7];", "Variables
console.log(a, b); // 1, 2
console.log(arr); // [3, 4, 5, 7]
a
and b
take the first and second values from the array. After that, because of rest operator's presence, arr
gets rest of the values in the form of an array.",
"The rest element only works correctly as the last variable in the list. As in, you cannot use the rest operator to catch a subarray that leaves out last element of the original array.",
"Array.prototype.slice()
so that arr
is a sub-array of the original array source
with the first two elements ommitted."
],
"challengeSeed": [
"const source = [1,2,3,4,5,6,7,8,9,10];",
"function removeFirstTwo(list) {",
" \"use strict\";",
" // change code below this line",
" arr = list; // change this",
" // change code below this line",
" return arr;",
"}",
"const arr = removeFirstTwo(source);",
"console.log(arr); // should be [3,4,5,6,7,8,9,10]",
"console.log(source); // should be [1,2,3,4,5,6,7,8,9,10];"
],
"tests": [
"assert(arr.every((v, i) => v === i + 3),'message: arr
should be [3,4,5,6,7,8,9,10]
');",
"getUserInput => assert(getUserInput('index').match(/\\[\\s*\\w\\s*,\\s*\\w\\s*,\\s*...arr\\s*\\]/g),'message: destructuring was used.');",
"getUserInput => assert(!getUserInput('index').match(/Array.slice/g), 'message: Array.slice()
was not used.');"
],
"type": "waypoint",
"releasedOn": "Feb 17, 2017",
"challengeType": 1,
"translations": {}
},
{
"id": "587d7b8a367417b2b2512b4d",
"title": "Use Destructuring Assignment to Pass an Object as a Function's Parameters",
"description": [
"In some cases, you can destructure the object in a function argument itself.",
"Consider the code below:",
"const profileUpdate = (profileData) => {", "This effectively destructures the object sent into the function. This can also be done in-place:", "
const { name, age, nationality, location } = profileData;
// do something with these variables
}
const profileUpdate = ({ name, age, nationality, location }) => {", "This removes some extra lines and makes our code look neat.", "This has the added benefit of not having to manipulate an entire object in a function; only the fields that are needed are copied inside the function.", "
/* do something with these fields */
}
half
to send only max
and min
inside the function."
],
"challengeSeed": [
"const stats = {",
" max: 56.78,",
" standard_deviation: 4.34,",
" median: 34.54,",
" mode: 23.87,",
" min: -0.75,",
" average: 35.85",
"};",
"const half = (function() {",
" \"use strict\"; // do not change this line",
"",
" // change code below this line",
" return function half(stats) {",
" // use function argument destructuring",
" return (stats.max + stats.min) / 2.0;",
" };",
" // change code above this line",
"",
"})();",
"console.log(stats); // should be object",
"console.log(half(stats)); // should be 28.015"
],
"tests": [
"assert(typeof stats === 'object', 'message: stats
should be an object
.');",
"assert(half(stats) === 28.015, 'message: half(stats)
should be 28.015
');",
"getUserInput => assert(getUserInput('index').match(/\\(\\s*\\{\\s*\\w+\\s*,\\s*\\w+\\s*\\}\\s*\\)/g), 'message: Destructuring was used.');"
],
"type": "waypoint",
"releasedOn": "Feb 17, 2017",
"challengeType": 1,
"translations": {}
},
{
"id": "587d7b8a367417b2b2512b4e",
"title": "Create Strings using Template Literals",
"description": [
"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 = {", "A lot of things happened there.", "Firstly, the
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.
${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.",
"result
object's failure
array. Each entry should be wrapped inside an li
element with the class attribute text-warning
, and listed within the resultDisplayArray
."
],
"challengeSeed": [
"const result = {",
" success: [\"max-length\", \"no-amd\", \"prefer-arrow-functions\"],",
" failure: [\"no-var\", \"var-on-top\", \"linebreak\"],",
" skipped: [\"id-blacklist\", \"no-dup-keys\"]",
"};",
"function makeList(arr) {",
" \"use strict\";",
"",
" // change code below this line",
" const resultDisplayArray = null;",
" // change code above this line",
"",
" return resultDisplayArray;",
"}",
"/**",
" * makeList(result.failure) should return:",
" * [ resultDisplayArray
is a list containing result failure
messages.');",
"assert(makeList(result.failure).every((v, i) => v === `resultDisplayArray
is the desired output.');",
"getUserInput => assert(getUserInput('index').match(/\\`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 });", "
Person
object."
],
"challengeSeed": [
"const createPerson = (name, age, gender) => {",
" \"use strict\";",
" // change code below this line",
" return {",
" name: name,",
" age: age,",
" gender: gender",
" };",
" // change code above this line",
"};",
"console.log(createPerson(\"Zodiac Hasbro\", 56, \"male\")); // returns a proper object"
],
"tests": [
"assert(() => {const res={name:\"Zodiac Hasbro\",age:56,gender:\"male\"}; const person=createPerson(\"Zodiac Hasbro\", 56, \"male\"); return Object.keys(person).every(k => person[k] === res[k]);}, 'message: the output is {name: \"Zodiac Hasbro\", age: 56, gender: \"male\"}
.');",
"getUserInput => assert(!getUserInput('index').match(/:/g), 'message: No :
were used.');"
],
"type": "waypoint",
"releasedOn": "Feb 17, 2017",
"challengeType": 1,
"translations": {}
},
{
"id": "587d7b8b367417b2b2512b50",
"title": "Write Concise Declarative Functions with ES6",
"description": [
"When defining functions within objects in ES5, we have to use the keyword function
as follows:",
"const person = {", "With ES6, You can remove the
name: \"Taylor\",
sayHello: function() {
return `Hello! My name is ${this.name}.`;
}
};
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}.`;
}
};
setGear
inside the object bicycle
to use the shorthand syntax described above."
],
"challengeSeed": [
"// change code below this line",
"const bicycle = {",
" gear: 2,",
" setGear: function(newGear) {",
" \"use strict\";",
" this.gear = newGear;",
" }",
"};",
"// change code above this line",
"bicycle.setGear(3);",
"console.log(bicycle.gear);"
],
"tests": [
"assert(() => { bicycle.setGear(48); return bicycle.gear === 48 }, 'message: setGear
is a function and changes the gear
variable.');",
"getUserInput => assert(!getUserInput('index').match(/:\\s*function\\s*\\(\\)/g), 'message: Declarative function was used.');"
],
"type": "waypoint",
"releasedOn": "Feb 17, 2017",
"challengeType": 1,
"translations": {}
},
{
"id": "587d7b8b367417b2b2512b53",
"title": "Use class Syntax to Define a Constructor Function",
"description": [
"ES6 provides a new syntax to help create objects, using the keyword class.",
"This is to be noted, that the class
syntax is just a syntax, and not a full-fledged class based implementation of object oriented paradigm, unlike in languages like Java, or Python, or Ruby etc.",
"In ES5, we usually define a constructor function, and use the new
keyword to instantiate an object.",
"var SpaceShuttle = function(targetPlanet){", "The class syntax simply replaces the constructor function creation:", "
this.targetPlanet = targetPlanet;
}
var zeus = new spaceShuttle('Jupiter');
class SpaceShuttle {", "Notice that the
constructor(targetPlanet){
this.targetPlanet = targetPlanet;
}
}
const zeus = new spaceShuttle('Jupiter');
class
keyword declares a new function, and a constructor was added, which would be invoked when new
is called - to create a new object.",
"class
keyword and write a proper constructor to create the Vegetable
class.",
"The Vegetable
lets you create a vegetable object, with a property name
, to be passed to constructor."
],
"challengeSeed": [
"function makeClass() {",
" \"use strict\";",
" /* Alter code below this line */",
"",
" /* Alter code above this line */",
" return Vegetable;",
"}",
"const Vegetable = makeClass();",
"const carrot = new Vegetable('carrot');",
"console.log(carrot.name); // => should be 'carrot'"
],
"tests": [
"assert(typeof Vegetable === 'function' && typeof Vegetable.constructor === 'function', 'message: Vegetable
should be a class
with a defined constructor
method.');",
"getUserInput => assert(getUserInput('index').match(/class/g),'message: class
keyword was used.');",
"assert(() => {const a = new Vegetable(\"apple\"); return typeof a === 'object';},'message: Vegetable
can be instantiated.');"
],
"type": "waypoint",
"releasedOn": "Feb 17, 2017",
"challengeType": 1,
"translations": {}
},
{
"id": "587d7b8c367417b2b2512b54",
"title": "Use getters and setters to Control Access to an Object",
"description": [
"You can obtain values from an object, and set a value of a property within an object.",
"These are classically called getters and setters.",
"Getter functions are meant to simply return (get) the value of an object's private variable to the user without the user directly accessing the private variable.",
"Setter functions are meant to modify (set) the value of an object's private variable based on the value passed into the setter function. This change could involve calculations, or even overwriting the previous value completely.",
"class Book {", "Notice the syntax we are using to invoke the getter and setter - as if they are not even functions.", "Getters and setters are important, because they hide internal implementation details.", "
constructor(author) {
this._author = author;
}
// getter
get writer(){
return this._author;
}
// setter
set writer(updatedAuthor){
this._author = updatedAuthor;
}
}
const lol = new Book('anonymous');
console.log(lol.writer);
lol.writer = 'wut';
console.log(lol.writer);
class
keyword to create a Thermostat class. The constructor accepts Farenheit temperature.",
"Now create getter
and setter
in the class, to obtain the temperature in Celsius scale.",
"Remember that C = 5/9 * (F - 32)
and F = C * 9.0 / 5 + 32
, where F is the value of temperature in Fahrenheit scale, and C is the value of the same temperature in Celsius scale",
"Note",
"When you implement this, you would be tracking the temperature inside the class in one scale - either Fahrenheit or Celsius.",
"This is the power of getter or setter - you are creating an API for another user, who would get the correct result, no matter which one you track.",
"In other words, you are abstracting implementation details from the consumer."
],
"challengeSeed": [
"function makeClass() {",
" \"use strict\";",
" /* Alter code below this line */",
"",
" /* Alter code above this line */",
" return Thermostat;",
"}",
"const Thermostat = makeClass();",
"const thermos = new Thermostat(76); // setting in Farenheit scale",
"let temp = thermos.temperature; // 24.44 in C",
"thermos.temperature = 26;",
"temp = thermos.temperature; // 26 in C"
],
"tests": [
"assert(typeof Thermostat === 'function' && typeof Thermostat.constructor === 'function','message: Thermostat
should be a class
with a defined constructor
method.');",
"getUserInput => assert(getUserInput('index').match(/class/g),'message: class
keyword was used.');",
"assert(() => {const t = new Thermostat(32); return typeof t === 'object' && t.temperature === 0;}, 'message: Thermostat
can be instantiated.');"
],
"type": "waypoint",
"releasedOn": "Feb 17, 2017",
"challengeType": 1,
"translations": {}
},
{
"id": "587d7b8c367417b2b2512b55",
"title": "Understand the Differences Between import and require",
"description": [
"In the past, the function require()
would be used to import the functions and code in external files and modules. While handy, this presents a problem: some files and modules are rather large, and you may only need certain code from those external resources.",
"ES6 gives us a very handy tool known as import. With it, we can choose which parts of a module or file to load into a given file, saving time and memory.",
"Consider the following example. Imagine that math_array_functions
has about 20 functions, but I only need one, countItems
, in my current file. The old require()
approach would force me to bring in all 20 functions. With this new import
syntax, I can bring in just the desired function, like so:",
"import { countItems } from \"math_array_functions\"", "A description of the above code:", "
import { function } from \"file_path_goes_here\"", "There are a few ways to write an
// We can also import variables the same way!
import
statement, but the above is a very common use-case.",
"Noteimport
statement.",
"Noteimport
, and the statements we introduce in the rest of these lessons, won't work on a browser directly. However, we can use various tools to create code out of this to make it work in browser.",
"Note./
before it; otherwise, node will look in the node_modules
directory first trying to load it as a dependencie.",
"import
statement that will allow the current file to use the capitalizeString
function. The file where this function lives is called \"string_functions\"
, and it is in the same directory as the current file."
],
"head": [
"window.require = function (str) {",
"if (str === 'string_functions') {",
"return {",
"capitalizeString: str => str.toUpperCase()",
"}}};"
],
"challengeSeed": [
"\"use strict\";",
"capitalizeString(\"hello!\");"
],
"tests": [
"getUserInput => assert(getUserInput('index').match(/import\\s+\\{\\s?capitalizeString\\s?\\}\\s+from\\s+\"string_functions\"/g), 'message: valid import
statement');"
],
"type": "waypoint",
"releasedOn": "Feb 17, 2017",
"challengeType": 1,
"translations": {}
},
{
"id": "587d7b8c367417b2b2512b56",
"title": "Use export to Reuse a Code Block",
"description": [
"In the previous challenge, you learned about import
and how it can be leveraged to import small amounts of code from large files. In order for this to work, though, we must utilize one of the statements that goes with import
, known as export. When we want some code - a function, or a variable - to be usable in another file, we must export it in order to import it into another file. Like import
, export
is a non-browser feature.",
"The following is what we refer to as a named export. With this, we can import any code we export into another file with the import
syntax you learned in the last lesson. Here's an example:",
"const capitalizeString = (string) => {", "Alternatively, if you would like to compact all your
return string.charAt(0).toUpperCase() + string.slice(1);
}
export { capitalizeString } //How to export functions.
export const foo = \"bar\"; //How to export variables.
export
statements into one line, you can take this approach:",
"const capitalizeString = (string) => {", "Either approach is perfectly acceptable.", "
return string.charAt(0).toUpperCase() + string.slice(1);
}
const foo = \"bar\";
export { capitalizeString, foo }
export
, export the two variables."
],
"head": [
"window.exports = function(){};"
],
"challengeSeed": [
"\"use strict\";",
"const foo = \"bar\";",
"const boo = \"far\";"
],
"tests": [
"getUserInput => assert(getUserInput('index').match(/export\\s+const\\s+foo\\s+=+\\s\"bar\"/g), 'message: foo
is exported.');",
"getUserInput => assert(getUserInput('index').match(/export\\s+const\\s+boo\\s+=+\\s\"far\"/g), 'message: bar
is exported.');"
],
"type": "waypoint",
"releasedOn": "Feb 17, 2017",
"challengeType": 1,
"translations": {}
},
{
"id": "587d7b8c367417b2b2512b57",
"title": "Use * to Import Everything from a File",
"description": [
"Suppose you have a file that you wish to import all of its contents into the current file. This can be done with the import * syntax.",
"Here's an example where the contents of a file named \"math_functions\"
are imported into a file in the same directory:",
"import * as myMathModule from \"math_functions\"", "And breaking down that code:", "
myMathModule.add(2,3);
myMathModule.subtract(5,3);
import * as object_with_name_of_your_choice from \"file_path_goes_here\"", "You may use any name following the
object_with_name_of_your_choice.imported_function
import * as
portion of the statement. In order to utilize this method, it requires an object that receives the imported values. From here, you will use the dot notation to call your imported values.",
"\"capitalize_strings\"
, found in the same directory as it, imported. Add the appropriate import *
statement to the top of the file, using the object provided."
],
"head": [
"window.require = function(str) {",
"if (str === 'capitalize_strings') {",
"return {",
"capitalize: str => str.toUpperCase(),",
"lowercase: str => str.toLowerCase()",
"}}};"
],
"challengeSeed": [
"\"use strict\";",
"myStringModule.capitalize(\"foo\");",
"myStringModule.lowercase(\"Foo\");"
],
"tests": [
"getUserInput => assert(getUserInput('index').match(/import\\s+\\*\\s+as\\s+myStringModule\\s+from\\s+\"capitalize_strings\"/g), 'message: Properly uses import * as
syntax.');"
],
"type": "waypoint",
"releasedOn": "Feb 17, 2017",
"challengeType": 1,
"translations": {}
},
{
"id": "587d7b8c367417b2b2512b58",
"title": "Create an Export Fallback with export default",
"description": [
"In the export
lesson, you learned about the syntax referred to as a named export. This allowed you to make multiple functions and variables available for use in other files.",
"There is another export
syntax you need to know, known as export default. Usually you will use this syntax if only one value is being exported from a file. It is also used to create a fallback value for a file or module.",
"Here is a quick example of export default
:",
"export default function add(x,y) {", "Note: Since
return x + y;
}
export default
is used to declare a fallback value for a module or file, you can only have one value be a default export in each module or file. Additionally, you cannot use export default
with var
, let
, or const
",
"export
fallback.');"
],
"type": "waypoint",
"releasedOn": "Feb 17, 2017",
"challengeType": 1,
"translations": {}
},
{
"id": "587d7b8d367417b2b2512b59",
"title": "Import a Default Export",
"description": [
"In the last challenge, you learned about export default
and its uses. It is important to note that, to import a default export, you need to use a different import
syntax.",
"In the following example, we have a function, add
, that is the default export of a file, \"math_functions\"
. Here is how to import it:",
"import add from \"math_functions\";", "The syntax differs in one key place - the imported value,
add(5,4); //Will return 9
add
, is not surrounded by curly braces, {}
. Unlike exported values, the primary method of importing a default export is to simply write the value's name after import
.",
"subtract
, from the file \"math_functions\"
, found in the same directory as this file."
],
"head": [
"window.require = function(str) {",
"if (str === 'math_functions') {",
"return function(a, b) {",
"return a - b;",
"}}};"
],
"challengeSeed": [
"\"use strict\";",
"subtract(7,4);"
],
"tests": [
"getUserInput => assert(getUserInput('index').match(/import\\s+subtract\\s+from\\s+\"math_functions\"/g), 'message: Properly imports export default
method.');"
],
"type": "waypoint",
"releasedOn": "Feb 17, 2017",
"challengeType": 1,
"translations": {}
}
]
}