[마스터 개념] 6

728x90

[마스터 개념] 6 | 모듈

~~1 variable 변수~~

~~2 operator 연산자~~

~~3 function 함수~~

~~4 object 객체~~

~~5 class 클래스~~

~~7 built-in 빌트인 객체~~

~~8 array 배열~~

~~9 iterator 이터러블~~

~~10 map~~

~~11 more-operators 유용한 연산자들~~

12> module 모듈

13 promise 프로미스

14 scope 스코프

15 prototype 프로토타입

16 closure 클로져

17 this

12 module 모듈

Comments 주석

// TODO (대상) : 해야 할 일 작성

이런 식으로 한 줄짜리 주석을 작성할 때 쓴다.

/**

* 코드 자체를 설명 X, WHY 와 HOW 를 설명하는 것 (정말 필요한 경우만 사용)

/**
 * 주어진 두 인자를 더한 값을 반환함
 * @param {*} a 숫자 1
 * @param {*} b 숫자 2
 * @returns a와 b를 더한 값
 */
function add(a, b) {
  return a + b;
}

함수 앞에서 /** enter 를 누르면 JSDoc 이 사용된다. 외부에서 많이 쓰는 함수 API 의 경우 자주 사용한다.

모듈 작성법

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="counter.js"></script>
    <script src="main.js"></script>
  </head>
  <body></body>
</html>

// counter.js

let count = 0;
function increase() {
  count++;
  console.log(count);
}

// main.js

console.log(count);		// 0  main.js
increase();			// 1  counter.js
increase();			// 2  counter.js
console.log(count);		// 2  main.js
count = -10;	
console.log(count);		// -10  main.js

이처럼 counter.js 파일의 count 변수 값과 함수들을 main.js 파일에서 변경하고 사용할 수 있다. 서로의 값을 변경할 수 있으면 버그에 치명적이기 때문에 캡슐화를 하는 것이 좋다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script type="module" src="counter.js"></script>
    <script type="module" src="main.js"></script>
  </head>
  <body></body>
</html>

// counter.js

let count = 0;
export function increase() {
  count++;
  console.log(count);
}
export function getCount() {
  return count;
}

// main.js

import { increase, getCount } from "./counter.js";

increase();			// 1  counter.js
increase();			// 2  counter.js
increase();			// 3  counter.js
console.log(getCount());	// 3  main.js

html 파일에서 type="module" 을 사용하면 다른 곳에서 사용이 불가능해진다.

이때 다른 파일에서 사용할 변수나 함수 앞에 export 를 사용하면 접근할 수 있다.

export default : 딱 하나만 받아올 때

export : 여러 가지 받아올 때

export 한 것들을 사용할 때는 import 를 사용해야 한다.

export default : 딱 하나만 import 로 받아오고, import { 기존 이름 as 원하는 이름 } from '파일경로';

export : import { 기존 이름 } from '파일경로';

counter.js 파일에서 count 는 export 하지 않았으므로 다른 파일에서 count 값을 변경할 수 없다. 따라서 count 값을 받아올 수 있는 getCount( ) 함수를 export 하였다.

// main.js

// import { increase, getCount } from "./counter.js";
import * as counter from './counter.js';
counter.increase();			// 1  counter.js
counter.increase();			// 2  counter.js
counter.increase();			// 3  counter.js
console.log(counter.getCount());	// 3  main.js

import 로 낱개 하나하나씩 받아오던 것을 하나의 이름으로 그룹화하여 받아올 수도 있다.

이처럼 increase( ) 와 getCount( ) 를 counter 이름으로 받아와서 사용할 수 있다.

728x90

'💠프로그래밍 언어 > JavaScript' 카테고리의 다른 글

[마스터 개념] 8 \| 스코프, 프로토타입 (0)	2022.11.15
[마스터 개념] 7 \| 프로미스 (0)	2022.11.11
[마스터 개념] 5 \| map, 유용한 연산자들 (0)	2022.11.01
[마스터 개념] 4 \| 이터러블 (0)	2022.11.01
[마스터 개념] 3 \| 배열 (0)	2022.10.31