HOWTO · JavaScript

자바스크립트 람다 함수

이 기사는 JavaScript의 람다 함수를 이해하는 데 도움이 될 것입니다.

이 페이지의 내용

JavaScript에서 “람다 함수”는 화살표 함수를 가리키는 흔한 검색어입니다. 별도의 JavaScript 문법 요소는 아닙니다. 화살표 함수는 간결한 함수 표현식 문법을 제공하지만, 특히 this, arguments, 생성자 사용 측면에서 일반 함수와 다르게 동작합니다.

JavaScript에서 람다 함수란 무엇인가요?

화살표 함수는 =>를 사용해 작성하는 함수 표현식입니다. 다른 함수와 마찬가지로 변수에 저장하거나, 다른 함수에 전달하거나, 다른 함수에서 반환할 수 있습니다. 표현식 하나로 이루어진 본문은 그 값을 암묵적으로 반환합니다. 블록 본문은 중괄호를 사용하며, 값을 반환하려면 명시적으로 return을 써야 합니다.

화살표 함수 문법과 예제

매개변수가 여러 개라면 괄호로 묶습니다. 매개변수가 하나일 때는 괄호를 생략할 수 있습니다. 예를 들어 const add = (a, b) => a + b는 표현식 본문을 사용하고, const add = (a, b) => { return a + b; }는 블록 본문을 사용합니다. 중괄호로 블록을 만들고 return을 쓰지 않으면 표현식의 값이 반환되지 않습니다.

다음 JavaScript 프로그램은 합계를 계산하고 짧은 목록의 각 항목을 변환합니다.

const add = (a, b) => a + b;
const numbers = [1, 2, 3];
const doubled = numbers.map(number => number * 2);

console.log(`Sum: ${add(2, 3)}`);
console.log(`Doubled: ${doubled.join(", ")}`);

제공된 런타임 증거에서 출력이 다음과 같이 확인됩니다. 코드와 출력 블록은 원문 그대로이므로 Sum과 Doubled 레이블은 영어로 표시됩니다.

Sum: 5
Doubled: 2, 4, 6

화살표 함수와 일반 함수의 차이

화살표 함수의 this는 바깥쪽 렉시컬 스코프에서 가져옵니다. 화살표 함수 자체는 this를 만들지 않으므로, 바깥 메서드의 인스턴스가 필요한 콜백에서 유용할 수 있습니다. 반면 일반 함수의 this는 호출 방식에 따라 정해지며, 생성할 때는 new에 따라 정해집니다.

화살표 함수에는 자체 arguments 바인딩도 없습니다. 바깥 함수의 arguments를 자동으로 가져오는 것이 아닙니다. 렉시컬 탐색으로 arguments를 찾을 수 있는 경우는 이를 제공하는 바깥 스코프가 있을 때뿐입니다. 화살표 함수에서 인수를 모으려면 (...items) => items.length와 같은 나머지 매개변수를 사용하세요.

화살표 함수는 new로 호출할 수 없으며, 생성자 용도로 사용할 자체 prototype 속성도 없습니다. 일반 함수 선언이나 표현식은 생성자 역할에 맞게 작성하면 생성자로 사용할 수 있습니다. 화살표 함수를 변수에 할당하면 변수 바인딩에서 이름이 추론될 수 있지만, 화살표 함수 자체에는 이름을 지정하는 문법이 없습니다. 이름이 있는 함수 표현식은 별도의 형식입니다.

화살표 함수는 언제 사용하나요?

렉시컬 this가 필요한 짧은 콜백에는 화살표 함수가 잘 맞습니다. 예를 들어 items.map(item => item.price)는 각 항목을 가격으로 변환해 새 배열을 반환합니다. 콜백에서 바깥쪽 this를 유지해야 하는 이벤트 처리에도 사용할 수 있습니다.

함수 자체의 호출 방식에 따른 this가 필요하거나, 생성자로 사용해야 하거나, 함수 선언이 더 적합하다면 일반 함수를 선택하세요. 브라우저 이벤트 리스너에서는 화살표 콜백의 this가 이벤트 대상에 맞춰 설정되지 않는다는 점에 유의하세요. 이벤트 대상이 필요하면 이벤트 객체를 사용하고, 호출 방식에 따라 정해지는 this가 적절한 경우에는 일반 콜백을 사용하세요.

모범 사례와 흔한 실수

화살표 함수의 본문은 한눈에 이해할 수 있을 만큼 짧게 유지하세요. 단계가 여러 개라면 명확한 return을 포함한 블록 본문을 사용하거나, 작업을 쉽게 파악할 수 있도록 이름이 있는 함수 선언을 선택하세요. 설명적인 변수 이름은 함수 값을 이해하는 데 도움이 되지만, 화살표 함수를 이름이 있는 함수 표현식으로 바꾸지는 않습니다.

문법이 더 짧다는 이유만으로 화살표 함수를 선택하지 마세요. 렉시컬 this는 일부 콜백에서 유용하지만 함수 자체의 this가 필요할 때는 적합하지 않습니다. 화살표 함수에도 부수 효과가 있을 수 있습니다. 이를 피해야 하는지는 문법 자체가 아니라 주변 설계에 따라 결정하세요.

자주 묻는 질문

JavaScript에서 “람다 함수”는 무엇을 뜻하나요?

흔히 화살표 함수를 가리킵니다. JavaScript에서 이 함수의 문법은 =>이며, “람다 함수”는 별도의 언어 문법 요소가 아니라 검색어입니다.

화살표 함수에서 this는 어떻게 동작하나요?

바깥쪽 렉시컬 스코프의 this를 사용하며, 호출 방식에 따라 새로운 this를 받지 않습니다.

화살표 함수를 생성자로 사용할 수 있나요?

아니요. 화살표 함수는 new로 호출할 수 없습니다. 인스턴스를 만들려면 적절한 일반 함수나 클래스를 사용하세요.

화살표 함수의 장점과 한계는 무엇인가요?

간결한 문법 덕분에 콜백을 빠르게 훑어보기 쉬우며, 렉시컬 this를 사용하면 바깥 문맥을 다시 바인딩하지 않아도 됩니다. 함수 자체의 this, 자체 arguments 바인딩 또는 생성자 동작이 필요할 때는 적합하지 않습니다. 화살표 함수에서 인수를 모으려면 나머지 매개변수를 사용하세요.