83 lines
2.4 KiB
Markdown
83 lines
2.4 KiB
Markdown
|
---
|
||
|
|
id: 587d7b8c367417b2b2512b55
|
||
|
|
title: Reuse Javascript Code Using import
|
||
|
|
challengeType: 1
|
||
|
|
---
|
||
|
|
|
||
|
|
## Description
|
||
|
|
<section id='description'>
|
||
|
|
<code>import</code> allows you to choose which parts of a file or module to load. In the previous lesson, the examples exported <code>add</code> from the file <code>math_functions.js</code>. Here's how you can import them into another file:
|
||
|
|
|
||
|
|
```js
|
||
|
|
import { add } from './math_functions.js';
|
||
|
|
```
|
||
|
|
|
||
|
|
Here, <code>import</code> will find <code>add</code> in <code>math_functions.js</code>, import just that function for you to use, and ignore the rest. The <code>./</code> tells the import to look for the <code>math_functions.js</code> file in the same folder that the file which uses the import statement is. The relative file path (<code>./</code>) and file extension (<code>.js</code>) are required when using import in this way.
|
||
|
|
|
||
|
|
You can import multiple items like this:
|
||
|
|
|
||
|
|
```js
|
||
|
|
import { add, subtract } from './math_functions.js';
|
||
|
|
```
|
||
|
|
|
||
|
|
</section>
|
||
|
|
|
||
|
|
## Instructions
|
||
|
|
<section id='instructions'>
|
||
|
|
Add the appropriate <code>import</code> statement that will allow the current file to use the <code>capitalizeString</code> and <code>lowerCaseString</code> functions you exported in the previous lesson. These functions are in a file called <code>string_functions.js</code>, which is in the same directory as the current file.
|
||
|
|
</section>
|
||
|
|
|
||
|
|
## Tests
|
||
|
|
<section id='tests'>
|
||
|
|
|
||
|
|
```yml
|
||
|
|
tests:
|
||
|
|
- text: You should properly import <code>capitalizeString</code>.
|
||
|
|
testString: getUserInput => assert(getUserInput('index').match(/import\s*\{\s*capitalizeString\s*\}\s*from\s*("|')(\.\/string_functions|string_functions)\1(|\/\/|;\s|\s)/g));
|
||
|
|
- text: You should properly import <code>lowerCaseString</code>.
|
||
|
|
testString: getUserInput => assert(getUserInput('index').match(/import\s*\{\s*capitalizeString\s*\}\s*from\s*("|')(\.\/string_functions|string_functions)\1(|\/\/|;\s|\s)/g));
|
||
|
|
```
|
||
|
|
|
||
|
|
</section>
|
||
|
|
|
||
|
|
## Challenge Seed
|
||
|
|
<section id='challengeSeed'>
|
||
|
|
<div id='js-seed'>
|
||
|
|
|
||
|
|
```js
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// add code above this line
|
||
|
|
|
||
|
|
console.log(capitalizeString("hello"));
|
||
|
|
console.log(lowerCaseString("WORLD!"));
|
||
|
|
```
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
### Before Test
|
||
|
|
<div id='js-setup'>
|
||
|
|
|
||
|
|
```js
|
||
|
|
self.require = function() {
|
||
|
|
return {
|
||
|
|
capitalizeString: str => str.toUpperCase(),
|
||
|
|
lowerCaseString: str => str.toLowerCase()
|
||
|
|
}
|
||
|
|
};
|
||
|
|
```
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
## Solution
|
||
|
|
<section id='solution'>
|
||
|
|
|
||
|
|
```js
|
||
|
|
import { capitalizeString } from './string_functions';
|
||
|
|
capitalizeString("hello!");
|
||
|
|
```
|
||
|
|
|
||
|
|
</section>
|