TS VS ES6

블록 영역 변수, 상수 선언

• ES6부터 let, const 키워드를 사용해 변수, 상수를 정의 가능
• TypeScript 또한 마찬가지로 활용 가능
• let 변수는 var 변수가 불러오는 문제점(중복 선언, 호이스팅에 따른 의도치 않은 동작 등) 해결 가능
• let, const 키워드를 사용하면 블록 스코프(Block Scope)를 사용가능

let context = document.querySelector('html');

{
  let context = document.querySelector('body');
  console.log('블록문 내부 context = ', context);
}

console.log('글로벌 context = ', context);

템플릿 리터럴

• ES6부터 템플릿 리터럴을 활용해 템플릿 구문을 처리(문자열 접합) 가능
• TypeScript에서도 템플릿 리터럴을 사용해 템플릿 구문사용 가능

사용법

• backtick(`) 을 사용하여 문자열을 정의
• ${} 를 통해 값에 접근

let nickname = 'yamoo9';

let greeting_message = `
  <p>
    안녕하세요 <strong>${nickname}</strong>님.
    가입을 환영합니다. :-)
  </p>
`;

컴파일 코드

var nickname = 'yamoo9';

var greeting_message = "\n  <p>\n    \uC548\uB155\uD558\uC138\uC694 <strong>" + nickname + "</strong>\uB2D8.\n    \uAC00\uC785\uC744 \uD658\uC601\uD569\uB2C8\uB2E4. :-)\n  </p>\n";

화살표 함수

• ES6부터 식(Expression)에 한해 화살표 함수식 활용가능
• TypeScript 또한 화살표 함수식 사용가능

let corsURL = (url:string): string => `https://crossorigin.me/${url}`;

corsURL('http://yamoo9.herokuapp.com/rest/ediya-menu');

전개 연산자 / 매개변수

Default Parameters

• ES6부터 함수 매개 변수의 기본 값 설정가능
• TypeScript는 매개 변수 타입 설정 후 = 뒤에 기본 값을 할당

function countDown(start:number = 10): ()=>number {
  return () => start > 0 ? start-- : 0;
}

컴파일 코드

function countDown(start) {
  if (start === void 0) { start = 10; }
  return function () { return start > 0 ? start-- : 0; };
}

Spread Operator

• ES6부터 전개 연산자 사용가능
• TypeScript 역시 전개 연산자 지원, ... 문법을 활용하여 사용

let numbers:number[] = [101, 21, -12, 934, 87];

numbers = [10, 31, 11, ...numbers, -2, 0];

console.log(numbers);
// numbers = [10, 31, 11, 101, 21, -12, 934, 87, -2, 0]

Rest Parameters

• ES6부터 ... 을 함수의 매개변수 앞에 붙여 나머지 매개 변수 사용가능
• TypeScript에서 활용 방법 또한 동일

function makeArray(...args:(number|string)[]): (number|string)[] {
  return args;
}

makeArray(11, 'eleven', 100, 'one hundred');

비구조화 할당

비구조화 할당은 배열, 객체의 아이템 또는 속성을 변수에 할당할 때 유용

// 배열 비구조화 할당
let [html, , body] = [document.documentElement, document.head, document.body];

// 객체 비구조화 할당
let numbers_module = {
    multiplyNumbers: (...n:number[]):number => n.reduce((a, b) => a * b),
    sumNumbers: (...n:number[]):number => n.reduce((a, b) => a + b)
};

let { sumNumbers } = numbers_module;