TypeScript - 화살표 함수: 초보자 가이드

안녕하세요, 미래의 코딩 슈퍼스타! 오늘 우리는 TypeScript의 세계로 뛰어들어 그 중에서도 가장 멋진 기능 중 하나인 화살표 함수에 대해 탐구해보겠습니다. 프로그래밍에 새로운 사람이라면 걱정하지 마세요 - 이 흥미로운 여정에서 당신의 친절한 안내자가 되겠습니다. 마음에 드는 음료를 한 잔 챙기고 편안하게 앉아 있자, 시작해보겠습니다!

TypeScript - Arrow Functions

화살표 함수는 무엇인가요?

이제 구체적인 내용으로 들어가기 전에 화살표 함수가 무엇인지 이해해보겠습니다. TypeScript (그리고 JavaScript)에서 함수를 작성하는 간단한 방법으로 생각해보세요. 그것은 코딩 세계의 텍스트 약자와 같아요 - 빠르고 간결하며 정말 멋져요!

간단한 역사

화살표 함수는 ECMAScript 6(ES6)에서 도입되었으며, 이제 현대적인 JavaScript와 TypeScript에서 사랑받는 기능이 되었습니다. 그들의 문법에 따라 '화살표'를 포함하고 있어서 그렇게 불립니다. 함수가 무엇을 하는지 가리키는 것 같아요!

문법: 화살표 함수의 기본 블록

화살표 함수의 문법을 분해해보겠습니다. 걱정하지 마세요; 보이는 것보다 간단합니다!

기본 문법

(parameters) => { statements }

이것이 화살표 함수의 가장 기본적인 형태입니다. 이를 분해해보겠습니다:

parameters: 함수가 받는 입력입니다 (선택 사항).
=>: 이것은 화살표입니다. "결과는" 또는 "이끌어 간다"는 것과 같은 의미입니다.
{ statements }: 함수가 실행할 코드가 들어갑니다.

간결한 문법

함수가 간단하고 단일 값을 반환하는 경우 더 짧게 만들 수 있습니다:

(parameters) => expression

여기서 expression은 함수가 반환할 값입니다. 커리브 브래스나 return 키워드가 필요하지 않습니다!

예제: 화살표 함수를 실제로 사용해보기

이제 이를 잘 이해하기 위해 몇 가지 예제를 보겠습니다. 비교를 위해 전통적인 함수 문법과 화살표 함수 문법을 모두 보여드리겠습니다.

예제 1: 간단한 인사

전통적인 함수:

function greet(name: string) {
return "Hello, " + name + "!";
}

화살표 함수:

const greet = (name: string) => "Hello, " + name + "!";

이 예제에서 우리의 화살표 함수는 name 매개변수를 받아 인사를 반환합니다. 얼마나 간결해졌나요!

예제 2: 숫자 제곱

전통적인 함수:

function square(x: number) {
return x * x;
}

화살표 함수:

const square = (x: number) => x * x;

여기서 우리는 숫자를 제곱합니다. 화살표 함수는 그렇게 간단해서 커리브 브래스나 return 문이 필요하지 않습니다!

예제 3: 두 숫자 더하기

전통적인 함수:

function add(a: number, b: number) {
return a + b;
}

화살표 함수:

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

이 함수는 두 숫자를 더합니다. 다시한번 화살표 함수가 얼마나 깨끗하고 읽기 쉬운지 확인해보세요!

화살표 함수의 응용

이제 몇 가지 기본 예제를 봤으니, 화살표 함수가 빛나는 곳을 탐구해보겠습니다!

1. 배열 메서드

화살표 함수는 배열 메서드인 map, filter, reduce와 같은 것들에 훌륭하게 사용됩니다. map을 사용한 예제를 보겠습니다:

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((num) => num * 2);
console.log(doubled); // 출력: [2, 4, 6, 8, 10]

이 코드는 배열의 각 숫자를 두 배로 만듭니다. 화살표 함수 (num) => num * 2가 각 요소에 적용됩니다.

2. 이벤트 핸들러

화살표 함수는 웹 개발에서 이벤트 핸들러로도 훌륭합니다:

const button = document.getElementById('myButton');
button.addEventListener('click', () => {
console.log('Button clicked!');
});

이 코드는 버튼에 클릭 이벤트 리스너를 추가합니다. 클릭할 때 콘솔에 메시지를 출력합니다.

3. 객체 메서드

화살표 함수는 객체의 메서드로도 사용될 수 있습니다:

const person = {
name: "Alice",
greet: () => console.log("Hello, I'm Alice!")
};

person.greet(); // 출력: Hello, I'm Alice!

여기서 greet는 person 객체의 메서드로 정의된 화살표 함수입니다.

공통 오류와 기억해야 할 사항

this 바인딩: 화살표 함수는 자신의 this 컨텍스트를 가지지 않습니다. 그들은 주변 코드에서 this를 상속받습니다. 이는 필요에 따라 장점이자 단점이 될 수 있습니다.
arguments 객체: 화살표 함수는 자신의 arguments 객체를 가지지 않습니다. arguments를 사용해야 한다면 전통적인 함수를 사용하세요.
생성자로 사용할 수 없음: 화살표 함수는 new 키워드로 사용할 수 없습니다.

결론: 마무리

이제 TypeScript 화살표 함수의 세계를 여행했습니다. 그들의 세련된 문법에서부터 실용적인 응용까지, 화살표 함수는 코딩 도구함에서 강력한 도구입니다.

기억하세요, 좋은 슈퍼 헴으로서 화살표 함수는 그들의 장점과 제한을 가지고 있습니다. 지혜롭게 사용하면 코드가 더 깨끗하고 읽기 쉬우며 효율적이 됩니다.

코딩 여정을 계속하면서 화살표 함수를 자주 연습하세요. 그러면 곧 복잡한 TypeScript 프로젝트를 마스터하는 데 화살표 함수를 사용하는 것과 같은 솜씨를 가지게 될 것입니다!

행복한 코딩, 그리고 당신의 화살표가 항상 정확하게 날아가길 바랍니다! ??

메서드	설명	문법
기본 화살표 함수	간단한 함수와 매개변수	`(param1, param2) => { statements }`
단일 표현식	단일 표현식을 반환하는 함수	`(param) => expression`
매개변수 없음	매개변수가 없는 함수	`() => { statements }`
단일 매개변수	단일 매개변수 함수 (괄호 선택 사항)	`param => { statements }` 또는 `(param) => { statements }`
객체 리터럴	객체 리터럴을 반환하는 함수	`() => ({ key: value })`
즉시 호출 함수 표현식(IIFE)	자기 자신을 실행하는 화살표 함수	`(() => { statements })()`

Credits: Image by storyset

이전 튜토리얼:

TypeScript - 파라미터 분해할당

다음 튜토리얼:

TypeScript - 인터페이스