fix(guide): restructure curriculum guide articles (#36501)
* fix: restructure certifications guide articles * fix: added 3 dashes line before prob expl * fix: added 3 dashes line before hints * fix: added 3 dashes line before solutions
This commit is contained in:
Randell Dawson
mrugesh
@@ -2,51 +2,50 @@
|
||||
title: Compare Scopes of the var and let Keywords
|
||||
---
|
||||
|
||||
 Remember to use <a>**`Read-Search-Ask`**</a> if you get stuck. Try to pair program  and write your own code 
|
||||
# Compare Scopes of the var and let Keywords
|
||||
|
||||
## Problem Explanation:
|
||||
---
|
||||
## Problem Explanation
|
||||
|
||||
Change the code so that the variable `i` declared in the if block is separately scoped than the variable `i` declared at the beginning of the function.
|
||||
|
||||
##  Hint: 1
|
||||
|
||||
---
|
||||
## Hints
|
||||
|
||||
### Hint 1
|
||||
|
||||
* _Be certain not to use the `var` keyword anywhere in your code._
|
||||
|
||||
> _try to solve the problem now_
|
||||
|
||||
### Hint 2
|
||||
* _Remember that `let`'s scope is limited to the block, function or statement in which you declare it._
|
||||
> _try to solve the problem now_
|
||||
|
||||
## Spoiler Alert!
|
||||
|
||||
|
||||
---
|
||||
## Solutions
|
||||
|
||||
**Solution ahead!**
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
##  Basic Code Solution:
|
||||
```javascript
|
||||
function checkScope() {
|
||||
"use strict";
|
||||
let i = "function scope";
|
||||
if (true) {
|
||||
let i = "block scope";
|
||||
console.log("Block scope i is: ", i);
|
||||
}
|
||||
console.log("Function scope i is: ", i);
|
||||
return i;
|
||||
}
|
||||
function checkScope() {
|
||||
"use strict";
|
||||
let i = "function scope";
|
||||
if (true) {
|
||||
let i = "block scope";
|
||||
console.log("Block scope i is: ", i);
|
||||
}
|
||||
console.log("Function scope i is: ", i);
|
||||
return i;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
## Code Explanation:
|
||||
#### Code Explanation
|
||||
|
||||
By using `let` you can declare variables in relation to their scope.
|
||||
|
||||
### Resources
|
||||
#### Relevant Links
|
||||
- ["let" - *MDN Javascript reference*](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let)
|
||||
- [Rauschmayer, Axel. "Variables and scoping in ECMAScript 6". *2ality.com*, 2015-02-07.](http://2ality.com/2015/02/es6-scoping.html) Accessed 11 Dec 2018.
|
||||
- [Bos, Wes. "Quick Tip: Use let with for Loops in JavaScript". *wesbos.com*, 16 Aug 2016.](https://wesbos.com/for-of-es6/) Accessed 11 Dec 2018.
|
||||
- [Rauschmayer, Axel. "Variables and scoping in ECMAScript 6". *2ality.com*, 2015-02-07.](http://2ality.com/2015/02/es6-scoping.html) Accessed 11 Dec 2018.
|
||||
- [Bos, Wes. "Quick Tip: Use let with for Loops in JavaScript". *wesbos.com*, 16 Aug 2016.](https://wesbos.com/for-of-es6/) Accessed 11 Dec 2018.
|
||||
</details>
|
||||
|
||||
*  **DO NOT** add solutions that are similar to any existing solutions. If you think it is **_similar but better_**, then try to merge (or replace) the existing similar solution.
|
||||
* Add an explanation of your solution.
|
||||
* Categorize the solution in one of the following categories — **Basic**, **Intermediate** and **Advanced**. 
|
||||
|
||||
@@ -1,20 +1,29 @@
|
||||
---
|
||||
title: Create an Export Fallback with export default
|
||||
---
|
||||
## Create an Export Fallback with export default
|
||||
|
||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||
# Create an Export Fallback with export default
|
||||
|
||||
What's a fallback value? It's basically a default that the code will go back to if nothing has been set. For example, variables have the default fallback value of `undefined`. That being said, a hint for this challenge!
|
||||
|
||||
## Hint 1:
|
||||
|
||||
---
|
||||
## Hints
|
||||
|
||||
### Hint 1
|
||||
|
||||
Just add `export default` to the beginning of the function.
|
||||
|
||||
## Spoiler Alert - Solution Ahead!
|
||||
|
||||
## Solution:
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
```javascript
|
||||
"use strict";
|
||||
export default function subtract(x,y) {return x - y;}
|
||||
export default function subtract(x, y) {
|
||||
return x - y;
|
||||
}
|
||||
```
|
||||
</details>
|
||||
|
||||
@@ -2,38 +2,41 @@
|
||||
title: Create Strings Using Template Literals
|
||||
---
|
||||
|
||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||
# Create Strings Using Template Literals
|
||||
|
||||
---
|
||||
## Problem Explanation
|
||||
Instead of using string concatenation, ES6 offers template literals to create strings. In this challenge, you have to use template literals to create an array of text warnings.
|
||||
|
||||
 Remember to use <a>**`Read-Search-Ask`**</a> if you get stuck. Try to pair program and write your own code.
|
||||
|
||||
### Problem Explanation:
|
||||
|
||||
It's required to use template literals to return a list as every element in the array as the element will be wrapped in a `<li></li>` tag.
|
||||
|
||||
## Hint: 1
|
||||
|
||||
---
|
||||
## Hints
|
||||
|
||||
### Hint 1
|
||||
|
||||
* Use `map()` function to apply the template literals on all of the `arr` elements
|
||||
|
||||
> _try to solve the problem now_
|
||||
|
||||
## Hint: 2
|
||||
### Hint 2
|
||||
|
||||
* Inside the `map()` use an arrow function which has `element` as a parameter and returns `<li></li>` that has the text-warning class and containing the `element` inside it
|
||||
|
||||
> _try to solve the problem now_
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
## Spoiler Alert!
|
||||
```javascript
|
||||
const resultDisplayArray = arr.map(item => `<li class="text-warning">${item}</li>`);
|
||||
```
|
||||
</details>
|
||||
|
||||
|
||||
<details><summary>Solution 2 (Click to Show/Hide)</summary>
|
||||
|
||||
**Solution ahead!**
|
||||
|
||||
```const resultDisplayArray = arr.map(item => `<li class="text-warning">${item}</li>`);```
|
||||
|
||||
## No map() solution
|
||||
No map() solution
|
||||
Despite being a less flexible solution, if you know the number of elements in advance, you can enumerate them as in
|
||||
|
||||
```const resultDisplayArray = [`<li class="text-warning">${arr[0]}</li>`,
|
||||
```javascript
|
||||
const resultDisplayArray = [`<li class="text-warning">${arr[0]}</li>`,
|
||||
`<li class="text-warning">${arr[1]}</li>`
|
||||
,`<li class="text-warning">${arr[2]}</li>`];```
|
||||
,`<li class="text-warning">${arr[2]}</li>`];
|
||||
```
|
||||
</details>
|
||||
|
||||
@@ -1,51 +1,49 @@
|
||||
---
|
||||
title: Declare a Read-Only Variable with the const Keyword
|
||||
---
|
||||
|
||||
|
||||
 Remember to use <a>**`Read-Search-Ask`**</a> if you get stuck. Try to pair program  and write your own code 
|
||||
# Declare a Read-Only Variable with the const Keyword
|
||||
|
||||
### Problem Explanation:
|
||||
---
|
||||
## Problem Explanation
|
||||
|
||||
Change all the variables to `let` or `const` and rename `sentence`.
|
||||
|
||||
##  Hint: 1
|
||||
|
||||
---
|
||||
## Hints
|
||||
|
||||
### Hint 1
|
||||
|
||||
* Replace `var` for string with read-only `const`.
|
||||
|
||||
> _try to solve the problem now_
|
||||
|
||||
##  Hint: 1
|
||||
### Hint 1
|
||||
|
||||
* Replace `var` in `for` loop to `let`.
|
||||
|
||||
> _try to solve the problem now_
|
||||
|
||||
##  Hint: 1
|
||||
### Hint 1
|
||||
|
||||
* Common convention is to name `const` variables with ALL CAPS.
|
||||
|
||||
> _try to solve the problem now_
|
||||
|
||||
## Spoiler Alert!
|
||||
|
||||
|
||||
---
|
||||
## Solutions
|
||||
|
||||
**Solution ahead!**
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
##  Basic Code Solution:
|
||||
```javascript
|
||||
function printManyTimes(str) {
|
||||
"use strict";
|
||||
const SENTENCE = str + " is cool!";
|
||||
for (let i = 0; i < str.length; i+=2) {
|
||||
console.log(SENTENCE);
|
||||
}
|
||||
}
|
||||
printManyTimes("freeCodeCamp");
|
||||
function printManyTimes(str) {
|
||||
"use strict";
|
||||
const SENTENCE = str + " is cool!";
|
||||
for (let i = 0; i < str.length; i += 2) {
|
||||
console.log(SENTENCE);
|
||||
}
|
||||
}
|
||||
printManyTimes("freeCodeCamp");
|
||||
```
|
||||
|
||||
# Code Explanation:
|
||||
#### Code Explanation
|
||||
|
||||
By using `const` on `sentence` we can make it read-only and by using `let` on `i` inside the for loop we can avoid using `var` all together. For added code clarity we can also change `sentence` to `SENTENCE` to show that it is a constant.
|
||||
|
||||
@@ -54,8 +52,4 @@ By using `const` on `sentence` we can make it read-only and by using `let` on `i
|
||||
* <a href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const' target='_blank' rel='nofollow'>const</a>
|
||||
* <a href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let' target='_blank' rel='nofollow'>let</a>
|
||||
|
||||
##  NOTES FOR CONTRIBUTIONS:
|
||||
|
||||
*  **DO NOT** add solutions that are similar to any existing solutions. If you think it is **_similar but better_**, then try to merge (or replace) the existing similar solution.
|
||||
* Add an explanation of your solution.
|
||||
* Categorize the solution in one of the following categories — **Basic**, **Intermediate** and **Advanced**. 
|
||||
</details>
|
||||
|
||||
@@ -1,39 +1,41 @@
|
||||
---
|
||||
title: Explore Differences Between the var and let Keywords
|
||||
---
|
||||
 Remember to use **`Read-Search-Ask`** if you get stuck. Try to pair program  and write your own code 
|
||||
|
||||
### Problem Explanation:
|
||||
# Explore Differences Between the var and let Keywords
|
||||
|
||||
---
|
||||
## Problem Explanation
|
||||
|
||||
We need to change each `var` to `let` in our code.
|
||||
|
||||
##  Hint: 1
|
||||
|
||||
---
|
||||
## Hints
|
||||
|
||||
### Hint 1
|
||||
|
||||
* Find each `var` and replace with `let`.
|
||||
|
||||
> _try to solve the problem now_
|
||||
|
||||
## Spoiler Alert!
|
||||
---
|
||||
## Solutions
|
||||
|
||||
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
**Solution ahead!**
|
||||
|
||||
##  Basic Code Solution:
|
||||
```javascript
|
||||
let catName;
|
||||
let quote;
|
||||
function catTalk() {
|
||||
"use strict";
|
||||
let catName;
|
||||
let quote;
|
||||
function catTalk() {
|
||||
"use strict";
|
||||
|
||||
catName = "Oliver";
|
||||
quote = catName + " says Meow!";
|
||||
|
||||
}
|
||||
catTalk();
|
||||
catName = "Oliver";
|
||||
quote = catName + " says Meow!";
|
||||
}
|
||||
catTalk();
|
||||
```
|
||||
|
||||
# Code Explanation:
|
||||
#### Code Explanation
|
||||
|
||||
By using `let` instead of `var` we can avoid overriding `catName` and `quote`.
|
||||
|
||||
@@ -41,5 +43,6 @@ By using `let` instead of `var` we can avoid overriding `catName` and `quote`.
|
||||
|
||||
- ["var" - *MDN JavaScript reference*](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var)
|
||||
- ["let" - *MDN JavaScript reference*](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let)
|
||||
</details>
|
||||
|
||||
|
||||
|
||||
@@ -1,21 +1,27 @@
|
||||
---
|
||||
title: Import a Default Export
|
||||
---
|
||||
## Import a Default Export
|
||||
# Import a Default Export
|
||||
|
||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||
Importing an export default is almost the same as importing a normal export; you just don't need the curly braces to define the name of what you're importing from the file!
|
||||
|
||||
## Hint 1:
|
||||
---
|
||||
## Hints
|
||||
|
||||
### Hint 1
|
||||
|
||||
Fill in the blanks: `import _ from "file-name"`. Plug in your module's name (which is `subtract`) into `_`, and put `"math-functions"` into `"file-name"`.
|
||||
|
||||
## Spoiler Alert - Solution Ahead!
|
||||
|
||||
## Solution:
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
```javascript
|
||||
"use strict";
|
||||
import subtract from "math_functions";
|
||||
subtract(7,4);
|
||||
subtract(7, 4);
|
||||
```
|
||||
|
||||
</details>
|
||||
@@ -1,11 +1,11 @@
|
||||
---
|
||||
title: ES6
|
||||
---
|
||||
## ES6
|
||||
# ES6
|
||||
|
||||
ES6 also known as ECMAScript6 or ES2015, is the latest widely accepted sets of rules and conventions laid out and standardized by Ecma International. Various new features such as constant value variables and arrow functions have been introduced in this new version. Major web browsers support some features of ES6. However, it is possible to use a transpiler to convert ES6 code into ES5, which is better supported on most browsers.
|
||||
|
||||
#### More Information:
|
||||
#### More Information:
|
||||
|
||||
1. [Wikipedia | Ecma International](https://en.wikipedia.org/wiki/Ecma_International)
|
||||
2. [Wikipedia | ECMAScript](https://en.wikipedia.org/wiki/ECMAScript)
|
||||
|
||||
@@ -1,45 +1,44 @@
|
||||
---
|
||||
title: Mutate an Array Declared with const
|
||||
---
|
||||
|
||||
|
||||
 Remember to use <a>**`Read-Search-Ask`**</a> if you get stuck. Try to pair program  and write your own code 
|
||||
# Mutate an Array Declared with const
|
||||
|
||||
### Problem Explanation:
|
||||
---
|
||||
## Problem Explanation
|
||||
|
||||
Reassign the values of the `const` variable `s` using various element assignment.
|
||||
|
||||
##  Hint: 1
|
||||
|
||||
---
|
||||
## Hints
|
||||
|
||||
### Hint 1
|
||||
|
||||
* You can change array values on `const` like you can with `var` or `let`.
|
||||
|
||||
> _try to solve the problem now_
|
||||
|
||||
##  Hint: 1
|
||||
### Hint 1
|
||||
|
||||
* To access array value use array[index]
|
||||
|
||||
> _try to solve the problem now_
|
||||
|
||||
## Spoiler Alert!
|
||||
---
|
||||
## Solutions
|
||||
|
||||
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
**Solution ahead!**
|
||||
|
||||
##  Basic Code Solution:
|
||||
```javascript
|
||||
const s = [5, 7, 2];
|
||||
function editInPlace() {
|
||||
"use strict";
|
||||
s[0] = 2;
|
||||
s[1] = 5;
|
||||
s[2] = 7;
|
||||
}
|
||||
editInPlace();
|
||||
const s = [5, 7, 2];
|
||||
function editInPlace() {
|
||||
"use strict";
|
||||
s[0] = 2;
|
||||
s[1] = 5;
|
||||
s[2] = 7;
|
||||
}
|
||||
editInPlace();
|
||||
```
|
||||
|
||||
# Code Explanation:
|
||||
#### Code Explanation
|
||||
|
||||
Trying to reassign a read-only `const` variable will throw an error, but by using various element assignment you can access and change the value of an array just like you would with `let` or `var`.
|
||||
|
||||
@@ -48,8 +47,4 @@ Trying to reassign a read-only `const` variable will throw an error, but by usin
|
||||
* <a href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const' target='_blank' rel='nofollow'>const</a>
|
||||
* <a href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array' target='_blank' rel='nofollow'>Array</a>
|
||||
|
||||
##  NOTES FOR CONTRIBUTIONS:
|
||||
|
||||
*  **DO NOT** add solutions that are similar to any existing solutions. If you think it is **_similar but better_**, then try to merge (or replace) the existing similar solution.
|
||||
* Add an explanation of your solution.
|
||||
* Categorize the solution in one of the following categories — **Basic**, **Intermediate** and **Advanced**. 
|
||||
</details>
|
||||
|
||||
@@ -1,53 +1,48 @@
|
||||
---
|
||||
title: Prevent Object Mutation
|
||||
---
|
||||
 Remember to use <a>**`Read-Search-Ask`**</a> if you get stuck. Try to pair program  and write your own code 
|
||||
|
||||
### Problem Explanation:
|
||||
# Prevent Object Mutation
|
||||
|
||||
_You need to freeze the `MATH_CONSTANTS` object so that no one is able to alter the value of `PI`, add, or delete properties ._
|
||||
|
||||
##  Hint: 1
|
||||
---
|
||||
## Hints
|
||||
|
||||
### Hint 1
|
||||
|
||||
* _Use `Object.freeze()` to prevent mathematical constants from changing._
|
||||
|
||||
> _try to solve the problem now_
|
||||
|
||||
## Spoiler Alert!
|
||||
|
||||
|
||||
---
|
||||
## Solutions
|
||||
|
||||
**Solution Ahead!**
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
##  Basic code solution:
|
||||
```javascript
|
||||
function freezeObj() {
|
||||
"use strict";
|
||||
const MATH_CONSTANTS = {
|
||||
PI: 3.14
|
||||
};
|
||||
function freezeObj() {
|
||||
"use strict";
|
||||
const MATH_CONSTANTS = {
|
||||
PI: 3.14
|
||||
};
|
||||
|
||||
Object.freeze(MATH_CONSTANTS);
|
||||
|
||||
try {
|
||||
MATH_CONSTANTS.PI = 99;
|
||||
} catch(ex) {
|
||||
console.log(ex);
|
||||
}
|
||||
return MATH_CONSTANTS.PI;
|
||||
}
|
||||
|
||||
const PI = freezeObj();
|
||||
Object.freeze(MATH_CONSTANTS);
|
||||
|
||||
try {
|
||||
MATH_CONSTANTS.PI = 99;
|
||||
} catch (ex) {
|
||||
console.log(ex);
|
||||
}
|
||||
return MATH_CONSTANTS.PI;
|
||||
}
|
||||
|
||||
const PI = freezeObj();
|
||||
```
|
||||
# Code Explanation:
|
||||
#### Code Explanation
|
||||
|
||||
By using Object.freeze() on `MATH_CONSTANTS` we can avoid manipulating it.
|
||||
* By using Object.freeze() on `MATH_CONSTANTS` we can avoid manipulating it.
|
||||
|
||||
### Resources
|
||||
#### Relevant Links
|
||||
- ["Object.freeze()" - *MDN Javascript reference*](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze)
|
||||
</details>
|
||||
|
||||
##  NOTES FOR CONTRIBUTIONS:
|
||||
|
||||
*  **DO NOT** add solutions that are similar to any existing solutions. If you think it is **_similar but better_**, then try to merge (or replace) the existing similar solution.
|
||||
* Add an explanation of your solution.
|
||||
* Categorize the solution in one of the following categories — **Basic**, **Intermediate** and **Advanced**. 
|
||||
|
||||
@@ -1,43 +1,37 @@
|
||||
---
|
||||
title: Set Default Parameters for Your Functions
|
||||
---
|
||||
## Set Default Parameters for Your Functions
|
||||
|
||||
# Set Default Parameters for Your Functions
|
||||
|
||||
Remember to use Read-Search-Ask if you get stuck. Try to pair program and write your own code.
|
||||
|
||||
|
||||
### Problem Explanation:
|
||||
```javascript
|
||||
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
|
||||
```
|
||||
---
|
||||
## Problem Explanation
|
||||
|
||||
We'll be modifying the increment function so that the **number** parameter is incremented by 1 by default, by setting **value** to 1 if a value for **value** is not passed to the increment function.
|
||||
|
||||
### Hint: 1
|
||||
|
||||
---
|
||||
## Hints
|
||||
|
||||
### Hint 1
|
||||
|
||||
Let's identify where the parameter **value** is in JS function
|
||||
|
||||
try to solve the problem now
|
||||
|
||||
### Hint: 2
|
||||
### Hint 2
|
||||
|
||||
Set **value** equal to something so that it is that value by default
|
||||
|
||||
try to solve the problem now
|
||||
|
||||
### Spoiler Alert!
|
||||
|
||||
Solution ahead!
|
||||
|
||||
## Basic Code Solution:
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
```javascript
|
||||
const increment = (function() {
|
||||
"use strict";
|
||||
@@ -49,7 +43,7 @@ console.log(increment(5, 2)); // returns 7
|
||||
console.log(increment(5)); // returns NaN
|
||||
```
|
||||
|
||||
### Code Explanation
|
||||
#### Code Explanation
|
||||
|
||||
* This section is pretty straightforward. Pass this section by setting the **value** parameter equal to 1. When the function comes across test cases where **value** has not been passed anything, then **value** will be assigned one by default.
|
||||
|
||||
@@ -57,8 +51,6 @@ Relevant Links:
|
||||
|
||||
[JavaScript default parameters](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters)
|
||||
|
||||
## NOTES FOR CONTRIBUTIONS:
|
||||
|
||||
* DO NOT add solutions that are similar to any existing solutions. If you think it is similar but better, then try to merge (or replace) the existing similar solution.
|
||||
* Add an explanation of your solution.
|
||||
* Categorize the solution in one of the following categories — Basic, Intermediate and Advanced.
|
||||
</details>
|
||||
|
||||
@@ -1,23 +1,33 @@
|
||||
---
|
||||
title: Understand the Differences Between import and require
|
||||
---
|
||||
## Understand the Differences Between import and require
|
||||
# Understand the Differences Between import and require
|
||||
|
||||
---
|
||||
## Problem Explanation
|
||||
|
||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||
Let's clarify: `require()` loads the entire file and its components (functions, variables), while `import _ from` allows you to hand-pick what components you want.
|
||||
|
||||
In this lesson, you are tasked at importing the function `capitalizeStrings()`, which comes from the file `"string-functions"`.
|
||||
|
||||
## Hint 1:
|
||||
|
||||
---
|
||||
## Hints
|
||||
|
||||
### Hint 1
|
||||
|
||||
Fill in the blanks: `import { function_name } from "file_name"`. Your function name is `capitalizeStrings`, and your file name is `"string-functions"`.
|
||||
|
||||
## Spoiler Alert - Solution Ahead!
|
||||
|
||||
## Solution
|
||||
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
```javascript
|
||||
"use strict";
|
||||
import { capitalizeString } from "string-functions";
|
||||
capitalizeString("hello!");
|
||||
```
|
||||
</details>
|
||||
|
||||
@@ -1,20 +1,30 @@
|
||||
---
|
||||
title: Use * to Import Everything from a File
|
||||
---
|
||||
## Use * to Import Everything from a File
|
||||
# Use * to Import Everything from a File
|
||||
|
||||
---
|
||||
## Problem Explanation
|
||||
|
||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||
If you want to import everything possible from a file, then you use the `import * as _ from` syntax, provided by ES6. That's exactly what you're tasked at doing in this challenge!
|
||||
|
||||
## Hint 1:
|
||||
|
||||
---
|
||||
## Hints
|
||||
|
||||
### Hint 1
|
||||
|
||||
Fill in the blanks: `import * as objName from "file-name"`. You can be creative with your `objName`, but your file name should be `capitalize_strings`.
|
||||
|
||||
## Spoiler Alert - Solution Ahead!
|
||||
|
||||
## Solution:
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
```javascript
|
||||
"use strict";
|
||||
import * as str from "capitalize_strings";
|
||||
```
|
||||
|
||||
</details>
|
||||
@@ -1,24 +1,31 @@
|
||||
---
|
||||
title: Use Arrow Functions to Write Concise Anonymous Functions
|
||||
---
|
||||
## Use Arrow Functions to Write Concise Anonymous Functions
|
||||
# Use Arrow Functions to Write Concise Anonymous Functions
|
||||
|
||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||
---
|
||||
## Problem Explanation
|
||||
Again, ES6 is all about making JavaScript more elegant, and for some, more readable.
|
||||
|
||||
Anonymous functions, as stated, can be created when you are sure that the function will not be called by name anywhere else.
|
||||
|
||||
## Hint 1:
|
||||
|
||||
---
|
||||
## Hints
|
||||
|
||||
### Hint 1
|
||||
|
||||
Get rid of the `function` key word, and plug in this `=>` arrow.
|
||||
|
||||
## Hint 2:
|
||||
### Hint 2
|
||||
|
||||
Did you get rid of the `var` keyword?
|
||||
|
||||
## Spoiler Alert - Solution Ahead!
|
||||
|
||||
## Solution
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
```javascript
|
||||
const magic = () => {
|
||||
@@ -28,3 +35,4 @@ const magic = () => {
|
||||
```
|
||||
|
||||
As long as you got rid of the `var` keyword, you're good.
|
||||
</details>
|
||||
|
||||
@@ -1,43 +1,48 @@
|
||||
---
|
||||
title: Use class Syntax to Define a Constructor Function
|
||||
---
|
||||
## Use class Syntax to Define a Constructor Function
|
||||
# Use class Syntax to Define a Constructor Function
|
||||
|
||||
---
|
||||
## Problem Explanation
|
||||
|
||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||
In this lesson, you are defining the Vegetable object using class syntax.
|
||||
|
||||
## Hint 1:
|
||||
|
||||
---
|
||||
## Hints
|
||||
|
||||
### Hint 1
|
||||
|
||||
Create the class called `Vegetable`. It will contain the necessary details about the `Vegetable` object.
|
||||
|
||||
## Hint 2:
|
||||
### Hint 2
|
||||
|
||||
Put a constructor with a parameter called `name`, and set it to `this.name`.
|
||||
|
||||
## Spoiler Alert - Solution Ahead!
|
||||
|
||||
## Solution:
|
||||
---
|
||||
## Solutions
|
||||
|
||||
Spoiler Warning: here is a basic solution to this challenge in case you're stuck.
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
```javascript
|
||||
function makeClass() {
|
||||
"use strict";
|
||||
/* Alter code below this line */
|
||||
|
||||
class Vegetable {
|
||||
constructor(name){
|
||||
this.name = name;
|
||||
|
||||
}
|
||||
}
|
||||
class Vegetable {
|
||||
constructor(name) {
|
||||
this.name = name;
|
||||
}
|
||||
}
|
||||
|
||||
/* Alter code above this line */
|
||||
return Vegetable;
|
||||
}
|
||||
const Vegetable = makeClass();
|
||||
const carrot = new Vegetable('carrot');
|
||||
const carrot = new Vegetable("carrot");
|
||||
console.log(carrot.name); // => should be 'carrot'
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
@@ -1,13 +1,28 @@
|
||||
---
|
||||
title: Use Destructuring Assignment to Assign Variables from Arrays
|
||||
---
|
||||
## Use Destructuring Assignment to Assign Variables from Arrays
|
||||
# Use Destructuring Assignment to Assign Variables from Arrays
|
||||
|
||||
|
||||
---
|
||||
## Hints
|
||||
|
||||
### Hint # 1
|
||||
We have to take some precaution in this case.
|
||||
|
||||
1. No need of const [b,a] as it will keep the effect of assignment local.
|
||||
|
||||
2. const [b,a] = [a,b] will result in the value of a,b as undefined(simple assignment rule left to right).
|
||||
|
||||
Hence the solution to this problem is
|
||||
[b,a] = [a,b]
|
||||
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
```javascript
|
||||
let a = 8,
|
||||
b = 6;
|
||||
[a, b] = [b, a];
|
||||
```
|
||||
</details>
|
||||
@@ -1,16 +1,27 @@
|
||||
---
|
||||
title: Use Destructuring Assignment to Assign Variables from Nested Objects
|
||||
---
|
||||
## Use Destructuring Assignment to Assign Variables from Nested Objects
|
||||
# Use Destructuring Assignment to Assign Variables from Nested Objects
|
||||
|
||||
|
||||
---
|
||||
## Hints
|
||||
|
||||
### Hint 1
|
||||
Tip to pass final test: *nested destructuring was used*
|
||||
|
||||
The test wants you to obtain `max` and `max` only. If you destructure your constant to contain both `max` and `min`, the test will fail.
|
||||
|
||||
## Spoiler!
|
||||
|
||||
Here is the code solution:
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
```javascript
|
||||
const { tomorrow: { max: maxOfTomorrow } } = forecast;
|
||||
const {
|
||||
tomorrow: { max: maxOfTomorrow }
|
||||
} = forecast;
|
||||
```
|
||||
|
||||
</details>
|
||||
@@ -2,19 +2,11 @@
|
||||
title: Use Destructuring Assignment to Assign Variables from Objects
|
||||
---
|
||||
|
||||
## Use Destructuring Assignment to Assign Variables from Objects
|
||||
# Use Destructuring Assignment to Assign Variables from Objects
|
||||
|
||||
# This challenge requires some intuition about string objects in javascript.
|
||||
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/mathematics/quadratic-equations/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
|
||||
|
||||
When you create a string object it is based on the following <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/prototype">string prototype</a>.
|
||||
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
|
||||
|
||||
Thus, each string has a length property; genericString = {length: 13}. (This is the only adopted property from the String.prototype.)
|
||||
|
||||
# Reassign properties using deconstruction.
|
||||
```javascript
|
||||
var basicObj = {x: 40};
|
||||
//To reassign 'get the value of the x property of basicObj and place its value into bigX' in ES6:
|
||||
const { x: bigX } = basicObj;
|
||||
console.log(bigX) // ans = 40
|
||||
```
|
||||
Place the value of the length property of 'str' into len.
|
||||
#### More Information:
|
||||
<!-- Please add any articles you think might be helpful to read before writing the article -->
|
||||
|
||||
@@ -1,36 +1,46 @@
|
||||
---
|
||||
title: Use Destructuring Assignment to Pass an Object as a Function's Parameters
|
||||
---
|
||||
## Use Destructuring Assignment to Pass an Object as a Function's Parameters
|
||||
# Use Destructuring Assignment to Pass an Object as a Function's Parameters
|
||||
|
||||
---
|
||||
## Problem Explanation
|
||||
|
||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||
You could pass the entire object, and then pick the specific attributes you want by using the `.` operator. But ES6 offers a more elegant option!
|
||||
|
||||
## Hint 1:
|
||||
|
||||
---
|
||||
## Hints
|
||||
|
||||
### Hint 1
|
||||
|
||||
Get rid of the `stats`, and see if you can destructure it. We need the `max` and `min` of `stats`.
|
||||
|
||||
## Spoiler Warning - Solutions Ahead!
|
||||
|
||||
## Solution 1:
|
||||
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
```javascript
|
||||
const half = (function() {
|
||||
"use strict"; // do not change this line
|
||||
|
||||
// change code below this line
|
||||
return function half({max, min}) {
|
||||
return function half({ max, min }) {
|
||||
// use function argument destructuring
|
||||
return (max + min) / 2.0;
|
||||
};
|
||||
// change code above this line
|
||||
|
||||
})();
|
||||
```
|
||||
|
||||
Notice that we are destructuring `stats` to pass two of its attributes - `max` and `min` - to the function. Don't forget to the modify the second return statement. Change `stats.max` to just `max`, and change `stats.min` to just `min`.
|
||||
</details>
|
||||
|
||||
## Solution 2:
|
||||
|
||||
<details><summary>Solution 2 (Click to Show/Hide)</summary>
|
||||
|
||||
Here is another solution that works. Not much of a difference, other than the fact that the function doesn't have a name.
|
||||
|
||||
@@ -39,11 +49,11 @@ const half = (function() {
|
||||
"use strict"; // do not change this line
|
||||
|
||||
// change code below this line
|
||||
return (({max, min}) => {
|
||||
return ({ max, min }) => {
|
||||
// use function argument destructuring
|
||||
return (max + min) / 2.0;
|
||||
});
|
||||
};
|
||||
// change code above this line
|
||||
|
||||
})();
|
||||
```
|
||||
</details>
|
||||
|
||||
@@ -1,18 +1,25 @@
|
||||
---
|
||||
title: Use Destructuring Assignment with the Rest Parameter to Reassign Array Elements
|
||||
---
|
||||
## Use Destructuring Assignment with the Rest Parameter to Reassign Array Elements
|
||||
# Use Destructuring Assignment with the Rest Parameter to Reassign Array Elements
|
||||
|
||||
---
|
||||
## Problem Explanation
|
||||
Remember that the rest parameter allows for variable numbers of arguments. In this challenge, you have to get rid of the first two elements of an array.
|
||||
|
||||
## Hint 1:
|
||||
|
||||
---
|
||||
## Hints
|
||||
|
||||
### Hint 1
|
||||
|
||||
Assign the first two elements to two random variables.
|
||||
|
||||
## Hint 2:
|
||||
### Hint 2
|
||||
|
||||
Set the remaining part of the array to `...arr`.
|
||||
|
||||
## Hint 3:
|
||||
### Hint 3
|
||||
|
||||
Use destructuring to create the `arr` variable:
|
||||
|
||||
@@ -26,7 +33,7 @@ function removeFirstTwo(list) {
|
||||
}
|
||||
```
|
||||
|
||||
## Hint 4:
|
||||
### Hint 4:
|
||||
|
||||
Spread the `list` parameter values into `arr`.
|
||||
|
||||
@@ -38,31 +45,18 @@ function removeFirstTwo(list) {
|
||||
// change code above this line
|
||||
return arr;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
## Spoiler Alert - Solution Ahead!
|
||||
You can use random variables to omit the first two values:
|
||||
|
||||
```javascript
|
||||
const source = [1,2,3,4,5,6,7,8,9,10];
|
||||
function removeFirstTwo(list) {
|
||||
"use strict";
|
||||
// change code below this line
|
||||
const [a, b, ...arr] = list;
|
||||
// change code above 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];
|
||||
```
|
||||
## Solution 2:
|
||||
|
||||
You can also exclude the first two elements of the `arr` array using `,,`.
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
```javascript
|
||||
const source = [1,2,3,4,5,6,7,8,9,10];
|
||||
const source = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
|
||||
function removeFirstTwo(list) {
|
||||
"use strict";
|
||||
// change code below this line
|
||||
@@ -75,6 +69,11 @@ 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];
|
||||
```
|
||||
|
||||
### Resources
|
||||
You can also exclude the first two elements of the `arr` array using `,,`.
|
||||
|
||||
|
||||
#### Relevant Links
|
||||
|
||||
- ["Destructuring assignment" - *MDN JavaScript reference*](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)
|
||||
|
||||
</details>
|
||||
@@ -1,23 +1,31 @@
|
||||
---
|
||||
title: Use export to Reuse a Code Block
|
||||
---
|
||||
## Use export to Reuse a Code Block
|
||||
# Use export to Reuse a Code Block
|
||||
|
||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||
---
|
||||
## Problem Explanation
|
||||
We learned how to import stuff from another file. But there's a catch. You can only import files that are **exported** from that other file.
|
||||
|
||||
Your task here is to export `foo` and `bar`.
|
||||
|
||||
## Hint 1:
|
||||
|
||||
---
|
||||
## Hints
|
||||
|
||||
### Hint 1
|
||||
|
||||
Just add export in front of them!
|
||||
|
||||
## Spoiler Alert - Solution Ahead!
|
||||
|
||||
## Solution
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
```javascript
|
||||
"use strict";
|
||||
export const foo = "bar";
|
||||
export const bar = "foo";
|
||||
```
|
||||
</details>
|
||||
|
||||
@@ -1,49 +1,57 @@
|
||||
---
|
||||
title: Use getters and setters to Control Access to an Object
|
||||
---
|
||||
## Use getters and setters to Control Access to an Object
|
||||
# Use getters and setters to Control Access to an Object
|
||||
|
||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||
---
|
||||
## Problem Explanation
|
||||
Getters and setters are critical parts of a class/object. They allow you to control their attributes from the outside. They will become more prominent when you get started with the Object-Oriented Programming unit (coming up!). For now, this exercise shows you how to manipulate them with ES6.
|
||||
|
||||
## Hint 1:
|
||||
|
||||
---
|
||||
## Hints
|
||||
|
||||
### Hint 1
|
||||
|
||||
Create the class, Thermostat. You're going to put your constructor, getter, and setter in here.
|
||||
|
||||
## Hint 2:
|
||||
### Hint 2
|
||||
|
||||
Give the constructor a parameter (which you can name anything you want). Set the parameter to an attribute of the same name. Remember, you are initially setting things in Fahrenheit temperature.
|
||||
|
||||
## Hint 3:
|
||||
### Hint 3
|
||||
|
||||
Create a get method that converts the Fahrenheit attribute to Celsius. Use the formula given to you.
|
||||
|
||||
## Hint 4:
|
||||
### Hint 4:
|
||||
|
||||
Create a set method of the same name as the get method. It should have a parameter that accepts celsius temperature. Convert it to fahrenheit, and set it to the attribute.
|
||||
|
||||
## Spoiler Alert - Solution Ahead!
|
||||
|
||||
## Solution
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
```javascript
|
||||
function makeClass() {
|
||||
"use strict";
|
||||
/* Alter code below this line */
|
||||
|
||||
|
||||
class Thermostat {
|
||||
constructor(fahrenheit) {
|
||||
this.fahrenheit = fahrenheit;
|
||||
}
|
||||
get temperature() {
|
||||
return 5 / 9 * (this.fahrenheit - 32);
|
||||
return (5 / 9) * (this.fahrenheit - 32);
|
||||
}
|
||||
set temperature(celsius) {
|
||||
this.fahrenheit = celsius * 9.0 / 5 + 32;
|
||||
this.fahrenheit = (celsius * 9.0) / 5 + 32;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Alter code above this line */
|
||||
return Thermostat;
|
||||
}
|
||||
```
|
||||
</details>
|
||||
|
||||
@@ -1,42 +1,39 @@
|
||||
---
|
||||
title: Use the Rest Parameter with Function Parameters
|
||||
---
|
||||
## Use the Rest Parameter with Function Parameters
|
||||
# Use the Rest Parameter with Function Parameters
|
||||
|
||||
### Rest parameter explanation
|
||||
[Mozilla Developer Network](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters "Mozilla Developer Network")
|
||||
#### Relevant LInks
|
||||
|
||||
### Spread operator compared to rest parameter
|
||||
[Stack overflow](https://stackoverflow.com/questions/33898512/spread-operator-vs-rest-parameter-in-es2015-es6 "Stack Overflow")
|
||||
- [Rest parameter explanation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters "Mozilla Developer Network")
|
||||
|
||||
### Video explaining spread and rest
|
||||
- [Spread operator compared to rest parameter](https://stackoverflow.com/questions/33898512/spread-operator-vs-rest-parameter-in-es2015-es6 "Stack Overflow")
|
||||
|
||||
<a href="http://www.youtube.com/watch?feature=player_embedded&v=iLx4ma8ZqvQ
|
||||
- <a href="http://www.youtube.com/watch?feature=player_embedded&v=iLx4ma8ZqvQ
|
||||
" target="_blank"><img src="http://img.youtube.com/vi/iLx4ma8ZqvQ/0.jpg"
|
||||
alt="Image of youtube video link spread and rest parameter " width="240" height="180" border="10" /></a>
|
||||
alt="Image of youtube video link spread and rest parameter " width="240" height="180" border="10" />Video explaining spread and rest</a>
|
||||
|
||||
### Example
|
||||
This code
|
||||
|
||||
```javascript
|
||||
const product = (function() {
|
||||
"use strict";
|
||||
return function product(n1, n2, n3) {
|
||||
const args = [n1, n2, n3];
|
||||
return args.reduce((a, b) => a * b, 1);
|
||||
};
|
||||
"use strict";
|
||||
return function product(n1, n2, n3) {
|
||||
const args = [n1, n2, n3];
|
||||
return args.reduce((a, b) => a * b, 1);
|
||||
};
|
||||
})();
|
||||
console.log(product(2, 4, 6));//48
|
||||
console.log(product(2, 4, 6)); //48
|
||||
```
|
||||
|
||||
Can be written as such
|
||||
```javascript
|
||||
const product = (function() {
|
||||
"use strict";
|
||||
return function product(...n) {
|
||||
return n.reduce((a, b) => a * b, 1);
|
||||
};
|
||||
"use strict";
|
||||
return function product(...n) {
|
||||
return n.reduce((a, b) => a * b, 1);
|
||||
};
|
||||
})();
|
||||
console.log(product(2, 4, 6));//48
|
||||
console.log(product(2, 4, 6)); //48
|
||||
```
|
||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||
|
||||
@@ -1,47 +1,46 @@
|
||||
---
|
||||
title: Use the Spread Operator to Evaluate Arrays In-Place
|
||||
---
|
||||
## Use the Spread Operator to Evaluate Arrays In-Place
|
||||
# Use the Spread Operator to Evaluate Arrays In-Place
|
||||
|
||||
### Spread Operator explained
|
||||
[Mozilla Developer Network Spread Operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax "Mozilla Developer Network")
|
||||
#### Relevant Links
|
||||
|
||||
### Spread Operator compared to Rest Parameter
|
||||
[Stack Overflow](https://stackoverflow.com/questions/33898512/spread-operator-vs-rest-parameter-in-es2015-es6 "Stack Overflow")
|
||||
* [Spread Operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax "Mozilla Developer Network")
|
||||
|
||||
### Video Explaining Spread Operator and Rest Parameter
|
||||
<a href="http://www.youtube.com/watch?feature=player_embedded&v=iLx4ma8ZqvQ
|
||||
* [Spread Operator compared to Rest Parameter](https://stackoverflow.com/questions/33898512/spread-operator-vs-rest-parameter-in-es2015-es6 "Stack Overflow")
|
||||
|
||||
* <a href="http://www.youtube.com/watch?feature=player_embedded&v=iLx4ma8ZqvQ
|
||||
" target="_blank"><img src="http://img.youtube.com/vi/iLx4ma8ZqvQ/0.jpg"
|
||||
alt="Image of youtube video link spread and rest parameter " width="240" height="180" border="10" /></a>
|
||||
alt="Image of youtube video link spread and rest parameter " width="240" height="180" border="10" />ideo Explaining Spread Operator and Rest Parameter</a>
|
||||
|
||||
### Information About apply() Method
|
||||
[Mozilla Developer Network Apply Method](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply "Mozilla Developer Network")
|
||||
* [Apply Method](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply "Mozilla Developer Network")
|
||||
|
||||
### 3 Quick Examples
|
||||
Examples
|
||||
```javascript
|
||||
let numbers = [-12, 160, 0, -3, 51];
|
||||
let minNum = Math.min.apply(null, numbers);
|
||||
console.log(minNum);//-12
|
||||
console.log(minNum); //-12
|
||||
```
|
||||
|
||||
```javascript
|
||||
let numbers = [-12, 160, 0, -3, 51];
|
||||
let minNum = Math.min(numbers);
|
||||
console.log(minNum);//NaN
|
||||
console.log(minNum); //NaN
|
||||
```
|
||||
|
||||
```javascript
|
||||
let numbers = [-12, 160, 0, -3, 51];
|
||||
let minNum = Math.min(...numbers);
|
||||
console.log(minNum);//-12
|
||||
console.log(minNum); //-12
|
||||
```
|
||||
# SPOILER WARNING: SOLUTION AHEAD
|
||||
### The Solution
|
||||
|
||||
> Unpacking the arr1 using the spread operator and then copying those values to arr2
|
||||
|
||||
|
||||
---
|
||||
## Solutions
|
||||
|
||||
```javascript
|
||||
const arr1 = ['JAN', 'FEB', 'MAR', 'APR', 'MAY'];
|
||||
const arr1 = ["JAN", "FEB", "MAR", "APR", "MAY"];
|
||||
let arr2;
|
||||
(function() {
|
||||
"use strict";
|
||||
@@ -49,4 +48,6 @@ let arr2;
|
||||
})();
|
||||
console.log(arr2);
|
||||
```
|
||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||
|
||||
#### Code Explanation
|
||||
* Unpacking the arr1 using the spread operator and then copying those values to arr2
|
||||
@@ -1,24 +1,32 @@
|
||||
---
|
||||
title: Write Arrow Functions with Parameters
|
||||
---
|
||||
## Write Arrow Functions with Parameters
|
||||
# Write Arrow Functions with Parameters
|
||||
|
||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||
---
|
||||
## Problem Explanation
|
||||
Here is a [cool resource about anonymous functions in JavaScript](http://helephant.com/2008/08/23/javascript-anonymous-functions/), in case you are still wondering what they are, and their role.
|
||||
|
||||
Now, you are tasked at putting parameters inside arrow functions.
|
||||
|
||||
## Hint 1:
|
||||
|
||||
---
|
||||
## Hints
|
||||
|
||||
### Hint 1
|
||||
|
||||
Get rid of the `function` keyword. Put the arrow operator.
|
||||
|
||||
## Hint 2:
|
||||
### Hint 2
|
||||
|
||||
Make sure you changed the `var` to a `const`.
|
||||
|
||||
## Spoiler Warning - Solution Ahead!
|
||||
|
||||
## Solution:
|
||||
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
```javascript
|
||||
const myConcat = (arr1, arr2) => {
|
||||
@@ -28,3 +36,5 @@ const myConcat = (arr1, arr2) => {
|
||||
// test your code
|
||||
console.log(myConcat([1, 2], [3, 4, 5]));
|
||||
```
|
||||
|
||||
</details>
|
||||
@@ -1,18 +1,25 @@
|
||||
---
|
||||
title: Write Concise Declarative Functions with ES6
|
||||
---
|
||||
## Write Concise Declarative Functions with ES6
|
||||
# Write Concise Declarative Functions with ES6
|
||||
|
||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||
---
|
||||
## Problem Explanation
|
||||
ES6 makes it easy, and fancy, to write declarative functions! In this lesson, you are tasked at changing the function to follow ES6 standards.
|
||||
|
||||
## Hint 1:
|
||||
|
||||
---
|
||||
## Hints
|
||||
|
||||
### Hint 1
|
||||
|
||||
Get rid of the `function` keyword.
|
||||
|
||||
## Spoiler Alert - Solution Ahead!
|
||||
|
||||
## Solution
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
```javascript
|
||||
const bicycle = {
|
||||
@@ -23,3 +30,5 @@ const bicycle = {
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
</details>
|
||||
@@ -1,18 +1,26 @@
|
||||
---
|
||||
title: Write Concise Object Literal Declarations Using Simple Fields
|
||||
---
|
||||
## Write Concise Object Literal Declarations Using Simple Fields
|
||||
# Write Concise Object Literal Declarations Using Simple Fields
|
||||
|
||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||
---
|
||||
## Problem Explanation
|
||||
Here, we are tasked at returning an object that accepts the function's parameters as its attributes.
|
||||
|
||||
# Hint 1:
|
||||
|
||||
---
|
||||
## Hints
|
||||
|
||||
### Hint 1
|
||||
|
||||
Get rid of the colons, and the duplicate words.
|
||||
|
||||
## Spoiler Alert - Solution Ahead
|
||||
|
||||
## Solution
|
||||
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
```javascript
|
||||
const createPerson = (name, age, gender) => {
|
||||
@@ -26,3 +34,4 @@ const createPerson = (name, age, gender) => {
|
||||
// change code above this line
|
||||
};
|
||||
```
|
||||
</details>
|
||||
|
||||
Reference in New Issue
Block a user