2주차 과제 팀원들의 comment를 참고 하면서 몰랐던 부분이나 부족한 부분을 공부
JSDoc / 모듈 시스템(ESM, CommonJS, AMD, UMD) / throw / 옵셔널 체이닝 / callback / return
JS 코드에 주석을 달기 위해 사용되는 마크업 언어
JS용 API 문서 생성기
https://jsdoc.app/
https://typescript-kr.github.io/pages/jsdoc-reference.html
https://www.youtube.com/watch?v=kz5phYvre_s
npm -i -D jsdoc
/** ... */
/**
* 면적 구하기 함수
* @param {number} width - 가로
* @param {number} height - 세로
* @returns {number} 면적
*/
function getArea(width, height){
return width * height;
}
방법1. target 지정해서 직접 실행
node_modules/jsdoc/jsdoc.js index.js
방법2. package.json -> npm run jsdoc
"scripts": {
"jsdoc": "jsdoc index.js",
},
실행시키면
/out
폴더에 문서 생성
최상위 폴더에 jsconfig.json
를 만들고 밑에 코드 추가
{
"compilerOptions":{
"allowJs": true,
"checkJs": true,
},
}
@param
함수에서 자주 사용
/**
* @param {{ x: number, y: number }} pos
*/
function getPos({x: x, y: y}){
console.log(x,y);
}
getPos({x: 1, y: 2})
getPos({y: 2}) // 에러 발생
@type
변수의 type 표기
/** @type { number } */
let width;
/** @type { boolean } */
let isReady = false;
/** @type { string[] } */
let fruits = ['apple', 'banana', 'cherry'];
// 타입 오류 발생
width = '100px';
isReady = 'true';
fruits = ['apple', 'banana', 'cherry', 1];
@typedef
타입 만들어 재사용 하기
/**
* Person 타입 정의
* @typedef {Object} Person - 사람
* @property {string} name - 이름
* @property {string\number} id - 아이디
* @property {number} age - 나이
*/
/** @type {Person} */
const person = {
name: 'jiyoon',
id: 237,
age: 25,
};
person.email = 'angella990825@gmail.com'; // 오류
@callback
콜백 함수 표시
/**
* onFocus 콜백
* @callback onFocus
* @param {Event} e
* @returns {void}
*/
/** @type {onFocus} */
const onFocus = (e) => {
console.log(e.target);
};
- 해당 파일의 모든 타입 체킹 무시
//@ts-nocheck
- any 타입
/** @param {*} data */
function handleData(data){
console.log(data);
}
@async
,@class
,@event
,@global
https://www.youdad.kr/js-module-system/
https://hini7.tistory.com/226
플러그인 파일이나 쪼개진 자바스크립트 코드 조각을 재사용하기 위해서 각각의 파일을 등록하고, 등록된 파일을 자바스크립트에서 불러와서 사용할 수 있게 해주는 프로그램
- 주로 클라이언트 사이드에서 사용
- 언어 자체에 표준으로 탑재된 모듈 시스템
export-import
문법 사용- 비동기로 동작하여 속도가 빠르고 실제 사용 부분만 import 하여 메모리가 적게 차지하고, 가독성이 좋고 순환 의존성을 지원
webpack과 같은 번들러와 같이 사용
1. export
named export
방식
- 선언된 변수명을 그대로
export
하는 방식named export
는 모듈 내에 여러개의export
가 존재 할 수 있음- 변수를 선언함과 동시에 내보내기를 할 수도 있고, 먼저 정의된 변수들을 모아서 내보내거나, 먼저 정의된 함수를 별칭으로 바꿔서 내보낼 수도 있음
export const name1 = 'lee';
export const name2 = 'kim';
const age1 = 25;
const age2 = 10;
export { age1, age2}
let key1;
export { key1 as key2} // 다른 모듈에서 import 할 때는 key2라는 이름으로 import
default export
방식
- 모듈에서 하나만 존재
- 변수를 직접 내보낼 수 없음
export default expresison;
export-from
방식
- import와 export를 한 번에 처리하는 문법
- 주로 패키지의 다른 모듀들을 모아서 일관된 형태로 내보내거나 관리 할 때 사용
- 클라이언트 사이드의 환경에서 from을 사용할 때,
.js
확장자를 적어야 함
2. import
name
은import
한 값의 현재 스코프 이름as
별칭으로 불러옴{member}
export
한 모듈의 멤버 이름
import name from 'module-name';
import * as name from 'module-name';
import {member} from 'module-name';
3. Module Type
<script type ="module" src="foo.mjs"></script>
script
태그에type="module"
을 선언하면 자바스크립트 파일은 모듈로 동작
이때, 모듈이라는 것을 명확하게 표헌하기 위해 확장자는mjs
를 붙이자
- 서버 사이드에서 사용하며(Node.js), 동기적으로 작동
require
문법 사용
- 서버 사이드와 클라이언트 사이드에서 사용할 수 있지만 클라이언트 사이드에서 주로 사용
- 비동기적으로 작동
- define-require 문법 사용
- 잘 안씀 -> ESM
- CommonJS와 AMD를 모두 사용하기 위한 구현 패턴
throw 연산자를 사용하면 에러를 직접 만들 수 있다.
이론상으론, throw 인수에 모든 것을 넘길 수 있지만, 대개 내장 Error 클래스를 상속받은 에러 객체를 인수에 넘긴다.
https://ko.javascript.info/try-catch
throw <error object>
let error = new Error(message);
let error = new SyntaxError(message);
let error = new ReferenceError(message);
// ...
let error = new Error("이상한 일이 발생했습니다");
alert(error.name); // Error
alert(error.message); // 이상한 일이 발생했습니다
?.은 ?.'앞’의 평가 대상이 undefined나 null이면 평가를 멈추고 undefined를 반환합니다.
obj?.prop
- obj가 존재하면 obj.prop을 반환하고, 그렇지 않으면 undefined를 반환함
obj?.[prop]
- obj가 존재하면 obj[prop]을 반환하고, 그렇지 않으면 undefined를 반환함
obj?.method()
- obj가 존재하면 obj.method()를 호출하고, 그렇지 않으면 undefined를 반환함
콜백 함수 - 함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수, 함수형 프로그래밍 패러다임과 비동기 처리에서 중요
고차 함수 - 매개변수를 통해 함수의 외부에서 콜백 함수를 전달받은 함수
고차 함수는 콜백 함수를 자신의 일부분으로 합성함
콜백 함수는 고차 함수에 의해 호출되며 이때 고차 함수는 필요에 따라 콜백 함수에 인수를 전달할 수 있음
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/return
return [[expression]];
expression
: 반환할 값으로 사용할 표현식, 생략시 undefined 반환
- 함수 중단 - 함수는
return
을 호출하는 지점에서 즉시 실행을 멈춤
function counter() {
for (let count = 1; ; count++) { // 무한 반복
console.log(count + "A"); // 5까지
if (count === 5) {
return;
}
console.log(count + "B"); // 4까지
}
console.log(count + "C"); // 절대 나타나지 않음
}
counter();
// 출력:
// 1A
// 1B
// 2A
// 2B
// 3A
// 3B
// 4A
// 4B
// 5A
- 함수 반환 - 클로저 연관
function magic(x) {
return function calc(x) { return x * 2 };
}
var answer = magic();
answer(3); // 6