오늘 배운 것

• 화살표 함수
• 모듈화
• CommonJS

화살표 함수

개요

화살표 함수는 function 키워드를 화살표로 축약해서 표시하는 방법이다. ES6부터 새로 도입되었다.

const add = (x, y) => {
  return x + y
}

위와 같이 작성된 것을 화살표 함수라고 부르는데, 함수 표현식과 비교하면 한 눈에 확인할 수 있다.

함수 표현식

const add = function(x, y) {
  return x + y
}

화살표 함수

const add = (x, y) => {
  return x + y
}

화살표 함수는 function 키워드를 화살표로 축약하는데, 몇가지 규칙이 있다.

• 함수의 본문에 return문만 있는 경우, return을 생략할 수 있고, 중괄호도 생략한다.

const add = (x, y) => x + y // 정상 작동
const add = (x, y) => {x + y} // undefined. 중괄호를 생략해야 한다

• 소괄호를 사용하는 것은 가능하다(일반적인 수식의 소괄호와 동일)
• 만약 함수 내의 표현식이 두 줄 이상일 경우, 중괄호와 return을 명시적으로 사용하는 것이 좋다.

가독성 측면에서도 명시적으로 사용한 것이 더 좋다

// bad
const getAvg = arr => arr.filter(person => person.job === 'student').reduce((sum, person) => (sum + person.grade), 0)

// good
const getAvg = arr => {
  return arr
    .filter(person => person.job === 'student')
    .reduce((sum, person) => (sum + person.grade), 0)
}

예시

화살표 함수는 클로저를 표현할 때 더욱 강력하다.

함수 표현식

const adder = function(x) {
  return function(y) {
    return x + y
  }
}
adder(5)(7) // 12

function 키워드 제거

const adder = (x) => {
  return (y) => {
    return x + y
  }
}

return 생략

// 주의 : return 생략시에는 중괄호를 사용하지 않는다
// 파라미터가 1개라면 소괄호를 생략할 수 있다.
const adder = x => {
  return y => x + y
}

최종 축약형

const adder = x => y => x + y

모듈화

브라우저와 다르게 node.js의 특징 중 하나는 다양한 내장 모듈이 존재한다는 것이다.
브라우저에서는 다른 스크립트 파일을 불러올 때 html의 <script> 태그를 이용했다.
반면, node.js에서는 html이 존재하지 않기 때문에 JS파일에서 다른 스크립트 파일이나 모듈을 사용하려면 다르게 접근해야 한다.

기본적인 사용법

npm install을 이용하면 필요한 모듈을 다운로드 받아 사용할 수 있고, 모듈이 node_modules에 저장되어 있다면 아래처럼 불러올 수 있다.

const 모듈이_담긴_변수 = require('모듈이름')

이제 변수에 모듈이 담겨 있게 된다.

다른 스크립트를 불러올 때

다른 스크립트를 불러오기 위해 require 구문을 사용할 수 있다.
결국 모듈이라는 것도 다른 스크립트라는 것을 상기해야 한다.

우리가 서로 다른 스크립트를 직접 만들었다고 했을 때,
동일한 디렉토리에 다른 두 개의 파일이 있는 경우를 가정하면 아래와 같이 불러올 수 있다.

// script1.js
const module2 = require('./script2.js') // ./는 현재 디렉토리이다.

// script2.js
console.log('this is module 2');

모듈로 노출시킬 때

위 예시에서 script1.js파일이 require구문을 이용하여 모듈을 불러올 때, script2.js에 담긴 내용이 실행되는 것을 추측할 수 있는데, 이 모든 과정을 담을 변수 module2에는 어떤 값이 들어가게 되는 것인지 알기 어렵다.

이 때에는 module.exports라는 것을 이용한다. 다른 스크립트 파일에서 내가 만든 모듈을 사용할 수 있도록 노출시키는 방법이다.

// script1.js
const module2 = require('./script2.js')
console.log(modules2) // 'this is module 2'

// script2.js
module.exports = 'this is module 2'

module.export를 축약하여 exports로 사용할 수 있다. (축약형)

이와 같은 모듈 노출 방법과 불러오는 방법을 CommonJS 모듈 시스템이라고 부른다.

주의사항
module.exports.anything과 exports.anything은 같은 역할을 하는 게 맞는데,
module.exports = { a: 1 }과 exports = { a: 1 }은 전혀 다른 결과가 나온다.
exports는 module.exports를 참조할 뿐이기 때문에, 직접 무언가를 할당하게 되면 정상적으로 작동하지 않는다.
그리고 module.exports에 이미 무언가 붙어 있는 상태라면, exports는 무시된다 (섞어 쓰면 안된다)
쉽게 말하자면, module.exports와 exports는 서로 재할당이 가능하기 때문에 주의해야 한다.