TypeScript - 익명 함수: 초보자 가이드

안녕하세요, 미래의 코딩 슈퍼스타 여러분! 오늘 우리는 TypeScript의 흥미로운 세상으로 뛰어들어 익명 함수라는 개념을 탐구해보겠습니다. 이 개념이 첫听起来 조금 수수께끼 같은 느낌이 들 수 있지만, 이 튜토리얼이 끝나면 이 함수들을 마스터级别로 다룰 수 있을 것입니다!

익명 함수는 무엇인가요?

들어가기 전에 "익명 함수"라는 말이 무엇을 의미하는지 설명해보겠습니다. 프로그래밍 세계에서 우리는 자주 함수에 이름을 지어줍니다. 예를 들어, "calculateTotal"이나 "sendEmail"과 같은 이름들입니다. 하지만 때로는 이름이 필요 없는 함수를 만드는 경우가 있습니다. 이러한 이름 없는 기이한 존재들은 코딩 우주의 마스크를 쓴 영웅들입니다. 이러한 이름 없는 신비한 존재들을 우리는 익명 함수라고 부릅니다.

마스크를 쓴 모임을 상상해보세요. 모두가 멋진 마스크를 쓰고 있어서 얼굴을 볼 수 없고 이름을 알 수 없습니다. 하지만 그들은 여전히 춤을 추고, 이야기하고, 즐거워할 수 있습니다. 익명 함수가 우리 코드에서 하는 일은 이와 비슷합니다. 그들은 형식적인 소개가 필요 없이 작업을 수행합니다!

이제 TypeScript에서 이러한 익명 함수를 만드는 다양한 방법을 살펴보겠습니다.

'function' 키워드로 익명 함수 정의하기

익명 함수를 만드는 첫 번째 방법은 오래된 'function' 키워드를 사용하는 것입니다. 다음과 같이 보입니다:

let greet = function(name: string) {
console.log("Hello, " + name + "!");
};

greet("Alice"); // 출력: Hello, Alice!

이 예제에서 우리는 누군가에게 인사를 전하는 함수를 만들고 있습니다. 이를 구분해보겠습니다:

1. let greet =로 시작합니다. 이는 'greet'이라는 변수를 만드는 것입니다.
2. 등호 이후에 function(name: string) { ... }가 있습니다. 이는 우리의 익명 함수입니다.
3. 대괄호 { } 내부는 함수 본문입니다. 즉, 함수가 실제로 수행하는 작업입니다.
4. 이제 greet("Alice")를 호출하여 함수를 사용할 수 있습니다.

이는 마치 누군가에게 인사를 할 수 있는 친절한 로봇을 만들고, 그 로봇에게 'greet'이라는 암호를 주는 것과 같습니다!

화살표 함수를 사용하여 익명 함수 정의하기

이제 익명 함수를 더 현대적이고 간결하게 작성하는 방법을 살펴보겠습니다. 화살표 함수 문법입니다. 이는 함수 세계의 스포츠카와 같습니다: 슬림하고, 빠르고, 멋진 모습!

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

console.log(add(5, 3)); // 출력: 8

여기서 일어나는 일은 다음과 같습니다:

1. 'add'라는 변수를 만듭니다.
2. (a: number, b: number) 부분은 함수가 받는 매개변수를 정의합니다.
3. : number는 함수가 숫자를 반환할 것임을 나타냅니다.
4. =>는 이를 화살표 함수로 만드는 부분입니다 (화살표처럼 보이죠?).
5. { } 내부는 함수 본문입니다.

간단한 함수의 경우 이를 더 짧게 만들 수 있습니다:

let multiply = (a: number, b: number): number => a * b;

console.log(multiply(4, 6)); // 출력: 24

이 경우 우리는 { }와 return 키워드를 제거했습니다. 마치 함수가 "저는 너무 간단해서 이 모든 추가 기호가 필요 없어!"라고 말하는 것과 같습니다!

익명 함수를 콜백 함수로 사용하기

이제 익명 함수가 진정으로 빛을 발하는 부분입니다. 콜백 함수로 사용할 때입니다. 콜백 함수는 다른 함수에 인자로 전달되는 함수입니다. 마치 친구에게 "너의 작업이 끝났을 때 이 일을 해달라"고 말하는 것과 같습니다.

setTimeout 함수를 사용하는 예제를 보겠습니다:

setTimeout(() => {
console.log("2초 후에 이 메시지가 표시됩니다!");
}, 2000);

이 코드에서:

1. setTimeout은 지정된 시간 후에 작업을 수행하는 함수입니다.
2. 첫 번째 인자는 우리의 익명 함수로, 화살표 함수로 작성되었습니다.
3. 두 번째 인자(2000)는 기다릴 시간입니다(2초).

이는 마치 타이머를 설정하고, "타이머가 울리면 이 메시지를 표시하라"고 말하는 것과 같습니다!

다른 예제로 배열 메서드를 사용하는 예제를 보겠습니다:

let numbers = [1, 2, 3, 4, 5];

let doubledNumbers = numbers.map((num) => num * 2);

console.log(doubledNumbers); // 출력: [2, 4, 6, 8, 10]

이 경우:

1. 우리는 숫자 배열을 가지고 있습니다.
2. map 함수는 배열의 각 요소에 함수를 적용합니다.
3. 우리의 익명 함수 (num) => num * 2는 각 숫자를 두 배로 만듭니다.
4. 결과는 모든 숫자가 두 배인 새로운 배열입니다.

이는 마치 각 숫자를 두 배로 만드는 기계를 만들고, 그 결과를 새로운 상자에 넣는 것과 같습니다!

결론

그렇습니다, 여러분! TypeScript에서 익명 함수의 비밀을 벗겨냈습니다. 기억하시기 바랍니다, 이 함수들은 코드 속의 작은 엘프들과 같습니다. 그들은 형식적인 이름표가 필요 없이 작업을 수행합니다.

여기서 배운 방법들을 요약한 표를 제공해드리겠습니다:

방법	문법	예제
Function 키워드	let funcName = function(params) { ... }	let greet = function(name: string) { console.log("Hello, " + name); }
화살표 함수 (여러 줄)	let funcName = (params) => { ... }	let add = (a: number, b: number) => { return a + b; }
화살표 함수 (한 줄)	let funcName = (params) => expression	let multiply = (a: number, b: number) => a * b;
콜백으로 사용	someFunction(() => { ... })	setTimeout(() => { console.log("시간이 지났습니다!"); }, 1000);

이러한 다양한 방법들을 연습해보세요. 그러면 곧 익명 함수를 코딩의 ninja처럼 다룰 수 있을 것입니다! 프로그래밍에서도, 인생에서도 가장 강력한 힘은 뒤에서 조용히 작동하는 것들이 때로는 가장 강력합니다. 즐거운 코딩을 하세요!

Credits: Image by storyset