타입스크립트 | 화살표 함수(Arrow Function), 익명함수는 그만...

람다 함수라고도 불리는 화살표 함수는 자바스크립트와 타입스크립트에서 사용되는 익명 함수보다 간단한 방법입니다. 익명 함수와 화살표 함수의 차이 살펴보고 화살표 함수의 사용법과 화살표 함수에서 this가 어떻게 작동하는지 공부해 보도록 합시다. 자바스크립트와의 차이점도요~

---

익명 함수 vs 화살표 함수

여기 일반적인 익명함수가 있습니다.

위 예는 배열의 filter함수에 매개변수로 익명함수를 전달하고 있습니다. 함수의 본문에는 간단한 비교문 하나가 존재하지만 이 처리를 위해 function 키워드와 함수 본문의 중괄호 리턴 키워드를 포함하는 전체 함수를 작성해야 합니다.

이제 화살표 함수를 사용한 코드를 살펴보겠습니다.

화살표 함수는 화살표 모양처럼 보이는 => 표시를 이용하게 됩니다. 화살표 왼쪽에는 함수에 대한 매개변수 video가 있습니다. 화살표의 오른쪽에는 함수의 본문이 있으며 위에서 썼던 동일한 동등 비교를 하고 있습니다. function 키워드나 함수의 중괄호, return 키워드를 사용할 필요가 없습니다. 결과는 같지만 익명 함수를 사용할 때 보다 훨씬 간결해 보입니다. 다른 언어에서 람다를 사용해본 적이 없다면 화살표 함수가 약간 이상하게 보일 거라 생각되는데요. 익숙해지면 화살표 함수로 코딩하는 것을 분명 좋아하게 될 것입니다. 기억해야 할 것은 화살표 왼쪽에 있는 모든 것이 매개변수이고 화살표 오른쪽에 있는 모든 것이 함수 본문이 된다는 점입니다.

 

화살표 함수에서의  this

화살표 함수를 사용할 때의 부수적 이점은 this 처리하는 방법입니다. this는 일반적으로 함수가 호출될 때 설정되므로 실제로 참조하는 내용을 기억하기 어렵고 혼란스러운 경우가 자주 있습니다. 화살표 함수에서는 호출될 때가 아니라 함수가 생성될 때 this 변수를 설정합니다.

 

자바스크립트에서는 함수가 실행될 때 this가 설정되기 때문에 하나의 개념적 코드 블록에서 두 개의 실행 컨텍스트가 나타나는 경우가 종종 생깁니다.

위 예제에서는 this 객체에 title 속성을 설정한 다음 setInterval 함수에 건네진 콜백 함수에서 title을 참조하려고 하고 있습니다. 콜백 내부에서 this는 외부와 다른 this를 참조하기 때문에 title을 this 속성으로 단순히 참조할 수 없습니다. 자바스크립트에서 이 문제를 해결하는데 일반적으로 사용되는 패턴은 함수 시작 시 변수에서 this를 변수에 넣어놓은 다음 콜백 내부의 함수에서 변수를 사용하는 것입니다. 위 예제에서는 self에 this를 할당한 다음에 콜백 함수에서 self를 사용하여 title값을 참조하고 있습니다.

화살표 함수를 사용하면 이 변수를 캡처하는 번거로움 없이 더 직관적인 방식으로 사용할 수 있습니다.

위 코드는 화살표 함수로 구현한 동일한 역할을 하는 코드입니다. 화살표 함수가 this 변수를 캡처할 것이기 때문에 콜백 함수 안에서 바로 title속성을 this를 사용해서 참조할 수 있습니다.

 

화살표 함수 문법 살펴보기

화살표 함수의 문법을 좀 더 자세히 살펴보도록 하겠습니다.

 

매개변수가 존재하지 않는 화살표 함수

위 예는 배열에서 forEach 함수를 호출하고 있습니다. 배열의 각 항목에 대해 한 번씩 매개변수로 설정한 함수가 호출될 것입니다. 예제는 화살표 함수에서 매개변수를 사용하지 않고 있습니다. 화살표 함수가 매개변수를 사용하지 않는다면 화살표 왼쪽에 빈 괄호 ()를 추가해야 합니다.

 

매개변수가 한 개인 화살표 함수

다음 예제는 동일한 forEach함수를 호출하고 있지만 단일 매개변수를 화살표 함수에 전달하고 있습니다. 매개변수를 하나만 전달하는 경우는 괄호가 필요하지 않습니다. 물론 괄호를 포함시켜도 정상 작동합니다.

 

매개변수가 여러 개인 화살표 함수

화살표 함수에 여러 개의 매개변수를 전달하는 경우에는 괄호로 묶어 주어야 합니다. 따라서 규칙은 매개변수가 하나만 있는 경우를 제외하고 매개변수를 괄호로 묶어줄 필요가 있습니다.

 

함수 본문이 두줄 이상인 화살표 함수

지금까지 위의 예제는 본문이 한 줄짜리 였습니다. 만약 본문을 두 줄이상 작성하고 싶다면 본문을 중괄호로 묶어 주어야 합니다.

---

화살표 함수 예제

위의 함수는 비디오를 나타내는 객체 video 배열을 리턴하는 함수입니다. 비디오 객체에는 id프로퍼티가 존재합니다.  이제 특정 비디오를 id로 찾는 함수를 화살표 함수를 활용해서 만들어 보도록 하겠습니다.

GetVideById 함수를 만들었습니다. 함수에서 첫 번째 하는 일은 모든 비디오를 가져와 allVideos 함수에 저장하는 것입니다. allVideos는 배열이기 때문에 filter라는 함수가 있으며 원본 배열의 하위 집합을 포함하는 새 배열을 반환합니다. 필터 함수는 함수를 매개변수로 사용합니다. 해당 함수에는 배열의 각 요소가 전달되고 필터링된 배열에 포함시켜야 하는지 여부를 판단하기 위해 ture, false를 반환해야 합니다.

filter에 익명 함수를 전달하는 대신 화살표 함수를 전달하고 있습니다. 하나의 매개변수를 전달하고 있으므로 매개변수를 괄호를 생략하고 있습니다. 화살표 오른쪽의 함수 본문에서는 현재 video의 id가 찾고 있는 id와 일치하는지 확인하는 비울 비교를 하고 있습니다. 

예제에서 보다시피 화살표 함수를 사용하면 코드를 매우 간단하게 구현할 수 있었습니다.

---

여기까지 읽어주셔서 감사합니다. 저는 타입 스크립트에서 익명 함수 대신 대부분 화살표 함수를 사용하고 있습니다. 화살표 함수를 사용해서 코드를 간결하게 코딩해 보세요.