TypeScript 강의 정리: 차세대 JS와 TS

1. var, let, const

• var는 예전부터 JS에서 변수를 선언하기 위해 사용되어 왔고, let과 const는 ES6 버전부터 사용되기 시작됐다.
• const는 말그대로 상수(constant)를 설정해주기 위한 것으로 절대로 변하지 않을 값을 지정할 때 사용한다.

const name = "Max";
name = "Anna";  // -> error occured!

• let은 재할당될 수 있는 변수값을 지정할 때 사용한다. 그렇다면 let과 var가 무슨 차이가 있느냐고 의구심을 품을 수 있다.
• 우선 var는 같은 이름의 변수를 재선언해도 문제삼지 않지만 let은 문제를 삼는다.
• var는 전역 & 지역 scope만을 유효범위로 삼는 반면에 let과 const는 블록 scope(변수나 상수가 정의된 블록이나 그 하위블록)라는 새로운 개념으로 접근한다.
  (* 블록은 if문이나 for문과 같은 중괄호가 사용되는 코드 내의 스니펫이라고 여기면 된다.)

const age = 29;

/*----- var -----*/
if(age > 20){
  var isEnough1 = true;
}

console.log(isEnough1);  // TS가 컴파일할 때는 에러가 나지만 JS에서는 에러가 나지 않는다.

/*----- let -----*/
if(age > 20){
  let isEnough2 = true;
}

console.log(isEnough2);  // isEnough가 undefined 상태라며 에러가 뜬다.

• 위와 같은 이유로 var 대신 let과 const를 사용하면 보다 깔끔하고 정확하게 코드 작성이 가능해진다.

2. arrow function(화살표 함수)

• arrow 함수 또한 새롭게 등장한 함수 표기법인데 기존의 함수 표기법보다 비교적 길이가 짧고, 다양하게 활용이 가능하다는 점에서 많이 사용된다.

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

• arrow 함수에서 표현식이 하나뿐일 땐 굳이 중괄호와 return을 써주지 않아도 알아서 처리해준다.

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

• arrow 함수에서 파라미터가 한 개일 경우 소괄호를 생략 가능하다.

const printString = inputVal => console.log(inputVal);
const printString: (inputVal: string | number) => void = inputVal => console.log(inputVal); //TS를 활용할 경우

3. 파라미터 기본값 설정

• 함수를 선언할 때 파라미터의 기본값을 설정해놓으면 설령 파라미터가 들어오지 않아도 설정된 기본값으로 함수를 동작시킨다.

const add = (a: number, b: number = 1) => a + b;
console.log(add(5));  // 6

• 파라미터는 순서를 중요하게 여기기 때문에 아래와 같이 첫번째 파라미터에 기본값을 설정해두면 에러가 발생한다. 따라서 기본값을 갖지 않는 파라미터가 기본값을 갖는 파라미터보다 앞에 있어야 한다.

const add = (a: number = 1, b: number) => a + b;
console.log(add(5));  // error occured!

4. 스프레드 연산자(...)

• 배열이나 객체 등의 요소를 추출할 때 사용하는 기능으로, 깊은 복사와 관련있다.
  참고: 얕은/깊은 복사

const hobbies = ["Sports, Cooking"];
const addHobbies = ["Hiking", ...hobbies];
console.log(addHobbies)  // ['Hiking', 'Sports, Cooking']

5. 나머지 매개변수

• 함수에서 매개변수의 개수에 제한을 두지 않아야 할 때 사용하는 기능이다.

const add = (...numbers: number[]) => {
  return numbers.reduce((acc, cur) => {
    return acc + cur;
  }, 0);
}

console.log(add(1, 2, 3, 4, 5, 6, 7, 8, 9, 10));

6. 배열 및 객체 비구조화 할당

/*----- 배열 -----*/
const hobbies = ["Hiking", "Sports", "Cooking"];
const [hobby1, hobby2, hobby3] = hobbies;
console.log(hobby1, hobby2, hobby3);  // Hiking Sports Cooking

/*----- 객체 -----*/
const person = {
  name: "Max",
  age: 29,
  sex: "M",
};
const { name: userName, age, sex } = person;  // {} 안의 내용은 기존에 작성했던 객체의 key값과 같아야 하고 필요하면 alias를 따로 줄 수 있다.
console.log(userName, age, sex);  // Max 29 M