본문 바로가기

Front-End: Web/JavaScript

require() / exports / module.exports

반응형

1. require()과 module.exports, exports

require + module.exports/exports

  • require()함수는 module.exports를 리턴한다.
// foo.js

const a = 10;
exports.a = a;
//bar.js

const foo = require('./foo.js');
console.log(foo.a);

 

exports와 module.exports의 차이

exports는 단순히 짧은 alias일 뿐, module.exports를 참조할 뿐이다.

❗ 하지만 동일하다고 생각하면 안된다! 아래를 잘 읽어보자.

 

 

2. module.exports와 exports

동일한 코드

정석 코드

module.exports.foo = "bar"

더 짧게 쓰기 (module.exports ➡ exports)

exports.foo = "bar"

"bar"라는 property 대신 다른 임의의 함수가 들어가도 된다.

(module.exports)

module.exports.foo = function() {
    console.log("foo");
}

(exports)

exports.foo = function() {
    console.log("foo");
}

 

잘못된 코드

1. exported property/function 들의 컨테이너로 쓸 경우

❌ exports = { foo : "bar"}
❌ exports = function() { console.log("foo") }

다음 코드들은 기존의 module.exports에 key, value를 넣는 것이 아니라, module.exports와는 다른 exports라는 변수에 새로운 값을 넣은 것이다. 결국, 값을 저장해야 할 module.exports는 비어있게 되는 형식이므로 이렇게 작성하면 안된다!

정 exports를 새로 정의하고 싶다면 아래와 같이 작성해야 한다.

👍 module.exports = exports = function() { console.log("foo") }

 

2. constructor function으로 쓰는 경우

정색대로 쓰려면 아래처럼 써야 한다.

👍 module.exports = function() { console.log("foo") }

하지만, 아래는 작성할 순 있지만 이렇게 작성하는 것은 비추이다.

❗ module.exports.one = 1

왜냐하면 constructor function으로 쓰는 경우, constructor 하나만 들어가는 것이 훨씬 가독성이 높기 때문이다.

프로퍼티/함수를 동일한 계층으로 보고 한꺼번에 묶어서 exports하는 것은 납득이 가지만, 오브젝트와 프로퍼티 혹은 오브젝트와 함수를 동일한 계층으로 보는 것은 문제가 있다고 보기 때문이다.

 

 

3. 정리

  • require()은 module.exports를 리턴한다.
  • exports는 module.exports를 refer하며, shortcut에 불과하다.
  • exports와 module.exports의 용례를 잘 익혀야 한다.

 

 

 

 

 

 

 


참고 자료

https://medium.com/@chullino/require-exports-module-exports-%EA%B3%B5%EC%8B%9D%EB%AC%B8%EC%84%9C%EB%A1%9C-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-1d024ec5aca3

반응형

'Front-End: Web > JavaScript' 카테고리의 다른 글

[JS] undefined와 null의 차이점은?  (0) 2021.10.15
[작성중]자바스크립트 Array의 모든 메서드를 알아보자!  (0) 2021.09.30
js class  (0) 2021.07.03
for in & for of  (0) 2021.06.11
정규표현식  (0) 2021.05.28