Copy edits (#35536)
* Copy edits to Basic JavaScript section * Copy edits to ES6 section * Update index.md
This commit is contained in:
Amy Lam
committed by
The Coding Aviator
The Coding Aviator
parent
768b618e68
commit
914a7c522d
@ -11,8 +11,8 @@ We have an array of objects representing different people in our contacts lists.
|
||||
A <code>lookUpProfile</code> function that takes <code>name</code> and a property (<code>prop</code>) as arguments has been pre-written for you.
|
||||
The function should check if <code>name</code> is an actual contact's <code>firstName</code> and the given property (<code>prop</code>) is a property of that contact.
|
||||
If both are true, then return the "value" of that property.
|
||||
If <code>name</code> does not correspond to any contacts then return <code>"No such contact"</code>
|
||||
If <code>prop</code> does not correspond to any valid properties of a contact found to match <code>name</code> then return <code>"No such property"</code>
|
||||
If <code>name</code> does not correspond to any contacts then return <code>"No such contact"</code>.
|
||||
If <code>prop</code> does not correspond to any valid properties of a contact found to match <code>name</code> then return <code>"No such property"</code>.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
@ -9,7 +9,7 @@ videoUrl: 'https://scrimba.com/c/cyWJBT4'
|
||||
<section id='description'>
|
||||
In the previous challenge, you used a single <code>conditional operator</code>. You can also chain them together to check for multiple conditions.
|
||||
The following function uses if, else if, and else statements to check multiple conditions:
|
||||
<blockquote>function findGreaterOrEqual(a, b) {<br> if(a === b) {<br> return "a and b are equal";<br> }<br> else if(a > b) {<br> return "a is greater";<br> }<br> else {<br> return "b is greater";<br> }<br>}</blockquote>
|
||||
<blockquote>function findGreaterOrEqual(a, b) {<br> if (a === b) {<br> return "a and b are equal";<br> }<br> else if (a > b) {<br> return "a is greater";<br> }<br> else {<br> return "b is greater";<br> }<br>}</blockquote>
|
||||
The above function can be re-written using multiple <code>conditional operators</code>:
|
||||
<blockquote>function findGreaterOrEqual(a, b) {<br> return (a === b) ? "a and b are equal" : (a > b) ? "a is greater" : "b is greater";<br>}</blockquote>
|
||||
</section>
|
||||
|
||||
@ -13,7 +13,7 @@ For example:
|
||||
With the <code>var</code> keyword, <code>i</code> is declared globally. So when <code>i++</code> is executed, it updates the global variable. This code is similar to the following:
|
||||
<blockquote>var numArray = [];<br>var i;<br>for (i = 0; i < 3; i++) {<br> numArray.push(i);<br>}<br>console.log(numArray);<br>// returns [0, 1, 2]<br>console.log(i);<br>// returns 3</blockquote>
|
||||
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 <code>i</code> variable. This is because the stored function will always refer to the value of the updated global <code>i</code> variable.
|
||||
<blockquote>var printNumTwo;<br>for (var i = 0; i < 3; i++) {<br> if(i === 2){<br> printNumTwo = function() {<br> return i;<br> };<br> }<br>}<br>console.log(printNumTwo());<br>// returns 3</blockquote>
|
||||
<blockquote>var printNumTwo;<br>for (var i = 0; i < 3; i++) {<br> if (i === 2) {<br> printNumTwo = function() {<br> return i;<br> };<br> }<br>}<br>console.log(printNumTwo());<br>// returns 3</blockquote>
|
||||
As you can see, <code>printNumTwo()</code> prints 3 and not 2. This is because the value assigned to <code>i</code> was updated and the <code>printNumTwo()</code> returns the global <code>i</code> and not the value <code>i</code> had when the function was created in the for loop. The <code>let</code> keyword does not follow this behavior:
|
||||
<blockquote>'use strict';<br>let printNumTwo;<br>for (let i = 0; i < 3; i++) {<br> if (i === 2) {<br> printNumTwo = function() {<br> return i;<br> };<br> }<br>}<br>console.log(printNumTwo());<br>// returns 2<br>console.log(i);<br>// returns "i is not defined"</blockquote>
|
||||
<code>i</code> is not defined because it was not declared in the global scope. It is only declared within the for loop statement. <code>printNumTwo()</code> returned the correct value because three different <code>i</code> variables with unique values (0, 1, and 2) were created by the <code>let</code> keyword within the loop statement.
|
||||
|
||||
@ -49,7 +49,7 @@ function printManyTimes(str) {
|
||||
// change code below this line
|
||||
|
||||
var sentence = str + " is cool!";
|
||||
for(var i = 0; i < str.length; i+=2) {
|
||||
for (var i = 0; i < str.length; i+=2) {
|
||||
console.log(sentence);
|
||||
}
|
||||
|
||||
@ -75,7 +75,7 @@ function printManyTimes(str) {
|
||||
// change code below this line
|
||||
|
||||
const SENTENCE = str + " is cool!";
|
||||
for(let i = 0; i < str.length; i+=2) {
|
||||
for (let i = 0; i < str.length; i+=2) {
|
||||
console.log(SENTENCE);
|
||||
}
|
||||
|
||||
|
||||
@ -8,7 +8,7 @@ challengeType: 1
|
||||
<section id='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:
|
||||
<blockquote>import add from "math_functions";<br>add(5,4); //Will return 9</blockquote>
|
||||
<blockquote>import add from "math_functions";<br>add(5,4); // Will return 9</blockquote>
|
||||
The syntax differs in one key place - the imported value, <code>add</code>, is not surrounded by curly braces, <code>{}</code>. Unlike exported values, the primary method of importing a default export is to simply write the value's name after <code>import</code>.
|
||||
</section>
|
||||
|
||||
|
||||
@ -8,7 +8,7 @@ challengeType: 1
|
||||
<section id='description'>
|
||||
As seen in the previous challenge, <code>const</code> declaration alone doesn't really protect your data from mutation. To ensure your data doesn't change, JavaScript provides a function <code>Object.freeze</code> to prevent data mutation.
|
||||
Once the object is frozen, you can no longer add, update, or delete properties from it. Any attempt at changing the object will be rejected without an error.
|
||||
<blockquote>let obj = {<br> name:"FreeCodeCamp",<br> review:"Awesome"<br>};<br>Object.freeze(obj);<br>obj.review = "bad"; //will be ignored. Mutation not allowed<br>obj.newProp = "Test"; // will be ignored. Mutation not allowed<br>console.log(obj); <br>// { name: "FreeCodeCamp", review:"Awesome"}</blockquote>
|
||||
<blockquote>let obj = {<br> name:"FreeCodeCamp",<br> review:"Awesome"<br>};<br>Object.freeze(obj);<br>obj.review = "bad"; // will be ignored. Mutation not allowed<br>obj.newProp = "Test"; // will be ignored. Mutation not allowed<br>console.log(obj); <br>// { name: "FreeCodeCamp", review:"Awesome"}</blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
@ -51,7 +51,7 @@ function freezeObj() {
|
||||
// change code above this line
|
||||
try {
|
||||
MATH_CONSTANTS.PI = 99;
|
||||
} catch( ex ) {
|
||||
} catch(ex) {
|
||||
console.log(ex);
|
||||
}
|
||||
return MATH_CONSTANTS.PI;
|
||||
@ -80,7 +80,7 @@ function freezeObj() {
|
||||
// change code above this line
|
||||
try {
|
||||
MATH_CONSTANTS.PI = 99;
|
||||
} catch( ex ) {
|
||||
} catch(ex) {
|
||||
console.log(ex);
|
||||
}
|
||||
return MATH_CONSTANTS.PI;
|
||||
|
||||
@ -11,7 +11,7 @@ This is to be noted, that the <code>class</code> syntax is just a syntax, and no
|
||||
In ES5, we usually define a constructor function, and use the <code>new</code> keyword to instantiate an object.
|
||||
<blockquote>var SpaceShuttle = function(targetPlanet){<br> this.targetPlanet = targetPlanet;<br>}<br>var zeus = new SpaceShuttle('Jupiter');</blockquote>
|
||||
The class syntax simply replaces the constructor function creation:
|
||||
<blockquote>class SpaceShuttle {<br> constructor(targetPlanet){<br> this.targetPlanet = targetPlanet;<br> }<br>}<br>const zeus = new SpaceShuttle('Jupiter');</blockquote>
|
||||
<blockquote>class SpaceShuttle {<br> constructor(targetPlanet) {<br> this.targetPlanet = targetPlanet;<br> }<br>}<br>const zeus = new SpaceShuttle('Jupiter');</blockquote>
|
||||
Notice that the <code>class</code> keyword declares a new function, and a constructor was added, which would be invoked when <code>new</code> is called - to create a new object.<br>
|
||||
<strong>Notes:</strong><br><ul>
|
||||
<li> UpperCamelCase should be used by convention for ES6 class names, as in <code>SpaceShuttle</code> used above.</li>
|
||||
|
||||
@ -8,7 +8,7 @@ challengeType: 1
|
||||
<section id='description'>
|
||||
We can similarly destructure <em>nested</em> objects into variables.
|
||||
Consider the following code:
|
||||
<blockquote>const a = {<br> start: { x: 5, y: 6},<br> end: { x: 6, y: -9 }<br>};<br>const { start : { x: startX, y: startY }} = a;<br>console.log(startX, startY); // 5, 6</blockquote>
|
||||
<blockquote>const a = {<br> start: { x: 5, y: 6 },<br> end: { x: 6, y: -9 }<br>};<br>const { start: { x: startX, y: startY }} = a;<br>console.log(startX, startY); // 5, 6</blockquote>
|
||||
In the example above, the variable <code>startX</code> is assigned the value of <code>a.start.x</code>.
|
||||
</section>
|
||||
|
||||
|
||||
@ -9,11 +9,11 @@ challengeType: 1
|
||||
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. <dfn>Destructuring assignment</dfn> is special syntax for neatly assigning values taken directly from an object to variables.
|
||||
Consider the following ES5 code:
|
||||
<blockquote>var voxel = {x: 3.6, y: 7.4, z: 6.54 };<br>var x = voxel.x; // x = 3.6<br>var y = voxel.y; // y = 7.4<br>var z = voxel.z; // z = 6.54</blockquote>
|
||||
<blockquote>var voxel = { x: 3.6, y: 7.4, z: 6.54 };<br>var x = voxel.x; // x = 3.6<br>var y = voxel.y; // y = 7.4<br>var z = voxel.z; // z = 6.54</blockquote>
|
||||
Here's the same assignment statement with ES6 destructuring syntax:
|
||||
<blockquote>const { x, y, z } = voxel; // x = 3.6, y = 7.4, z = 6.54</blockquote>
|
||||
If instead you want to store the values of <code>voxel.x</code> into <code>a</code>, <code>voxel.y</code> into <code>b</code>, and <code>voxel.z</code> into <code>c</code>, you have that freedom as well.
|
||||
<blockquote>const { x : a, y : b, z : c } = voxel; // a = 3.6, b = 7.4, c = 6.54</blockquote>
|
||||
<blockquote>const { x: a, y: b, z: c } = voxel; // a = 3.6, b = 7.4, c = 6.54</blockquote>
|
||||
You may read it as "get the field <code>x</code> and copy the value into <code>a</code>," and so on.
|
||||
</section>
|
||||
|
||||
|
||||
@ -8,7 +8,7 @@ challengeType: 1
|
||||
<section id='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:
|
||||
<blockquote>const capitalizeString = (string) => {<br> return string.charAt(0).toUpperCase() + string.slice(1);<br>}<br>export { capitalizeString } //How to export functions.<br>export const foo = "bar"; //How to export variables.</blockquote>
|
||||
<blockquote>const capitalizeString = (string) => {<br> return string.charAt(0).toUpperCase() + string.slice(1);<br>}<br>export { capitalizeString } // How to export functions.<br>export const foo = "bar"; // How to export variables.</blockquote>
|
||||
Alternatively, if you would like to compact all your <code>export</code> statements into one line, you can take this approach:
|
||||
<blockquote>const capitalizeString = (string) => {<br> return string.charAt(0).toUpperCase() + string.slice(1);<br>}<br>const foo = "bar";<br>export { capitalizeString, foo }</blockquote>
|
||||
Either approach is perfectly acceptable.
|
||||
|
||||
@ -10,7 +10,7 @@ You can obtain values from an object, and set a value of a property within an ob
|
||||
These are classically called <dfn>getters</dfn> and <dfn>setters</dfn>.
|
||||
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.<br><br>
|
||||
<blockquote>class Book {<br> constructor(author) {<br> this._author = author;<br> }<br> // getter<br> get writer(){<br> return this._author;<br> }<br> // setter<br> set writer(updatedAuthor){<br> this._author = updatedAuthor;<br> }<br>}<br>const lol = new Book('anonymous');<br>console.log(lol.writer); // anonymous<br>lol.writer = 'wut';<br>console.log(lol.writer); // wut</blockquote>
|
||||
<blockquote>class Book {<br> constructor(author) {<br> this._author = author;<br> }<br> // getter<br> get writer() {<br> return this._author;<br> }<br> // setter<br> set writer(updatedAuthor) {<br> this._author = updatedAuthor;<br> }<br>}<br>const lol = new Book('anonymous');<br>console.log(lol.writer); // anonymous<br>lol.writer = 'wut';<br>console.log(lol.writer); // wut</blockquote>
|
||||
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.
|
||||
<strong>Note:</strong> It is a convention to precede the name of a private variable with an underscore (<code>_</code>). The practice itself does not make a variable private.
|
||||
|
||||
@ -8,7 +8,7 @@ challengeType: 1
|
||||
<section id='description'>
|
||||
In order to help us create more flexible functions, ES6 introduces the <dfn>rest operator</dfn> 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:
|
||||
<blockquote>function howMany(...args) {<br> return "You have passed " + args.length + " arguments.";<br>}<br>console.log(howMany(0, 1, 2)); // You have passed 3 arguments<br>console.log(howMany("string", null, [1, 2, 3], { })); // You have passed 4 arguments.</blockquote>
|
||||
<blockquote>function howMany(...args) {<br> return "You have passed " + args.length + " arguments.";<br>}<br>console.log(howMany(0, 1, 2)); // You have passed 3 arguments.<br>console.log(howMany("string", null, [1, 2, 3], { })); // You have passed 4 arguments.</blockquote>
|
||||
The rest operator eliminates the need to check the <code>args</code> array and allows us to apply <code>map()</code>, <code>filter()</code> and <code>reduce()</code> on the parameters array.
|
||||
</section>
|
||||
|
||||
@ -44,7 +44,7 @@ tests:
|
||||
|
||||
```js
|
||||
const sum = (x, y, z) => {
|
||||
const args = [ x, y, z ];
|
||||
const args = [x, y, z];
|
||||
return args.reduce((a, b) => a + b, 0);
|
||||
}
|
||||
console.log(sum(1, 2, 3)); // 6
|
||||
|
||||
Reference in New Issue
Block a user