JSDoc

JSDoc는 TypeScript처럼 강제성을 주지 않고 오로지 힌트를 주기 위해 사용한다.

 

코드)

/**
 * 어떤 함수인지 설명
 * @todo 내일까지 XX 기능 추가
 * @param {string} name 이름
 * @param {number} age 나이
 * @returns 두개 합쳐서 문자로 뱉어줘요
 */
const hello = (name, age) => {
	return `${name}은 ${age}살 입니다.`;
};

hello('멍멍이', 5);

 

결과)

@param 은 함수의 parameter를 말하고, 그 옆에 있는 {} 중괄호는 어떤 타입인지 힌트로 알려줄 수 있다.

name은 parameter 명을 쓴 것이고, 그 옆은 parameter에 대한 설명이다.

@todo는 메모 기능이라고 보면 된다, '내일은 무슨 기능 추가할거야' 라는 등의 메모 끄적끄적..

 

 

코드)

/**
 * @version 16.19.0
 * @see https://naver.com
 */
function test() {

}

 

결과)

위 JSDoc에서 @version은 버전 정보를, @see는 여기를 참고하라고 알려줄 수 있다.

 

 

코드)

/**
 * @readonly
 * @const {number}
 */
 const num = 1;

 

결과)

위 JSDoc에서 @readonly는 읽기 전용이다 라고 알려주는 힌트, @const {number}은 해당 상수의 타입에 대한 힌트를 준다.

 

 

코드)

/** @type {string | number} */
const name = 'kim';

/** @type {number[]} */
const num = [1, 2, 3];

 

결과)

변수만들 때 이렇게 타입들도 넣을 수 있음,

TypeScript 같은 기능을 구현할 수도 있음

 

 

코드)

/**
 * 테스트 객체
 * @property {string} name 이름
 * @property {number} age 나이
 * @method go 가즈아
 */
const test = {
  name: 'kim',
  age: 35,
  go() {
    console.log('JSDoc는 유용해');
  }
};

 

결과)

객체에서도 @property {타입} 프로퍼티명 설명 으로 구성도 가능하다.

당연히 @method 메서드명 설명 으로 메서드에 대해서도 힌트를 주는 게 가능하다!

 

 

코드)

/**
 * @deprecated 이제 이거 그만쓰고 다른거 써야합니다
 */ 
function gridMake(col, row) {

}

 

결과)

위 JSDoc에서 @deprecated는 경고를 줄 수 있습니다.

경고를 통해 해당 함수에 gridMake(); 취소선으로 그어버릴 수(?)도 있습니다.