Section 4. 차세대 자바스크립트와 TypeScript

📣  강의 내용 정리

𝟭.  let 및 const

✔️ let : var과 비슷하게 변경할 수 있다.

✚ var이 있는데 왜 let을 쓸까?

✔️ 두 변수를 사용할 수 있는 유효범위가 다르기 떄문

➰ var는 전역 유효 범위와 함수 유효 범위만 지닌다 -> 두 범위 외에는 인식하지 못한다.

for(age > 20) {
    var isOld = true;
}

console.log(isOld) // true

➰ let는 블록 유효 범위도 지닌다({})

✔️ const : 한번 선언하면 변경할 수 없다 -> 상수

 

𝟮.  화살표 함수

✔️ function 키워드를 사용하지 않아 간결하며, 다양하게 응용 가능하다.

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

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

const printOutput: (a: number | string) => void = output => console.log(output);
// 인수가 하나인 경우
// js에서는 const printOutput = output => console.log(output)으로도 작동하지만,
// 타입스크립트는 타입 배정을 해줘야 한다.

if(button) {
    button.addEventListener('click', event => console.log(event));
}
// 타입 배정 해줄 필요 없다 -> addEventListener 메소드가 어떤 기능을 지니는지, 그리고 이것이 event객체가 된다는 것을
// 타입스크립트가 알고있다.

 

𝟯.  기본값 함수 매개변수

✔️ 매개변수에 디폴트 값 주기(전달 안해줬을 때 사용할 값)

const add = (a:number = 1, b: number) => a + b;
add(2, 5);	// 가능
add(1); // 불가능

const add = (a:number, b: number = 5) => a + b;
add(2, 5);	// 가능
add(1); // 가능

➰ 첫번째 매개변수에만 디폴트 값을 준 경우 두번째 매개변수는 무조건 값을 전달해주어야 한다.

➰ 디폴트 값을 주지 않은 매개변수를 앞쪽에 오도록 해야한다.

 

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

✔️ 전개하고자 하는 배열이나 객체를 지정한다.

const hobbies = ['Sports', 'Cooking'];
const activeHobbies = ['Hiking'];

activeHobbies.push(...hobbies);

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

const copiedPerson = person;
// 객체의 주소값을 복사한다.

const copiedPerson2 = { ...person };
// 값을 그대로 복사한다.

 

𝟱.  나머지 매개변수

✔️ 매개변수에 여러 개의 값을 입력해야 하는 경우에 사용

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

const addedNumbers = add(5, 10, 2, 3.7);
// 20.7

 

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

✔️ 배열, 객체에서 요소를 추출하는 것

const hobbies = ['Sports', 'Cooking'];
const [hobby1, hobby2, ...remainingHobbies] = hobbies;


const person = {
    name: 'Max',
    age: 30
};
const { name: userName, age } = person;
// 키 이름으로 값을 가져온다.
// : 뒤에 쓴 변수는 타입스크립트 구문이 아니라 이름을 재 설정해주는 자바스크립트 구문이다.

➰ 원본 배열이나 객체를 바꾸는 건 아니다.

---

💡  새로 알게 된 점

✔️  자바스크립트 기본 문법 강의여서 새로 알게된 것 보다는 복습 개념이었다.