람다 함수lambda function)와 화살표 함수(Arrow Function)

1. 람다 함수란?

람다 함수(lambda function)는 익명 함수(Anonymous Function)라고도 불리며, 이름 없이 간결하게 정의되는 함수를 말한다. 주로 짧은 함수를 만들거나, 다른 함수의 인자로 전달할 때 유용하게 사용된다.

1.1. 특징

• 익명성 : 람다 함수는 이름이 없으므로, 함수를 변수에 할당하거나 다른 함수의 인자로 전달할 때 유용하다.
• 간결성 : 람다 함수는 일반 함수보다 코드를 간결하게 작성할 수 있다.
• 스코프 : 람다 함수는 주변 스코프의 변수를 자유롭게 사용할 수 있다.

1.2. 예시

javascript

클릭하여 코드 펼치기

// 일반 함수
function add(x, y) {
  return x + y;
}

// 람다 함수 (화살표 함수)
const addLambda = (x, y) => x + y;

console.log(add(3, 5)); // 8
console.log(addLambda(3, 5)); // 8

// 배열 정렬 시 람다 함수 사용
const numbers = [4, 2, 8, 6];
numbers.sort((a, b) => a - b);
console.log(numbers); // [2, 4, 6, 8]
클릭하여 코드 복사

1.3. 장점

• 코드 간결성: 짧은 함수를 간결하게 표현하여 코드 가독성을 높인다.
• 콜백 함수 활용: 다른 함수의 인자로 전달되는 콜백 함수를 간결하게 표현할 수 있다.
• 함수형 프로그래밍: 함수를 값처럼 사용하여 함수형 프로그래밍 패러다임을 지원한다.

1.4. 단점

• 복잡한 로직 표현 제한: 람다 함수는 주로 간단한 로직을 표현하는 데 적합하며, 복잡한 로직을 표현하기에는 가독성이 떨어질 수 있다.
• 재사용성 제한: 람다 함수는 이름이 없으므로, 재사용하기 어렵다.

2. 화살표 함수(Arrow Function)

• 자바스크립트 ES6에서 도입된 람다 함수의 한 형태이다.
• 일반 함수 표현식보다 간결하게 함수를 정의할 수 있다.
• 일반적으로 자바스크립트의 람다 함수하면 화살표 함수다.

•  

2.1. 특징

• => (화살표) 기호를 사용하여 함수를 정의한다.
• 화살표 함수는 자신만의 this를 생성하지 않고, 상위 스코프의 this를 상속받는다.
• 일반 함수와 달리 arguments 객체를 사용할 수 없다.

2.2. 예시

화살표 함수의 구조는 (매개변수) => { 함수 본문 } 형태이다.

2.3. 1. 간단한 함수

2.3.1. 일반 함수

ada

클릭하여 코드 펼치기

function multiplyByTwo(x) {
  return x * 2;
}
클릭하여 코드 복사

2.3.2. 화살표 함수

javascript

클릭하여 코드 펼치기

const multiplyByTwo = (x) => x * 2;
클릭하여 코드 복사

2.4. 2. 매개변수가 없는 함수

2.4.1. 일반 함수

actionscript

클릭하여 코드 펼치기

function sayHello() {
  return "안녕하세요!";
}
클릭하여 코드 복사

2.4.2. 화살표 함수

javascript

클릭하여 코드 펼치기

const sayHello = () => "안녕하세요!";
클릭하여 코드 복사

2.5. 3. 여러 줄의 함수

2.5.1. 일반 함수

javascript

클릭하여 코드 펼치기

function calculateArea(width, height) {
  const area = width * height;
  return area;
}
클릭하여 코드 복사

2.5.2. 화살표 함수

javascript

클릭하여 코드 펼치기

const calculateArea = (width, height) => {
  const area = width * height;
  return area;
};
클릭하여 코드 복사

2.6. 4. 배열의 map() 메서드와 함께 사용

angelscript

클릭하여 코드 펼치기

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map((number) => number * 2);
console.log(doubledNumbers); // [2, 4, 6, 8, 10]
클릭하여 코드 복사

2.7. 5. 이벤트 핸들러에서 사용

JavaScript

 

coffeescript

클릭하여 코드 펼치기

const button = document.getElementById("myButton");
button.addEventListener("click", () => {
  console.log("버튼이 클릭되었습니다!");
});
클릭하여 코드 복사

2.8. 추가 설명

• 화살표 함수는 일반 함수보다 간결하게 함수를 정의할 수 있습니다.
• 특히 배열 메서드(map, filter, reduce 등)와 함께 사용할 때 유용합니다.
• 화살표 함수는 this 컨텍스트를 상위 스코프에서 상속받으므로, 이벤트 핸들러나 콜백 함수에서 this를 사용할 때 주의해야 합니다.