[TypeScript] 화살표 함수

화살표 함수란

화살표 함수는 `=>` 기호를 사용해 함수를 정의하며, TypeScript에서는 매개변수와 반환 타입에 타입을 명시할 수 있습니다.

기본문법

let 함수명 = (매개변수1: 타입1, 매개변수2: 타입2): 반환타입 => {
  // 함수 본문
};

기본 예제

let sayHello = (user: string): string => {
  return `안녕하세요, ${user}님!`;
};

console.log(sayHello("지영")); // 출력: 안녕하세요, 지영님!

한 줄일 경우 중괄호와 `return`을 생략할 수도 있습니다

let sayHelloShort = (user: string): string => `안녕하세요, ${user}님!`;

숫자 계산 예제

let subtract = (a: number, b: number): number => a - b;

console.log(subtract(10, 7));  // 출력: 3
console.log(subtract(50, 42)); // 출력: 8

복합 타입 예제

let formatProfile = (id: number, name: string, scores: number[]): string => {
  return `${id}번 ${name} - 점수: ${scores.join(" | ")}`;
};

console.log(formatProfile(1, "민수", [85, 90, 88]));
// 출력: 1번 민수 - 점수: 85 | 90 | 88

화살표 함수의 장점

• 간결함: 불필요한 구문을 줄여 코드가 깔끔해집니다.
• this 바인딩: 외부 컨텍스트의 `this`를 유지해, 콜백 함수에서 유리합니다.

this 유지 확인 예제

class Counter {
  count = 0;
  increment = () => {
    this.count++;
    return this.count;
  };
}

const counter = new Counter();
console.log(counter.increment()); // 출력: 1
console.log(counter.increment()); // 출력: 2