fix(guide): simplify directory structure

This commit is contained in:
Mrugesh Mohapatra
2018-10-16 21:26:13 +05:30
parent f989c28c52
commit da0df12ab7
35752 changed files with 0 additions and 317652 deletions

View File

@ -0,0 +1,58 @@
---
title: Compare Scopes of the var and let Keywords
---
![](//discourse-user-assets.s3.amazonaws.com/original/2X/3/3c8584a085a0deaea66b3400e6321eeadab552a2.jpg)
![:triangular_flag_on_post:](https://forum.freecodecamp.com/images/emoji/emoji_one/triangular_flag_on_post.png?v=3 ":triangular_flag_on_post:") Remember to use <a>**`Read-Search-Ask`**</a> if you get stuck. Try to pair program ![:busts_in_silhouette:](https://forum.freecodecamp.com/images/emoji/emoji_one/busts_in_silhouette.png?v=3 ":busts_in_silhouette:") and write your own code ![:pencil:](https://forum.freecodecamp.com/images/emoji/emoji_one/pencil.png?v=3 ":pencil:")
### Problem Explanation:
We need to change `var` to `let` in our function scope and add `let` to our block scope.
## ![:speech_balloon:](https://forum.freecodecamp.com/images/emoji/emoji_one/speech_balloon.png?v=3 ":speech_balloon:") Hint: 1
* Find `var` and replace with `let`.
> _try to solve the problem now_
* Add `let` to the variable `i` inside of your if statement.
> _try to solve the problem now_
## Spoiler Alert!
![warning sign](//discourse-user-assets.s3.amazonaws.com/original/2X/2/2d6c412a50797771301e7ceabd554cef4edcd74d.gif)
**Solution ahead!**
## ![:beginner:](https://forum.freecodecamp.com/images/emoji/emoji_one/beginner.png?v=3 ":beginner:") 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;
}
```
![:rocket:](https://forum.freecodecamp.com/images/emoji/emoji_one/rocket.png?v=3 ":rocket:") <a href='https://codepen.io/dylantyates/pen/wxwxRd' target='_blank' rel='nofollow'>Run Code</a>
# Code Explanation:
By using `let` you can declare variables in relation to their scope.
#### Relevant Links
* <a href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let' target='_blank' rel='nofollow'>let</a>
## ![:clipboard:](https://forum.freecodecamp.com/images/emoji/emoji_one/clipboard.png?v=3 ":clipboard:") NOTES FOR CONTRIBUTIONS:
* ![:warning:](https://forum.freecodecamp.com/images/emoji/emoji_one/warning.png?v=3 ":warning:") **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**. ![:traffic_light:](https://forum.freecodecamp.com/images/emoji/emoji_one/traffic_light.png?v=3 ":traffic_light:")
* Please add your username only if you have added any **relevant main contents**. (![:warning:](https://forum.freecodecamp.com/images/emoji/emoji_one/warning.png?v=3 ":warning:") **_DO NOT_** _remove any existing usernames_)
> See ![:point_right:](https://forum.freecodecamp.com/images/emoji/emoji_one/point_right.png?v=3 ":point_right:") <a href='http://forum.freecodecamp.com/t/algorithm-article-template/14272' target='_blank' rel='nofollow'>**`Wiki Challenge Solution Template`**</a> for reference.

View File

@ -0,0 +1,20 @@
---
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 -->
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:
Just add `export default` to the beginning of the function.
## Spoiler Alert - Solution Ahead!
## Solution:
```javascript
"use strict";
export default function subtract(x,y) {return x - y;}
```

View File

@ -0,0 +1,39 @@
---
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 -->
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.
![:triangular_flag_on_post:](https://forum.freecodecamp.com/images/emoji/emoji_one/triangular_flag_on_post.png?v=3 ":triangular_flag_on_post:") 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
* Use `map()` function to apply the template literals on all of the `arr` elements
> _try to solve the problem now_
## 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_
## Spoiler Alert!
![warning sign](//discourse-user-assets.s3.amazonaws.com/original/2X/2/2d6c412a50797771301e7ceabd554cef4edcd74d.gif)
**Solution ahead!**
```const resultDisplayArray = arr.map(item => `<li class="text-warning">${item}</li>`);```
## No map() solution
Despite it's 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>`,
`<li class="text-warning">${arr[1]}</li>`
,`<li class="text-warning">${arr[2]}</li>`];```

View File

@ -0,0 +1,65 @@
---
title: Declare a Read-Only Variable with the const Keyword
---
![](//discourse-user-assets.s3.amazonaws.com/original/2X/3/3c8584a085a0deaea66b3400e6321eeadab552a2.jpg)
![:triangular_flag_on_post:](https://forum.freecodecamp.com/images/emoji/emoji_one/triangular_flag_on_post.png?v=3 ":triangular_flag_on_post:") Remember to use <a>**`Read-Search-Ask`**</a> if you get stuck. Try to pair program ![:busts_in_silhouette:](https://forum.freecodecamp.com/images/emoji/emoji_one/busts_in_silhouette.png?v=3 ":busts_in_silhouette:") and write your own code ![:pencil:](https://forum.freecodecamp.com/images/emoji/emoji_one/pencil.png?v=3 ":pencil:")
### Problem Explanation:
Change all the variables to `let` or `const` and rename `sentence`.
## ![:speech_balloon:](https://forum.freecodecamp.com/images/emoji/emoji_one/speech_balloon.png?v=3 ":speech_balloon:") Hint: 1
* Replace `var` for string with read-only `const`.
> _try to solve the problem now_
## ![:speech_balloon:](https://forum.freecodecamp.com/images/emoji/emoji_one/speech_balloon.png?v=3 ":speech_balloon:") Hint: 1
* Replace `var` in `for` loop to `let`.
> _try to solve the problem now_
## ![:speech_balloon:](https://forum.freecodecamp.com/images/emoji/emoji_one/speech_balloon.png?v=3 ":speech_balloon:") Hint: 1
* Common convention is to name `const` variables with ALL CAPS.
> _try to solve the problem now_
## Spoiler Alert!
![warning sign](//discourse-user-assets.s3.amazonaws.com/original/2X/2/2d6c412a50797771301e7ceabd554cef4edcd74d.gif)
**Solution ahead!**
## ![:beginner:](https://forum.freecodecamp.com/images/emoji/emoji_one/beginner.png?v=3 ":beginner:") 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");
```
![:rocket:](https://forum.freecodecamp.com/images/emoji/emoji_one/rocket.png?v=3 ":rocket:") <a href='https://codepen.io/dylantyates/pen/OwVxyx' target='_blank' rel='nofollow'>Run Code</a>
# 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.
#### Relevant Links
* <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>
## ![:clipboard:](https://forum.freecodecamp.com/images/emoji/emoji_one/clipboard.png?v=3 ":clipboard:") NOTES FOR CONTRIBUTIONS:
* ![:warning:](https://forum.freecodecamp.com/images/emoji/emoji_one/warning.png?v=3 ":warning:") **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**. ![:traffic_light:](https://forum.freecodecamp.com/images/emoji/emoji_one/traffic_light.png?v=3 ":traffic_light:")
* Please add your username only if you have added any **relevant main contents**. (![:warning:](https://forum.freecodecamp.com/images/emoji/emoji_one/warning.png?v=3 ":warning:") **_DO NOT_** _remove any existing usernames_)
> See ![:point_right:](https://forum.freecodecamp.com/images/emoji/emoji_one/point_right.png?v=3 ":point_right:") <a href='http://forum.freecodecamp.com/t/algorithm-article-template/14272' target='_blank' rel='nofollow'>**`Wiki Challenge Solution Template`**</a> for reference.

View File

@ -0,0 +1,56 @@
---
title: Explore Differences Between the var and let Keywords
---
![](//discourse-user-assets.s3.amazonaws.com/original/2X/3/3c8584a085a0deaea66b3400e6321eeadab552a2.jpg)
![:triangular_flag_on_post:](https://forum.freecodecamp.com/images/emoji/emoji_one/triangular_flag_on_post.png?v=3 ":triangular_flag_on_post:") Remember to use <a>**`Read-Search-Ask`**</a> if you get stuck. Try to pair program ![:busts_in_silhouette:](https://forum.freecodecamp.com/images/emoji/emoji_one/busts_in_silhouette.png?v=3 ":busts_in_silhouette:") and write your own code ![:pencil:](https://forum.freecodecamp.com/images/emoji/emoji_one/pencil.png?v=3 ":pencil:")
### Problem Explanation:
We need to change each `var` to `let` in our code.
## ![:speech_balloon:](https://forum.freecodecamp.com/images/emoji/emoji_one/speech_balloon.png?v=3 ":speech_balloon:") Hint: 1
* Find each `var` and replace with `let`.
> _try to solve the problem now_
## Spoiler Alert!
![warning sign](//discourse-user-assets.s3.amazonaws.com/original/2X/2/2d6c412a50797771301e7ceabd554cef4edcd74d.gif)
**Solution ahead!**
## ![:beginner:](https://forum.freecodecamp.com/images/emoji/emoji_one/beginner.png?v=3 ":beginner:") Basic Code Solution:
```javascript
let catName;
let quote;
function catTalk() {
"use strict";
catName = "Oliver";
quote = catName + " says Meow!";
}
catTalk();
```
![:rocket:](https://forum.freecodecamp.com/images/emoji/emoji_one/rocket.png?v=3 ":rocket:") <a href='https://codepen.io/dylantyates/pen/eKqoGY' target='_blank' rel='nofollow'>Run Code</a>
# Code Explanation:
By using `let` instead of `var` we can avoid overriding `catName` and `quote`.
#### Relevant Links
* <a href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var' target='_blank' rel='nofollow'>var</a>
* <a href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let' target='_blank' rel='nofollow'>let</a>
## ![:clipboard:](https://forum.freecodecamp.com/images/emoji/emoji_one/clipboard.png?v=3 ":clipboard:") NOTES FOR CONTRIBUTIONS:
* ![:warning:](https://forum.freecodecamp.com/images/emoji/emoji_one/warning.png?v=3 ":warning:") **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**. ![:traffic_light:](https://forum.freecodecamp.com/images/emoji/emoji_one/traffic_light.png?v=3 ":traffic_light:")
* Please add your username only if you have added any **relevant main contents**. (![:warning:](https://forum.freecodecamp.com/images/emoji/emoji_one/warning.png?v=3 ":warning:") **_DO NOT_** _remove any existing usernames_)
> See ![:point_right:](https://forum.freecodecamp.com/images/emoji/emoji_one/point_right.png?v=3 ":point_right:") <a href='http://forum.freecodecamp.com/t/algorithm-article-template/14272' target='_blank' rel='nofollow'>**`Wiki Challenge Solution Template`**</a> for reference.

View File

@ -0,0 +1,21 @@
---
title: 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:
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:
```javascript
"use strict";
import subtract from "math_functions";
subtract(7,4);
```

View File

@ -0,0 +1,11 @@
---
title: 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:
1. [Wikipedia | Ecma International](https://en.wikipedia.org/wiki/Ecma_International)
2. [Wikipedia | ECMAScript](https://en.wikipedia.org/wiki/ECMAScript)

View File

@ -0,0 +1,59 @@
---
title: Mutate an Array Declared with const
---
![](//discourse-user-assets.s3.amazonaws.com/original/2X/3/3c8584a085a0deaea66b3400e6321eeadab552a2.jpg)
![:triangular_flag_on_post:](https://forum.freecodecamp.com/images/emoji/emoji_one/triangular_flag_on_post.png?v=3 ":triangular_flag_on_post:") Remember to use <a>**`Read-Search-Ask`**</a> if you get stuck. Try to pair program ![:busts_in_silhouette:](https://forum.freecodecamp.com/images/emoji/emoji_one/busts_in_silhouette.png?v=3 ":busts_in_silhouette:") and write your own code ![:pencil:](https://forum.freecodecamp.com/images/emoji/emoji_one/pencil.png?v=3 ":pencil:")
### Problem Explanation:
Reassign the values of the `const` variable `s` using various element assignment.
## ![:speech_balloon:](https://forum.freecodecamp.com/images/emoji/emoji_one/speech_balloon.png?v=3 ":speech_balloon:") Hint: 1
* You can change array values on `const` like you can with `var` or `let`.
> _try to solve the problem now_
## ![:speech_balloon:](https://forum.freecodecamp.com/images/emoji/emoji_one/speech_balloon.png?v=3 ":speech_balloon:") Hint: 1
* To access array value use array[index]
> _try to solve the problem now_
## Spoiler Alert!
![warning sign](//discourse-user-assets.s3.amazonaws.com/original/2X/2/2d6c412a50797771301e7ceabd554cef4edcd74d.gif)
**Solution ahead!**
## ![:beginner:](https://forum.freecodecamp.com/images/emoji/emoji_one/beginner.png?v=3 ":beginner:") Basic Code Solution:
```javascript
const s = [5, 7, 2];
function editInPlace() {
"use strict";
s[0] = 2;
s[1] = 5;
s[2] = 7;
}
editInPlace();
```
![:rocket:](https://forum.freecodecamp.com/images/emoji/emoji_one/rocket.png?v=3 ":rocket:") <a href='https://codepen.io/dylantyates/pen/djoVjW' target='_blank' rel='nofollow'>Run Code</a>
# 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`.
#### Relevant Links
* <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>
## ![:clipboard:](https://forum.freecodecamp.com/images/emoji/emoji_one/clipboard.png?v=3 ":clipboard:") NOTES FOR CONTRIBUTIONS:
* ![:warning:](https://forum.freecodecamp.com/images/emoji/emoji_one/warning.png?v=3 ":warning:") **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**. ![:traffic_light:](https://forum.freecodecamp.com/images/emoji/emoji_one/traffic_light.png?v=3 ":traffic_light:")
* Please add your username only if you have added any **relevant main contents**. (![:warning:](https://forum.freecodecamp.com/images/emoji/emoji_one/warning.png?v=3 ":warning:") **_DO NOT_** _remove any existing usernames_)
> See ![:point_right:](https://forum.freecodecamp.com/images/emoji/emoji_one/point_right.png?v=3 ":point_right:") <a href='http://forum.freecodecamp.com/t/algorithm-article-template/14272' target='_blank' rel='nofollow'>**`Wiki Challenge Solution Template`**</a> for reference.

View File

@ -0,0 +1,61 @@
---
title: Prevent Object Mutation
---
![](//discourse-user-assets.s3.amazonaws.com/original/2X/3/3c8584a085a0deaea66b3400e6321eeadab552a2.jpg)
![:triangular_flag_on_post:](https://forum.freecodecamp.com/images/emoji/emoji_one/triangular_flag_on_post.png?v=3 ":triangular_flag_on_post:") Remember to use <a>**`Read-Search-Ask`**</a> if you get stuck. Try to pair program ![:busts_in_silhouette:](https://forum.freecodecamp.com/images/emoji/emoji_one/busts_in_silhouette.png?v=3 ":busts_in_silhouette:") and write your own code ![:pencil:](https://forum.freecodecamp.com/images/emoji/emoji_one/pencil.png?v=3 ":pencil:")
### Problem Explanation:
We need to prevent `MATH_CONSTANTS` value from changing.
## ![:speech_balloon:](https://forum.freecodecamp.com/images/emoji/emoji_one/speech_balloon.png?v=3 ":speech_balloon:") Hint: 1
* Use Object.freeze(obj) to prevent object from being changed.
> _try to solve the problem now_
## Spoiler Alert!
![warning sign](//discourse-user-assets.s3.amazonaws.com/original/2X/2/2d6c412a50797771301e7ceabd554cef4edcd74d.gif)
**Solution ahead!**
## ![:beginner:](https://forum.freecodecamp.com/images/emoji/emoji_one/beginner.png?v=3 ":beginner:") Basic Code Solution:
```javascript
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();
```
![:rocket:](https://forum.freecodecamp.com/images/emoji/emoji_one/rocket.png?v=3 ":rocket:") <a href='https://codepen.io/dylantyates/pen/OwVxYB' target='_blank' rel='nofollow'>Run Code</a>
# Code Explanation:
By using Object.freeze() on `MATH_CONSTANTS` we can avoid manipulating it.
#### Relevant Links
* <a href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze' target='_blank' rel='nofollow'>Object.freeze()</a>
## ![:clipboard:](https://forum.freecodecamp.com/images/emoji/emoji_one/clipboard.png?v=3 ":clipboard:") NOTES FOR CONTRIBUTIONS:
* ![:warning:](https://forum.freecodecamp.com/images/emoji/emoji_one/warning.png?v=3 ":warning:") **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**. ![:traffic_light:](https://forum.freecodecamp.com/images/emoji/emoji_one/traffic_light.png?v=3 ":traffic_light:")
* Please add your username only if you have added any **relevant main contents**. (![:warning:](https://forum.freecodecamp.com/images/emoji/emoji_one/warning.png?v=3 ":warning:") **_DO NOT_** _remove any existing usernames_)
> See ![:point_right:](https://forum.freecodecamp.com/images/emoji/emoji_one/point_right.png?v=3 ":point_right:") <a href='http://forum.freecodecamp.com/t/algorithm-article-template/14272' target='_blank' rel='nofollow'>**`Wiki Challenge Solution Template`**</a> for reference.

View File

@ -0,0 +1,70 @@
---
title: Set Default Parameters for Your Functions
---
## Set Default Parameters for Your Functions
:triangular_flag_on_post: Remember to use Read-Search-Ask if you get stuck. Try to pair program :busts_in_silhouette: and write your own code :pencil:
### :checkered_flag: 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
```
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.
### :speech_balloon: Hint: 1
Let's identify where the parameter **value** is in JS function
try to solve the problem now
### :speech_balloon: Hint: 2
Set **value** equal to something so that it is that value by default
try to solve the problem now
### Spoiler Alert!
![spoiler](http://discourse-user-assets.s3.amazonaws.com/original/2X/2/2d6c412a50797771301e7ceabd554cef4edcd74d.gif)
Solution ahead!
## :beginner: Basic Code Solution:
```javascript
const increment = (function() {
"use strict";
return function increment(number, value = 1) {
return number + value;
};
})();
console.log(increment(5, 2)); // returns 7
console.log(increment(5)); // returns NaN
```
:rocket: [Run Code](https://repl.it/@RyanPisuena/PleasingFumblingThings)
## 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.
Relevant Links:
[Javascript default parameters](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters)
# :clipboard: NOTES FOR CONTRIBUTIONS:
* :warning: 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. :traffic_light:
* Please add your username only if you have added any relevant main contents. ( :warning: DO NOT remove any existing usernames)
See :point_right: [Wiki Challenge Solution Template](https://forum.freecodecamp.org/t/freecodecamp-algorithm-challenge-template-guide/14272) for reference.
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->

View File

@ -0,0 +1,23 @@
---
title: Understand the Differences Between import and require
---
## Understand the Differences Between import and require
<!-- 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:
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
```javascript
"use strict";
import { capitalizeString } from "string-functions";
capitalizeString("hello!");
```

View File

@ -0,0 +1,20 @@
---
title: Use * to Import Everything from a File
---
## Use * to Import Everything from a File
<!-- 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:
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:
```javascript
"use strict";
import * as str from "capitalize_strings";
```

View File

@ -0,0 +1,30 @@
---
title: 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 -->
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:
Get rid of the `function` key word, and plug in this `=>` arrow.
## Hint 2:
Did you get rid of the `var` keyword?
## Spoiler Alert - Solution Ahead!
## Solution
```javascript
const magic = () => {
"use strict";
return new Date();
};
```
As long as you got rid of the `var` keyword, you're good.

View File

@ -0,0 +1,59 @@
---
title: Use class Syntax to Define a Constructor Function
---
## Use class Syntax to Define a Constructor Function
<!-- 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:
Create the class called `Vegetable`. It will contain the necessary details about the `Vegetable` object.
## Hint 2:
Put a constructor with a parameter called `name`, and set it to `this.name`.
## Spoiler Alert - Solution Ahead!
## Solution:
```javascript
function makeClass() {
"use strict";
/* Alter code below this line */
class Vegetable {
constructor(name){
this.name = name;
}
}
/* Alter code above this line */
return Vegetable;
}
```
=======
Spoiler Warning: here is a basic solution to this challenge in case you're stuck.
```javascript
function makeClass() {
"use strict";
/* Alter code below this line */
class Vegetable {
constructor(Vegetable){
this.Vegetable = Vegetable;
}
}
/* Alter code above this line */
return Vegetable;
}
const Vegetable = makeClass();
const carrot = new Vegetable('carrot');
console.log(carrot.name); // => should be 'carrot'
```

View File

@ -0,0 +1,13 @@
---
title: Use Destructuring Assignment to Assign Variables from Arrays
---
## Use Destructuring Assignment to Assign Variables from Arrays
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]

View File

@ -0,0 +1,16 @@
---
title: Use Destructuring Assignment to Assign Variables from Nested Objects
---
## Use Destructuring Assignment to Assign Variables from Nested Objects
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:
```javascript
const { tomorrow: { max: maxOfTomorrow } } = forecast;
```

View File

@ -0,0 +1,20 @@
---
title: 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.
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>.
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 basicOjb = {x: 40};
//To reassign 'get the value of the x property of basicObj and place its value into bigX' in ES6:
const { x: bigX } = basicOjb;
consle.log(bigX) // ans = 40
```
Place the value of the length property of 'str' into len.

View File

@ -0,0 +1,49 @@
---
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
<!-- 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:
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:
```javascript
const half = (function() {
"use strict"; // do not change this line
// change code below this line
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`.
## Solution 2:
Here is another solution that works. Not much of a difference, other than the fact that the function doesn't have a name.
```javascript
const half = (function() {
"use strict"; // do not change this line
// change code below this line
return (({max, min}) => {
// use function argument destructuring
return (max + min) / 2.0;
});
// change code above this line
})();
```

View File

@ -0,0 +1,69 @@
---
title: Use Destructuring Assignment with the Rest Operator to Reassign Array Elements
---
## Use Destructuring Assignment with the Rest Operator to Reassign Array Elements
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
Remember that the rest operator allows for variable numbers of arguments. In this challenge, you have to get rid of the first two elements of an array.
## Hint 1:
Assign the first two elements to two random variables.
## Hint 2:
Set the remaining part of the array to `...arr`.
=======
## Hint 1
Use destructuring to create the `arr` variable.
```javascript
function removeFirstTwo(list) {
"use strict";
// change code below this line
const [arr] = list; // change this
// change code above this line
return arr;
}
```
## Hint 2
Spread the `list` parameter into `arr`.
```javascript
function removeFirstTwo(list) {
"use strict";
// change code below this line
const [...arr] = list; // change this
// change code above this line
return arr;
}
```
## Hint 3
Exclude the first two elements of the `arr` array with `,,`.
```javascript
function removeFirstTwo(list) {
"use strict";
// change code below this line
const [,,...arr] = list; // change this
// change code above this line
return arr;
}
```
## Spoiler Alert - Solution Ahead!
```javascript
function removeFirstTwo(list) {
"use strict";
// change code below this line
const [a, b, ...arr] = list;
// change code above this line
return arr;
}
```

View File

@ -0,0 +1,23 @@
---
title: 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 -->
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:
Just add export in front of them!
## Spoiler Alert - Solution Ahead!
## Solution
```javascript
"use strict";
export const foo = "bar";
export const bar = "foo";
```

View File

@ -0,0 +1,49 @@
---
title: 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 -->
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:
Create the class, Thermostat. You're going to put your constructor, getter, and setter in here.
## 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 Farenheit temperature.
## Hint 3:
Create a get method that converts the Farenheit attribute to Celsius. Use the formula given to you.
## 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 farenheit, and set it to the attribute.
## Spoiler Alert - Solution Ahead!
## Solution
```javascript
function makeClass() {
"use strict";
/* Alter code below this line */
class Thermostat{
constructor(farenheit){
this.farenheit = farenheit;
}
get temperature(){
return 5 / 9 * (this.farenheit - 32);
}
set temperature(celsius){
this.farenheit = celsius * 9.0 / 5 + 32;
}
}
/* Alter code above this line */
return Thermostat;
}
```

View File

@ -0,0 +1,42 @@
---
title: Use the Rest Operator with Function Parameters
---
## Use the Rest Operator 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")
### Spread operator compared to rest parameter
[Stack overflow](https://stackoverflow.com/questions/33898512/spread-operator-vs-rest-parameter-in-es2015-es6 "Stack Overflow")
### Video explaining spread and rest
<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 operator " width="240" height="180" border="10" /></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);
};
})();
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);
};
})();
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 -->

View File

@ -0,0 +1,39 @@
---
title: 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")
### Spread Operator compared to Rest Parameter
[Stack Overflow](https://stackoverflow.com/questions/33898512/spread-operator-vs-rest-parameter-in-es2015-es6 "Stack Overflow")
### Video Explaining Spread Operator and Rest Parameter
<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 operator " width="240" height="180" border="10" /></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")
### 3 Quick Examples
```javascript
let numbers = [-12, 160, 0, -3, 51];
let minNum = Math.min.apply(null, numbers);
console.log(minNum);//-12
```
```javascript
let numbers = [-12, 160, 0, -3, 51];
let minNum = Math.min(numbers);
console.log(minNum);//NaN
```
```javascript
let numbers = [-12, 160, 0, -3, 51];
let minNum = Math.min(...numbers);
console.log(minNum);//-12
```
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->

View File

@ -0,0 +1,30 @@
---
title: 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 -->
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:
Get rid of the `function` keyword. Put the arrow operator.
## Hint 2:
Make sure you changed the `var` to a `const`.
## Spoiler Warning - Solution Ahead!
## Solution:
```javascript
const myConcat = (arr1, arr2) => {
"use strict";
return arr1.concat(arr2);
};
// test your code
console.log(myConcat([1, 2], [3, 4, 5]));
```

View File

@ -0,0 +1,25 @@
---
title: 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 -->
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:
Get rid of the `function` keyword.
## Spoiler Alert - Solution Ahead!
## Solution
```javascript
const bicycle = {
gear: 2,
setGear(newGear) {
"use strict";
this.gear = newGear;
}
};
```

View File

@ -0,0 +1,28 @@
---
title: 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 -->
Here, we are tasked at returning an object that accepts the function's parameters as its attributes.
# Hint 1:
Get rid of the colons, and the duplicate words.
## Spoiler Alert - Solution Ahead
## Solution
```javascript
const createPerson = (name, age, gender) => {
"use strict";
// change code below this line
return {
name,
age,
gender
};
// change code above this line
};
```

View File

@ -0,0 +1,67 @@
---
title: Write Higher Order Arrow Functions
---
![](//discourse-user-assets.s3.amazonaws.com/original/2X/3/3c8584a085a0deaea66b3400e6321eeadab552a2.jpg)
![:triangular_flag_on_post:](https://forum.freecodecamp.com/images/emoji/emoji_one/triangular_flag_on_post.png?v=3 ":triangular_flag_on_post:") Remember to use <a>**`Read-Search-Ask`**</a> if you get stuck. Try to pair program ![:busts_in_silhouette:](https://forum.freecodecamp.com/images/emoji/emoji_one/busts_in_silhouette.png?v=3 ":busts_in_silhouette:") and write your own code ![:pencil:](https://forum.freecodecamp.com/images/emoji/emoji_one/pencil.png?v=3 ":pencil:")
### Problem Explanation:
We need to compute and square values from the `realNumberArray` and store them in the variable `squaredIntegers` using the `map()`, `filter()`, and/or `reduce()` functions.
## ![:speech_balloon:](https://forum.freecodecamp.com/images/emoji/emoji_one/speech_balloon.png?v=3 ":speech_balloon:") Hint: 1
* You will need to `filter()` the `realNumberArray` for positive integers (decimals are not integers).
> _try to solve the problem now_
## ![:speech_balloon:](https://forum.freecodecamp.com/images/emoji/emoji_one/speech_balloon.png?v=3 ":speech_balloon:") Hint: 2
* You will need to `map()` the values from your `filter()` function to the variable `squaredIntegers`.
> _try to solve the problem now_
## ![:speech_balloon:](https://forum.freecodecamp.com/images/emoji/emoji_one/speech_balloon.png?v=3 ":speech_balloon:") Hint: 3
* Remember the magic of chaining functions.
> _try to solve the problem now_
## Spoiler Alert!
![warning sign](//discourse-user-assets.s3.amazonaws.com/original/2X/2/2d6c412a50797771301e7ceabd554cef4edcd74d.gif)
**Solution ahead!**
## ![:beginner:](https://forum.freecodecamp.com/images/emoji/emoji_one/beginner.png?v=3 ":beginner:") Basic Code Solution:
```javascript
const squareList = (arr) => {
"use strict";
const squaredIntegers = arr.filter( (num) => num > 0 && num % parseInt(num) === 0 ).map( (num) => Math.pow(num, 2) );
return squaredIntegers;
};
// test your code
const squaredIntegers = squareList(realNumberArray);
console.log(squaredIntegers);
```
![:rocket:](https://forum.freecodecamp.com/images/emoji/emoji_one/rocket.png?v=3 ":rocket:") <a href='https://codepen.io/dylantyates/pen/WyWoYJ' target='_blank' rel='nofollow'>Run Code</a>
# Code Explanation:
Uses the operator `filter()` and `map()` functions to square all positive integers in a given array.
#### Relevant Links
* <a href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map' target='_blank' rel='nofollow'>map()</a>
* <a href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter' target='_blank' rel='nofollow'>filter()</a>
* <a href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce' target='_blank' rel='nofollow'>reduce()</a>
## ![:clipboard:](https://forum.freecodecamp.com/images/emoji/emoji_one/clipboard.png?v=3 ":clipboard:") NOTES FOR CONTRIBUTIONS:
* ![:warning:](https://forum.freecodecamp.com/images/emoji/emoji_one/warning.png?v=3 ":warning:") **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**. ![:traffic_light:](https://forum.freecodecamp.com/images/emoji/emoji_one/traffic_light.png?v=3 ":traffic_light:")
* Please add your username only if you have added any **relevant main contents**. (![:warning:](https://forum.freecodecamp.com/images/emoji/emoji_one/warning.png?v=3 ":warning:") **_DO NOT_** _remove any existing usernames_)
> See ![:point_right:](https://forum.freecodecamp.com/images/emoji/emoji_one/point_right.png?v=3 ":point_right:") <a href='http://forum.freecodecamp.com/t/algorithm-article-template/14272' target='_blank' rel='nofollow'>**`Wiki Challenge Solution Template`**</a> for reference.