[TypeScript] 모던 자바스크립로 작성하기

 

🌈 목차

1. ECMAScript 모듈 사용하기
2. 프로토타입 대신 클래스 사용하기
3. var 대신 let/const 사용하기
4. for(;;) 대신 for-of 또는 배열 메서드 사용하기
5. 함수 표현식보다 화살표 함수 사용하기
6. 단축 객체 표현과 구조 분해 할당 사용하기

 

 

---

 

 

ECMAScript 모듈 사용하기

◽ 개별로 모듈을 분리했던 과거의 방법들

개별 모듈로 분리하는 방법은 여러개의 <script> 사용하기, makefile 기법(뭔지 모르겠음..), NodeJS 스타일의 require 구문, AMD 스타일의 define 콜백까지 매우 다양했다.

 

📄 CommonJS - required 구문

// a.js
const b = require('./b')

// b.js
const name = require('Module B')
module.export = {name}

 

📄 AMD 스타일 - define 콜백

// 모듈 선언하기
// myModule.js
define(['package/lib'], function (lib) {
  function foo () {
    lib.log('hello world!');
  }
  
  return {
    foobar: foo
  };
});

// 선언한 모듈 불러오기
require(['package/myModule'], function (myModule) {
  myModule.foobar();
});

 

 

◽ ECMAScript 모듈

ES2015부터는 임포트(import)/익스포트(export)를 사용하는 ECMAScript 모듈(또는 ES 모듈)이 표준이 되었다.

 

📄 CommonJS

// CommonJS
// a.js
const b = require('./b')

// b.js
const name = require('Module B')
module.export = {name}

 

동일한 기능을 하는 코드를 ES 모듈로 표현해보자!

 

📄 ECMAScript module

// ECMAScript module
// a.ts
import * as b from './b'

// b.ts
export const name = 'Module B'

 

 

---

 

 

프로토타입 대신 클래스 사용하기

 

과거에는 자바스크립트에서 프로토타입 기반의 객체 모델을 사용했다. 많은 개발자가 사용하기 애매한 프로토타입 모델보다는 견고하게 설계된 클래스 기반 모델을 선호했기 때문에, 결국 ES2015에 class 키워드를 사용하는 클래스 기반 모델이 도입되었다.

 

 

📄 프로토타입 기반 객체

function Person(first, last) {
    this.first = first
    this.last = last
}

Person.prototype.getName = function() {
    return this.first + ' ' + this.last
}

const marie = new Person('Marie', 'Curie')
const personName = marie.getName()

 

 

이를 클래스 기반 객체로 변경해보자!

클래스로 구현한 객체가 문법이 더 간결하고 직관적이다.

(class는 Java로 개발할 때는 당연하게 사용했었는데 자바스크립트 쓸 때는 사용해 본 적이 없다. 그래서 어디에 쓰는건지, 언제 써야하는건지, 어떻게 효율이 좋아지는지 이해가 잘 안된다... 다른 강의나 예제를 좀 더 찾아봐야 할 것 같다.)

 

 

📄 클래스 기반 객체

class Person {
    first: string
    last: string
    
    constructor(first: string, last: string) {
        this.first = first
        this.last = last
    }
    
    getName() {
    	return this.first + ' ' + this.last
    }
}

const marie = new Person('Marie', 'Curie')
const personName = marie.getName()

 

 

 

---

 

 

 

var 대신 let/const 사용하기

 

자바스크립트에서 var 키워드의 스코프(scope) 규칙에는 문제가 있다.

• var는 '함수 레벨 스코프'로 함수 코드 블록만을 지역 스코프로 인정하기때문에 함수 내에 if, for, while, try/catch 등의 블록 스코프를 지원하지 않아 동일한 변수명일 경우 덮어씌워지고 개발자의 의도대로 함수가 동작하지 않는 문제가 발생한다. let/const는 블록 레벨 스코프를 지원하기때문에 개발자가 기대하는 방식으로 동작할 가능성이 높다.
• var는 호이스팅이 되면 undefined로 초기화되지만 let/const는 초기화가 되지 않아 ReferenceError가 발생한다. 더 명확한 let/const를 사용하는 것이 좋다.

 

 

---

 

 

for(;;) 대신 for-of 또는 배열 메서드 사용하기

 

과거에는 C 스타일의 for 루프를 사용했지만 모던 자바스크립트에는 for-of 루프가 존재한다.

• for-of: 코드가 짧고 인덱스 변수를 사용하지도 않기 때문에 실수를 줄일 수 있다.
• forEach: 인덱스 변수가 필요한 경우에는 forEach를 사용하면 된다.
• for-in: 속도가 느리다는 단점이 있으므로 사용을 지양해야 한다.

 

---

 

 

함수 표현식보다 화살표 함수 사용하기

 

this 키워드는 일반적인 변수들과는 다른 스코프 규칙을 가지기 때문에, 자바스크립트에서 가장 어려운 개념 중 하나이다.

• 함수 표현식에서의 this는 window를 가리킨다.
• 화살표 함수에서는 상위 스코프의 this를 유지한다.

 

 

---

 

 

단축 객체 표현과 구조 분해 할당 사용하기

 

◽ 문법 사용하기

const props = obj.props
const a = props.a
const b = props.b

// 이렇게 바꿀 수 있다.
const { props } = obj
const { a, b } = props

// 이렇게도 줄일 수 있다.
const { props: {a, b} } = obj

 

 

◽ 기본값 지정하기

const { a = 'default' } = obj.props

 

 

◽ 배열에서 사용하기

const point = [1, 2, 3]
const [x, y, z] = point
const [, a, b] = point // 첫번째 요소는 무시한다.

 

 

◽ 함수 매개변수에서 사용하기

const points = [
    [1, 2, 3],
    [4, 5, 6],
]

points.forEach(([x, y, z]) => console.log(x + y + z)) // 6, 15

 

 

 

 

---

 

 

 

출처

댄 밴터캄, 이펙티브 타입스크립트 (프로그래밍 인사이트, 2021)

[javascript] CJS, AMD, UMD, ESM 이란? / 사용법

var, let, const 차이점

 

 

 

---

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.