ES6

var & let

function add (a: number, b: number) {
	var result;
	result = a + b;
	return result;
}
console.log(result);

var는 다른 함수 내부에 선언되어도 외부에서도 사용이 가능함

function add (a: number, b: number) {
	let result;
	result = a + b;
	return result;
}
console.log(result);    // ERROR

let은 함수 내부에서만 사용 가능하기에 구분할 수 있고 안정정으로 개발이 가능함

var의 사용을 지양하고 let을 사용하는 게 좋음

Arrow Functions

// 기존 함수 표현
const add = function(a: number, b: number) {
  return a + b;
};

// Arrow function
const add = (a: number, b: number) => {
  return a + b;
};

// 하나의 식이라면 중괄호 제거 가능 (암묵적인 return 있음)
const add = (a: number, b: number) => a + b;

// parameters가 한 개라면 괄호 생략 가능
const add = a => a;

const printOutput_1 = (output: string | number) => console.log(output);

const printOutput_2 = output: string | number => console.log(output);  // ERROR

const printOutput_3 = output => console.log(output);    // ERROR

상수에 어떤 타입이 저장될지 변수에 선언해줌

const printOutput: (a: number | string) => void = output => console.log(output);

const button = document.querySelector('button');

if (button) {
	button.addEventListener('click', event => console.log(event));
}

• 변형

const printOutput: (output: number | string) => number = output => {
    console.log(output);
    return typeof output === 'number' ? output : output.length;
};

Default Function Parameters

const add = (a: number, b: number = 1) => a + b;

add(5);       // 6
add(5, 2);    // 7

디폴트 값이 있는 매개 변수는 뒤에 위치해야 함

const add = (a: number = 1 , b: number) => a + b;    // ERROR

The Spread Operator ...

const hobbies = ['Sports', 'Codig'];
const activeHobbies = ['Hikking'];

activeHobbies.push(hobbies);    // ERROR

메모리 주소를 추가하기 때문에 중첩된 배열이 됨

const hobbies = ['Sports', 'Codig'];
const activeHobbies = ['Hikking'];

activeHobbies.push(hobbies[0], hobbies[1]);

위와 같이 해결하면 되지만

const hobbies = ['Sports', 'Codig'];
const activeHobbies = ['Hikking'];

activeHobbies.push(...hobbies);

위와 ...을 사용하면 배열이나 객체를 가리켜 안에 있는 요소들을 추가 가능함

const hobbies = ['Sports', 'Codig'];
const activeHobbies = ['Hikking', ...hobbies];

위와 같이 표현도 가능

const person = {
	name: 'Max',
	age: 30
};

const copiedPerson = person;    // 메모리를 넘겨줬기 떄문에 똑같이 person이나 다름 없음

const copiedPerson_2 = { ...person };    // person을 복사한 게 됨

메모리를 넘겨준 것이기 때문에 포인터와 같이 copiedPerson.name = 'Changed person name' 하게 되면 person 객체의 name도 바뀌게 됨
따라서 복사를 하려면 const copiedPerson_2 = { ...person };와 같이 사용해야 함

Rest Parameters

여러개의 인수를 받을 수 있음, 튜플 타입과는 다름. 원하는 만큼의 인수를 받아올 수 있음

const add = (...numbers: number[]) => {
	return numbers.reduce((curResult, curValue) => {
		return curResult + curValue;
	}, 0);
};
console.log(add(5, 10, 2, 3.7));    // 20.7

reduce 메서드 사용법
배열의 여러개의 값을 하나의 값으로 축소해준다.
배열.reduce(콜백함수, 초기값), 초기값은 생략 가능

Array & Object Destructuring

const person = {
	name: 'Max',
	age: 30
};
const hobbies = ['Sports', 'Codig'];

// 코드가 길어짐
const hobby_1 = hobbies[0];
const hobby_2 = hobbies[1];

// 배열을 분해해서 변수에 저장함. 위와 같은 역할임. 나머지 인수들은 remain에 저장됨
// hobbies의 배열은 그대로임 즉, 복사임
const [hobby1, hobby2, ...remain] = hobbies;


// 배열 destructuring과 유사한 동작을 함
const { name, age } = person;

// name: myName은 TypeScript 형식과는 별개로 JavaScript 문법임
// 해당 객체의 name을 myName에 복사해서 사용 가능.
const { name: myName, age } = person;

console.log(name);    // ERROR
console.log(myName, age);    // Max 30