에러 처리
에러가 발생하지 않는 코드를 작성하는건 불가능하다. 따라서 에러를 대처하는 게 개발자의 덕목이자 필수요소다.
try{
foo()
} catch(e){
console.log(e);
// ReferenceError: foo is not defined
}위처럼 try-catch를 이용하여 에러처리를 할 수 있다. 참고로 try-catch-finally가 한 셋트다.
finally는 에러가 나지 않아도 내부 블록의 코드가 실행된다.
단, try-catch-finally를 사용해도 예외 처리는 불가능하다.
const $button = document.querySelector('button') //버튼이 없어서 null을 반환한다
$button.classList.add('disabled');
// TypeError: Cannot read property => null에게 classList메서드를 사용하려고 했다.예외를 처리하는 방법은 if문이나 옵셔널 체이닝등이 존재한다.
Error 객체
에러의 정보를 담고있는 객체다. 여러 에러 종류가 있다. 모두 생성자 함수로 존재함.
- Error
- SyntaxError
- ReferenceError
- TypeError
- RangeError
- URIError
- EvalError
이름이 직관적이라 모두 알아보기 쉽다.
throw문
에러를 발생시키고 싶다면 try코드블록에서 thorw문을 사용해 에러객체를 던질 수 있다.
try{
throw new Error("에러") ;
} catch(e) {}
console.log(e) //에러
}에러의 전파
에러는 호출자 방향으로 전파된다. 즉 콜스택의 아래방향(실행 중인 실행 컨텍스트가 푸시되기 직전에 푸시된 실행 컨텍스트 방향)으로 전파된다.
const foo = () => throw new Error('foo');
const bar = () => foo();
const baz = () => bar();
try{
baz();
} catch(e){
console.error(e)
}정확히 baz => bar => foo => 전역컨텍스트순으로 전파되어 전역에서 캐치된다(프로그램이 강제종료됨). 이래서 try를 사용하고 에러처리를 해야한다.
주의할 점은 콜백 함수는 호출자가 없다. 따라서 에러를 전파할 호출자가 존재하지 않는다(에러 바운더리에서 콜백함수의 에러를 잡지 못하는 것과 동일한 개념인가?)
모듈
모듈이란 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각이다. => 컴포넌트와 비슷하구만?
모듈은 자신만의 파일 스코프(모듈 스코프)를 가질 수 있어야 한다. 즉, 캡슐화되어 전역과 구분되어야한다.
모듈은 공개가 필요한 자산에 한하여 선택적 공개가 가능함 => export
이렇게 공개한 자산을 다른 모듈이 가져와서 사용할 수 있음 => import
원래 모듈이 없던 JS는 CJS를 사용하게된다.(NodeJs한정) => import/require
ES6모듈(ESM)
그런데, ES6이후 모듈이 등장함! 클라이언트사이드에서도 사용 가능하게!
<script type="module" src="./module.mjs">이렇게 타입을 붙여주면 사용할 수 있다. 참고로 확장자는 명시적으로 모듈임을 나타내기 위하여 사용된 것(권장).
ESM은 독자적인 모듈 스코프를 제공한다 => var키워드로 선언하여도 전역변수가 되지 않는다.(그래도 지양하자)
또한 모듈 내에서 선언한 식별자는 외부에서 참조 불가(import 안할 시)
export 기법
export const test = "hi" // 하나만 내보내기
export default test // 파일 내에서 딱 하나만 내보내기
const a = 1;
const b = 2;
const c = 3;
export {a,b,c} //하나의 객체로 구성하여 내보내기import 기법
import * as lib from './lib.mjs'; //lib내부 export한 파일들 모두 가져오기
console.log(lib.pi);
conosle.log(lib.square(10))
import {pi as PI, square as sq} from './lib.mjs' //이름바꿔 가져오기
import test from './test.mjs' // export default로 내보낸 값은 '{}'없이 가져온다...모던 JS 딥다이브 후기
화요일에 회고 적으면서 같이 적어보겠음ㅎㅎ
