[JavaScript] JSDoc으로 함수 쉽게 사용하기.

JSDoc

JSDoc은 JavaDoc과 유사한, JavaScript용 API 생성기인데, 문서 주석을 코드와 함께 직접 소스 코드에 추가할 수 있다.

오늘은 JSDoc을 활용하여 개발을 좀 더 쉽게 하는 방법에 대해 학습해보자.

 

 

함수 printWord를 만들어 예를 들어보자

printWord는 인자 하나를 받아, 콘솔에 출려하는 함수다. 우리는 해당 함수를 아래와 같이 선언 하고 호출 할 것이다.

const printWord = (word) => {
  console.log(word)
}

printWord('Hello')

 

하지만 함수가 많아지고, 혼자가 아닌 여럿이서 개발을 하게 되면 어떨까?? 분명 해당 함수가 어떤 역할을 하는 지 무엇을 매개 변수로 받는 지를 쉽게 파악하기 어렵다.

 

따라서 JSDoc을 사용하면, 해당 함수에 대한 설명을 쉽게 해줄 수 있다.

/** 인자를 받아, 콘솔에 출력 */
const printWord = (word) => {
  console.log(word)
}

printWord('Hello')

 

위와 같이 주석을 작성하면, 함수명 위에 마우스를 올리면 아래와 같이 나온다.

해당 함수에 대한 설명을 보고 해당 함수의 기능을 쉽게 파악 할 수 있다.

좌) 기존 코드, 우) JSDoc 활용 코드

 

조금 더 활용을 해보자. 이제 해당 함수가 어떤 기능을 구현한 지 쉽게 알 수 있지만, 해당 함수의 매개 변수로 무엇이 들어가고, 무엇이 리턴 되는 지는 알 수 없다. 따라서 매개 변수의 인자와 함수의 반환형에 대한 설명도 기입하자.

/**
 * 두 수의 차를 구한다.
 * @param {number} a
 * @param {number} b
 * @returns {number}
 */
const addNumber = (a, b) => {
  return a + b
}

addNumber(2, 3)

 

위와 같이 작성하면, 매개 변수의 타입과 해당 함수의 리턴 값의 타입을 지정해줄 수 있고, 마찬가지로, 해당 함수 명에 마우스 포인터를 올리면 아래의 이미지와 같이 타입을 설명해준다.