Fix challenge title formatting misc

This commit is contained in:
dhcodes
2017-02-23 11:42:29 -06:00
parent f8da35f794
commit baf1d0cff8
24 changed files with 220 additions and 220 deletions

View File

@ -595,7 +595,7 @@
},
{
"id": "587d7b7c367417b2b2512b1b",
"title": "Use the Delete Keyword to Remove Object Properties",
"title": "Use the delete Keyword to Remove Object Properties",
"description": [
"Now you know what objects are and their basic features and advantages. In short, they are key-value stores which provide a flexible, intuitive way to structure data, <strong><em>and</em></strong>, they provide very fast lookup time. Throughout the rest of these challenges, we will describe several common operations you can perform on objects so you can become comfortable applying these useful data structures in your programs.",
"In earlier challenges, we have both added to and modified an object's key-value pairs. Here we will see how we can <em>remove</em> a key-value pair from an object.",

View File

@ -6,7 +6,7 @@
"challenges": [
{
"id": "bd7123c9c441eddfaeb4bdef",
"title": "Comment your JavaScript Code",
"title": "Comment Your JavaScript Code",
"description": [
"Comments are lines of code that JavaScript will intentionally ignore. Comments are a great way to leave notes to yourself and to other people who will later need to figure out what that code does.",
"There are two ways to write comments in JavaScript:",
@ -3710,7 +3710,7 @@
},
{
"id": "56533eb9ac21ba0edf2244dd",
"title": "Selecting from many options with Switch Statements",
"title": "Selecting from Many Options with Switch Statements",
"description": [
"If you have many options to choose from, use a <code>switch</code> statement. A <code>switch</code> statement tests a value and can have many <code>case</code> statements which define various possible values. Statements are executed from the first matched <code>case</code> value until a <code>break</code> is encountered.",
"Here is a <dfn>pseudocode</dfn> example:",
@ -3767,7 +3767,7 @@
},
{
"id": "56533eb9ac21ba0edf2244de",
"title": "Adding a default option in Switch statements",
"title": "Adding a Default Option in Switch Statements",
"description": [
"In a <code>switch</code> statement you may not be able to specify all possible values as <code>case</code> statements. Instead, you can add the <code>default</code> statement which will be executed if no matching <code>case</code> statements are found. Think of it like the final <code>else</code> statement in an <code>if/else</code> chain.",
"A <code>default</code> statement should be the last case.",

View File

@ -100,7 +100,7 @@
},
{
"id": "587d7b87367417b2b2512b41",
"title": "Use the const Keyword",
"title": "Declare a Read-Only Variable with the const Keyword",
"description": [
"<code>let</code> is not the only new way to declare variables. In ES6, you can also declare variables using the <code>const</code> keyword.",
"<code>const</code> has all the awesome features that <code>let</code> has, with the added bonus that variables declared using <code>const</code> are read-only. They are a constant value, which means that once a variable is assigned with <code>const</code>, it cannot be reassigned.",
@ -169,7 +169,7 @@
},
{
"id": "587d7b87367417b2b2512b43",
"title": "Write Arrow Functions",
"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:",
@ -242,7 +242,7 @@
},
{
"id": "587d7b88367417b2b2512b45",
"title": "Write Arrow Functions with Higher Order Functions",
"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 <code>map()</code>, <code>filter()</code>, and <code>reduce()</code>, that take other functions as arguments for processing collections of data.",
@ -281,7 +281,7 @@
},
{
"id": "587d7b88367417b2b2512b46",
"title": "Write Functions with Default Parameters",
"title": "Set Default Parameters for Your Functions",
"description": [
"In order to help us create more flexible functions, ES6 introduces <dfn>default parameters</dfn> for functions.",
"Check out this code:",
@ -340,7 +340,7 @@
},
{
"id": "587d7b89367417b2b2512b48",
"title": "Use the Spread Operator",
"title": "Use the Spread Operator to Evaluate Arrays In-Place",
"description": [
"ES6 introduces the <dfn>spread operator</dfn>, which allows us to expand arrays and other expressions in places where multiple parameters or elements are expected.",
"The ES5 code below uses <code>apply()</code> to compute the maximum value in an array:",
@ -374,7 +374,7 @@
},
{
"id": "587d7b89367417b2b2512b49",
"title": "Use Destructuring Assignment with Objects",
"title": "Use Destructuring Assignment to Assign Variables from Objects",
"description": [
"We earlier saw how spread operator can effectively spread, or unpack, the contents of the array.",
"We can do something similar with objects as well. <dfn>Destructuring assignment</dfn> is special syntax for neatly assigning values taken directly from an object to variables.",
@ -406,7 +406,7 @@
},
{
"id": "587d7b89367417b2b2512b4a",
"title": "Use Destructuring Assignment with Nested Objects",
"title": "Use Destructuring Assignment to Assign Variables from Nested Objects",
"description": [
"We can similarly destructure <em>nested</em> objects into variables.",
"Consider the following code:",
@ -436,7 +436,7 @@
},
{
"id": "587d7b89367417b2b2512b4b",
"title": "Use Destructuring Assignment with Arrays",
"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 and choose which elements or you want to assign to variables.",
@ -468,7 +468,7 @@
},
{
"id": "587d7b8a367417b2b2512b4c",
"title": "Use Destructuring Assignment with the Rest Operator",
"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 <code>Array.prototype.slice()</code>, as shown below:",
@ -499,7 +499,7 @@
},
{
"id": "587d7b8a367417b2b2512b4d",
"title": "Use Destructuring Assignment on Function Parameters",
"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:",
@ -538,7 +538,7 @@
},
{
"id": "587d7b8a367417b2b2512b4e",
"title": "String Interpolation using Backquotes",
"title": "Interpolate a String Using Backquotes",
"description": [
"A new feature of ES6 or ES2015, is that it allows you to use string interpolation with back-ticks.",
"Consider the code below",
@ -591,7 +591,7 @@
},
{
"id": "587d7b8a367417b2b2512b4f",
"title": "Enhanced Object Literals : Simple Fields",
"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:",
@ -631,7 +631,7 @@
},
{
"id": "587d7b8b367417b2b2512b50",
"title": "Enhanced Object Literals : Functions",
"title": "Write Concise Declarative Functions with ES6",
"description": [
"With ES6, it's possible to remove the keyword function as follows, from object literals:",
"<blockquote>const Container extends Component {<br>&nbsp;&nbsp;render: function() {<br>&nbsp;&nbsp;&nbsp;&nbsp;return {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Container<br>&nbsp;&nbsp;&nbsp;&nbsp;}<br>&nbsp;&nbsp;}<br>}</blockquote>",
@ -668,7 +668,7 @@
},
{
"id": "587d7b8b367417b2b2512b53",
"title": "class Syntax",
"title": "Use class Syntax to Define a Constructor Function",
"description": [
"ES6 provides a new syntax to help create objects, using the keyword <dfn>class</dfn>.",
"This is to be noted, that the <code>class</code> 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.",
@ -700,7 +700,7 @@
},
{
"id": "587d7b8c367417b2b2512b54",
"title": "class getters and setters",
"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 <dfn>getters</dfn> and <dfn>setters</dfn>.",
@ -739,7 +739,7 @@
},
{
"id": "587d7b8c367417b2b2512b55",
"title": "Import vs. Require: What's the difference?",
"title": "Understand the Differences Between import and require",
"description": [
"In the past, the function <code>require()</code> 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 <dfn>import</dfn>. With it, we can choose which parts of a module or file to load into a given file, saving time and memory.",
@ -766,7 +766,7 @@
},
{
"id": "587d7b8c367417b2b2512b56",
"title": "Export: One of Import's siblings.",
"title": "Use export to Reuse a Code Block",
"description": [
"In the previous challenge, you learned about <code>import</code> 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 <code>import</code>, known as <dfn>export</dfn>. 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 <code>import</code>, <code>export</code> is a non-browser feature.",
"The following is what we refer to as a <dfn>named export</dfn>. With this, we can import any code we export into another file with the <code>import</code> syntax you learned in the last lesson. Here's an example:",
@ -792,7 +792,7 @@
},
{
"id": "587d7b8c367417b2b2512b57",
"title": "Import Everything",
"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 <dfn>import *</dfn> syntax.",
"Here's an example where the contents of a file named <code>\"math_functions\"</code> are imported into a file in the same directory:",
@ -817,7 +817,7 @@
},
{
"id": "587d7b8c367417b2b2512b58",
"title": "Export Default",
"title": "Create an Export Fallback with export default",
"description": [
"In the <code>export</code> lesson, you learned about the syntax referred to as a <dfn>named export</dfn>. This allowed you to make multiple functions and variables available for use in other files.",
"There is another <code>export</code> syntax you need to know, known as <dfn>export default</dfn>. 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.",
@ -840,7 +840,7 @@
},
{
"id": "587d7b8d367417b2b2512b59",
"title": "Importing a Default Export",
"title": "Import a Default Export",
"description": [
"In the last challenge, you learned about <code>export default</code> and its uses. It is important to note that, to import a default export, you need to use a different <code>import</code> syntax.",
"In the following example, we have a function, <code>add</code>, that is the default export of a file, <code>\"math_functions\"</code>. Here is how to import it:",

View File

@ -361,7 +361,7 @@
},
{
"id": "587d7b8f367417b2b2512b61",
"title": "Use Map to Extract Data from an Array",
"title": "Use the map Method to Extract Data from an Array",
"description": [
"So far we have learned to use pure functions to avoid side effects in a program. Also, we have seen the value in having a function only depend on its input arguments.",
"This is only the beginning. As its name suggests, functional programming is centered around a theory of functions.",
@ -511,7 +511,7 @@
},
{
"id": "587d7b8f367417b2b2512b62",
"title": "Implement Map on a Prototype",
"title": "Implement map on a Prototype",
"description": [
"As you have seen from applying <code>Array.prototype.map()</code>, or simply <code>map()</code> earlier, the <code>map</code> method returns an array of the same length as the one it was called on. It also doesn't alter the original array, as long as its callback function doesn't.",
"In other words, <code>map</code> is a pure function, and its output depends solely on its inputs. Plus, it takes another function as its argument.",
@ -549,7 +549,7 @@
},
{
"id": "587d7b8f367417b2b2512b63",
"title": "Use Filter to Extract Data from an Array",
"title": "Use the filter Method to Extract Data from an Array",
"description": [
"Another useful array function is <code>Array.prototype.filter()</code>, or simply <code>filter()</code>. The <code>filter</code> method returns a new array which is at most as long as the original array, but usually has fewer items.",
"<code>Filter</code> doesn't alter the original array, just like <code>map</code>. It takes a callback function that applies the logic inside the callback on each element of the array. If an element returns true based on the criteria in the callback function, then it is included in the new array.",
@ -693,7 +693,7 @@
},
{
"id": "587d7b8f367417b2b2512b64",
"title": "Implement the Filter Function on a Prototype",
"title": "Implement the filter Method on a Prototype",
"description": [
"It would teach us a lot about the <code>filter</code> method if we try to implement a version of it that behaves exactly like <code>Array.prototype.filter()</code>. It can use either a <code>for</code> loop or <code>Array.prototype.forEach()</code>.",
"Note: A pure function is allowed to alter local variables defined within its scope, although, it's preferable to avoid that as well.",
@ -729,7 +729,7 @@
},
{
"id": "587d7b90367417b2b2512b65",
"title": "Return Part of an Array Using the Slice Method",
"title": "Return Part of an Array Using the slice Method",
"description": [
"The <code>slice</code> method returns a copy of certain elements of an array. It can take two arguments, the first gives the index of where to begin the slice, the second is the index for where to end the slice (and it's non-inclusive). If the arguments are not provided, the default is to start at the beginning of the array through the end, which is an easy way to make a copy of the entire array. The <code>slice</code> method does not mutate the original array, but returns a new one.",
"Here's an example:",
@ -762,7 +762,7 @@
},
{
"id": "9d7123c8c441eeafaeb5bdef",
"title": "Remove Elements from an Array Using Slice Instead of Splice",
"title": "Remove Elements from an Array Using slice Instead of splice",
"description": [
"A common pattern while working with arrays is when you want to remove items and keep the rest of the array. JavaScript offers the <code>splice</code> method for this, which takes arguments for the index of where to start removing items, then the number of items to remove. If the second argument is not provided, the default is to remove items through the end. However, the <code>splice</code> method mutates the original array it is called on. Here's an example:",
"<blockquote>var cities = [\"Chicago\", \"Delhi\", \"Islamabad\", \"London\", \"Berlin\"];<br>cities.splice(3, 1); // Returns \"London\" and deletes it from the cities array<br>// cities is now [\"Chicago\", \"Delhi\", \"Islamabad\", \"Berlin\"]</blockquote>",
@ -795,7 +795,7 @@
},
{
"id": "587d7da9367417b2b2512b66",
"title": "Combine Two Arrays Using the Concat Method",
"title": "Combine Two Arrays Using the concat Method",
"description": [
"<code>Concatenation</code> means to join items end to end. JavaScript offers the <code>concat</code> method for both strings and arrays that work in the same way. For arrays, the method is called on one, then another array is provided as the argument to <code>concat</code>, which is added to the end of the first array. It returns a new array and does not mutate either of the original arrays. Here's an example:",
"<blockquote>[1, 2, 3].concat([4, 5, 6]);<br>// Returns a new array [1, 2, 3, 4, 5, 6]</blockquote>",
@ -827,7 +827,7 @@
},
{
"id": "587d7da9367417b2b2512b67",
"title": "Add Elements to the End of an Array Using Concat Instead of Push",
"title": "Add Elements to the End of an Array Using concat Instead of push",
"description": [
"Functional programming is all about creating and using non-mutating functions.",
"The last challenge introduced the <code>concat</code> method as a way to combine arrays into a new one without mutating the original arrays. Compare <code>concat</code> to the <code>push</code> method. <code>Push</code> adds an item to the end of the same array it is called on, which mutates that array. Here's an example:",
@ -862,7 +862,7 @@
},
{
"id": "587d7da9367417b2b2512b68",
"title": "Use the Reduce Method to Analyze Data",
"title": "Use the reduce Method to Analyze Data",
"description": [
"<code>Array.prototype.reduce()</code>, or simply <code>reduce()</code>, is the most general of all array operations in JavaScript. You can solve almost any array processing problem using the <code>reduce</code> method.",
"This is not the case with the <code>filter</code> and <code>map</code> methods since they do not allow interaction between two different elements of the array. For example, if you want to compare elements of the array, or add them together, <code>filter</code> or <code>map</code> could not process that.",
@ -1012,7 +1012,7 @@
},
{
"id": "587d7da9367417b2b2512b69",
"title": "Sort an Array Alphabetically using the Sort Method",
"title": "Sort an Array Alphabetically using the sort Method",
"description": [
"The <code>sort</code> method sorts the elements of an array according to the callback function.",
"For example:",
@ -1074,7 +1074,7 @@
},
{
"id": "587d7daa367417b2b2512b6b",
"title": "Split a String into an Array Using the Split Method",
"title": "Split a String into an Array Using the split Method",
"description": [
"The <code>split</code> method splits a string into an array of strings. It takes an argument for the delimiter, which can be a character to use to break up the string or a regular expression. For example, if the delimiter is a space, you get an array of words, and if the delimiter is an empty string, you get an array of each character in the string.",
"Here are two examples that split one string by spaces, then another by digits using a regular expression:",
@ -1108,7 +1108,7 @@
},
{
"id": "587d7daa367417b2b2512b6c",
"title": "Combine an Array into a String Using the Join Method",
"title": "Combine an Array into a String Using the join Method",
"description": [
"The <code>join</code> method is used to join the elements of an array together to create a string. It takes an argument for the delimiter that is used to separate the array elements in the string.",
"Here's an example:",
@ -1187,7 +1187,7 @@
},
{
"id": "587d7dab367417b2b2512b6e",
"title": "Use the Every Method to Check that Every Element in an Array Meets a Criteria",
"title": "Use the every Method to Check that Every Element in an Array Meets a Criteria",
"description": [
"The <code>every</code> method works with arrays to check if <em>every</em> element passes a particular test. It returns a Boolean value - <code>true</code> if all values meet the criteria, <code>false</code> if not.",
"For example, the following code would check if every element in the <code>numbers</code> array is less than 10:",
@ -1218,7 +1218,7 @@
},
{
"id": "587d7dab367417b2b2512b6f",
"title": "Use the Some Method to Check that Any Elements in an Array Meet a Criteria",
"title": "Use the some Method to Check that Any Elements in an Array Meet a Criteria",
"description": [
"The <code>some</code> method works with arrays to check if <em>any</em> element passes a particular test. It returns a Boolean value - <code>true</code> if any of the values meet the criteria, <code>false</code> if not.",
"For example, the following code would check if any element in the <code>numbers</code> array is less than 10:",

View File

@ -123,14 +123,14 @@
},
{
"id": "587d7dad367417b2b2512b76",
"title": "Make Code More Reusable with This",
"title": "Make Code More Reusable with the this Keyword",
"description": [
"The last challenge introduced a <code>method</code> to the <code>duck</code> object. It used <code>duck.name</code> dot notation to access the value for the <code>name</code> property within the return statement:",
"<code>sayName: function() {return \"The name of this duck is \" + duck.name + \".\";}</code>",
"While this is a valid way to access the object's property, there is a pitfall here. If the variable name changes, any code referencing the original name would need to be updated as well. In a short object definition, it isn't a problem, but if an object has many references to its properties there is a greater chance for error.",
"A way to avoid these issues is with the <code>this</code> keyword:",
"<blockquote>let duck = {<br>&nbsp;&nbsp;name: \"Aflac\",<br>&nbsp;&nbsp;numLegs: 2,<br>&nbsp;&nbsp;sayName: function() {return \"The name of this duck is \" + this.name + \".\";}<br>};</blockquote>",
"<code>This</code> is a deep topic, and the above example is only one way to use it. In the current context, <code>this</code> refers to the object that the method is associated with: <code>duck</code>.",
"<code>this</code> is a deep topic, and the above example is only one way to use it. In the current context, <code>this</code> refers to the object that the method is associated with: <code>duck</code>.",
"If the object's name is changed to <code>mallard</code>, it is not necessary to find all the references to <code>duck</code> in the code. It makes the code reusable and easier to read.",
"<hr>",
"Modify the <code>dog.sayLegs</code> method to remove any references to <code>dog</code>. Use the <code>duck</code> example for guidance."