๋ค๋ฅธ ํ์ผ์ ์๋ ์๋ฐ์คํฌ๋ฆฝํธ์ ๊ธฐ๋ฅ์ ํน์ ํ์ผ์์ ์ฌ์ฉํ ์ ์๋ ๊ฒ์ ์๋ฏธํฉ๋๋ค.
Import & Export
- ์ํฌํธ(Import)์ ์ต์คํฌํธ(Export)๋ ์๋ฐ์คํฌ๋ฆฝํธ์ ์ฝ๋๋ฅผ ๋ชจ๋ํ ํ ์ ์๋ ๊ธฐ๋ฅ
๊ธฐ๋ณธ ๋ฌธ๋ฒ
export ๋ณ์, ํจ์- ๋ค๋ฅธ ํ์ผ์์ ๊ฐ์ ธ๋ค ์ธ ๋ณ์๋ ํจ์์ ์์ export ๋ผ๋ ํค์๋๋ฅผ ๋ถ์ ๋๋ค.
- ์ต์คํฌํธ๋ ํ์ผ์ ์ํฌํธ๋ก ๋ถ๋ฌ์ ์ฌ์ฉํ ์ ์์ต๋๋ค.
- import { ๋ถ๋ฌ์ฌ ๋ณ์ ๋๋ ํจ์ ์ด๋ฆ } from 'ํ์ผ ๊ฒฝ๋ก';
์์
- math.js
export let pi = 3.14;
export function sum(a, b) {
return a + b;
}- app.js
import { pi } from './math.js';
console.log(pi); // 3.14
import { sum } from './math.js';
sum(10, 20); // 30
์ฌ์ฉํ๋ ์ด์
- ์๋ฐ์คํฌ๋ฆฝํธ์ ์ ํจ ๋ฒ์๋ ์ ์ญ์ผ๋ก ์์ ํฉ๋๋ค.
- ํ์ผ๋ง๋ค ๊ณ ์ ์ ์์ญ์ด ๋๋์ด ์ง์ง ์๊ธฐ ๋๋ฌธ์ ๊ฐ์ ๋ณ์๋ก ์ด๋ฆ์ ์์ฑํ๋ฉด ๋ณ์์ ์ ํจ๋ฒ์๊ฐ ๋ถ๋ฆฌ๋์ง ์๊ธฐ ๋๋ฌธ์
- ๋ณ์๊ฐ ๋ฎ์ด ์์ด์ง๊ฑฐ๋ ์์์น ๋ชปํ ์ํฉ์ ๋ง๋ ์ ์์ต๋๋ค.
<!-- index.html -->
<body>
<script src="a.js"></script>
<script src="b.js"></script>
<script>
getTotal(); // 200
</script>
</body>// a.js
var total = 100;
function getTotal() {
return total;
}var total = 200;
์ฐธ๊ณ
'๐ Front-End > JavaScript' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| JavaScript ๋ฌธ์์ด ๊ด๋ จ ์ ๋ฆฌ (0) | 2023.01.05 |
|---|---|
| replace ์ฌ์ฉํด์ ๋ฌธ์์ด ์นํ(RegExp ๊ฐ์ฒด ์ฌ์ฉ) (0) | 2022.12.12 |
| ๋ธ๋ผ์ฐ์ ๊ฐ์ฒด ๋ชจ๋ธ(BOM, Browser Object Model) (0) | 2022.11.17 |
| ๋ฌธ์ ๊ฐ์ฒด ๋ชจ๋ธ(DOM, Document Objects Model) (0) | 2022.11.17 |
| ==(๋๋ฑ ์ฐ์ฐ์)์ ===(์ผ์น ์ฐ์ฐ์) (0) | 2022.11.17 |
