모듈화
코드 분산 처리 및 번들링을 용이하게 구현하기 위한 문법이다.
프론트엔드를 개발할 때 라이브러리를 설치하게 되면 일반적으로 모든 화면에서 해당 라이브러리를 사용하진 않는다.
이 때 번들링를 진행하면서 필요하지 않은 라이브러리, 코드들은 가지치기를 하는데 영어로는 Tree-Shaking이라고 한다더라.
이 과정을 통해 코드 자체의 가독성도 확보할 수 있고 페이지 로드 속도 증대도 꾀할 수 있다.
//es5
module.exports = {
//변수, 함수 등
}
const 변수명 = require('라이브러리');
//es6
//라이브러리 로딩
export default {변수, 함수 등}; //하나의 파일에서 한 번만 가능
import 변수명 from '라이브러리';
//변수, 함수 로딩
export {변수, 함수 등}; //export는 각각의 항목에 직접 선언 가능
import {변수명} from '파일 상대 경로';Null-Check
Null은 개발일을 하다보면 생각보다 매우매우매우 자주 보게되는 단어다.평소에도 코드를 작성할 때 Null 발생 확률을 줄이는 방향을 기조로 작성하고 있다.
자바스크립트에서도 마찬가지인데 ESLint라던지 타입스크립트가 많이 도와줘서 어느정도 Null을 배제한 코드를 작성하는 것이 가능해졌다.
기본적으로 처리하는 방법은 다음과 같다.
const div = document.querySelector('div'); if(div) { div.innerText = 'abc' }하지만 뭔가 Cool하지 않다. 모든 null-ish한 변수에 대해 저 작업을 해줘야할까?
다른 방법을 보자.
Type Assertion
Type Assertion은타입 단언으로 번역할 수 있는데 이 속성은 어떤 변수가null-ish한 값이 아니다(반드시 값이 있다)라고 선언하는 것이다.이는 코드 작성 중에는 어느 정도 컴파일 오류를 줄여주거나 하는 효과는 있지만 런타임에서 발생하는 null 오류를 처리해주거나 하진 않는다.
따라서 Development 환경에서 사용하고 Production 환경까지는 유지하지 않는 것이 좋다.
const div = document.querySelector('div');
div!.innerText = 'abc' //div가 null 가능함, 타입 단언으로 오류 제거
//위 코드에서 발생하는 이유는 querySelector의 return type이 HtmlElement | null이기 때문
//or
const div = document.querySelector('div') as HtmlDivElement;
div.innerText = 'abc' //오류 발생하지 않음
class User {
id: string = ''
name!: string //기본값 선언 없어도 오류 발생하지 않음
age: number //생성자에서 취급하지 않으면 오류 발생
constructor() {
this.age = 20
}
}Optional Chaining
Optional Chaining은 따로 한국어로 번역된 건 없는 것 같다.선택적 체이닝 혹은 선택적 연결이라고 하면 되겠다.해당 옵션은
어떤 변수가 null-ish하다면 이후 코드 실행 중지라는 처리를 해준다.컴파일 오류도 없애주고 런타임 오류도 효과적으로 줄일 수 있는 방법이다.
const div = document.querySelector('div');
div?.innerText = 'abc' //div가 null 가능함, 선택적 체이닝으로 오류 제거
//null이라면 innerText 변경 작업 하지 않음Generic Optional/Defaults
제네릭을 사용하면서 어떤 변수를 Optional 처리하거나 기본 값을 지정해줄 수도 있다.
이는 함수 혹은 클래스를 선언할 때 사용 가능하다.
//제네릭에 입력 값이 없다면 기본 제네릭 값 지정
function getHtmlElement<T extends HtmlElement = HtmlDivElement>(query: string = 'div') {
return document.querySelect(query) as T
}Nullish Coalescing
말 그대로
null-ish한 값의 기본 값을 지정해주는 문법이다.
//es6
const a = document.querySelecotor('div') ?? document.createElement('div')
//화면에 div 항목이 없다면 새로 만들어서 리턴비슷한 문법으로
||가 있는데 이 두 개의 차이점은 다음과 같다?? -> null, undefined와 같은 null-ish한 값을 검사
|| -> 0, ''(빈 문자열), false와 같은 falsy한 값을 검사
console.log(null ?? 'asdf'); //asdf
console.log(null || 'asdf'); //asdf
console.log(false ?? 'asdf'); //false
console.log(false || 'asdf'); //asdf
console.log(0 ?? 'asdf'); //0
console.log(0 || 'asdf'); //asdf
console.log('' ?? 'asdf'); //''
console.log('' || 'asdf'); //asdf객체 병합
여러 개의 객체를 하나의 객체로 병합하는 방법이다.
크게 2 가지 방법이 있다.
class A {
id = 'a';
}
class B {
name = 'name';
}
let a = new A();
let b = new B();
let c = Object.assign({}, a, b);
let d = {...a, ...b};객체 구조화(Destructuring)
일반적으로 객체에서 값을 조회할 때
'객체 이름'.'속성 이름'같은 방법을 사용하는데 객체 구조화를 사용하면 다음과 같이 객체의 값을 받아올 수 있다.
//단일 객체 구조화
class A {
id: 'a';
}
let { id } = new A(); //new A().id와 같음
//class 말고 object에 대해서도 적용 가능
console.log(id);
//배열 구조화
let arr = [1, 10, 100, 1000];
let [ one, ten, hundred, thousand ] = arr; //배열은 [] 사용
//중첩 객체 구조화
const person = {
name: 'Kim',
address: {
zipCode: '00000',
city: 'Seoul'
}
};
const { address: { city } } = person;
console.log(city); // 'Seoul'