코드가 이렇게 짧아진다고? 화살표 함수로 JavaScript 끝내기 - 코드카인 티스토리

안녕하세요😊 코드카인 여러분!

오늘은 화살표 함수(Arrow Function)에 대해 알아볼게요! 화살표 함수는 JavaScript에서 간결하고 직관적인 함수 표현식을 제공합니다. 지금부터 이 개념을 일상생활에 비유하며 쉽고 재미있게 설명해 드릴게요. 😊

---

🚀 화살표 함수란 무엇인가요?

화살표 함수는 => 기호를 사용한 함수 표현식으로, 짧고 간결하게 함수를 작성할 수 있게 도와줍니다. 마치 *"줄임말"*처럼 불필요한 단어를 빼고도 의미를 전달하는 방식이죠.

기본 형식

// 일반 함수
function add(a, b) {
  return a + b;
}

// 화살표 함수
const add = (a, b) => a + b;

특징 요약

1. 간결한 문법: 코드 길이를 줄일 수 있어요.
2. this 바인딩이 고정: 화살표 함수는 작성된 위치의 this를 그대로 사용합니다.
3. return 생략 가능: 단일 표현식은 암묵적으로 반환됩니다.

---

📚 화살표 함수, 어떻게 동작할까요?

1. 파라미터와 중괄호

파라미터가 하나일 때는 괄호를 생략할 수 있어요.

// 괄호 생략 가능
const greet = name => `Hello, ${name}!`;

// 괄호 필요
const multiply = (a, b) => a * b;

2. this의 고정

화살표 함수는 this를 정의한 문맥을 따라갑니다. 일반 함수에서 this를 사용할 때와 달리, 호출 방법에 영향을 받지 않아요.

class Counter {
  count = 0;

  increment = () => {
    this.count++;
    console.log(this.count);
  };
}

const counter = new Counter();
counter.increment(); // 1
const inc = counter.increment;
inc(); // 2 (this가 Counter를 참조)

3. return 생략

표현식이 단순하다면 return 키워드를 생략할 수 있어요.

// 화살표 함수
const square = n => n * n;

// 일반 함수
const squareNormal = function (n) {
  return n * n;
};

---

🏠 일상 속 비유로 이해하기

화살표 함수는 "친구와의 대화에서 줄임말" 같아요.
예를 들어, 친구에게 "지금 바로 만날래?" 대신 "즉만?"이라고 줄여 말하는 것처럼, 간단한 내용을 더 빠르게 전달할 수 있습니다.

---

🎯 실전 예제: 배열 데이터 처리하기

화살표 함수는 특히 배열 메서드와 궁합이 좋아요!

예제: 학생들의 점수를 평균으로 계산

const scores = [85, 90, 78, 92, 88];

// 화살표 함수 사용
const average = scores.reduce((sum, score) => sum + score, 0) / scores.length;

console.log(`Average score: ${average}`);

---

😎 언제 사용하면 좋을까요?

• 콜백 함수 작성 시

  setTimeout(() => console.log('Time's up!'), 1000);

• 간결한 표현이 필요한 경우

  const double = x => x * 2;

• this를 고정해야 하는 경우

  const obj = {
    name: 'CodeCaine',
    showName: () => console.log(this.name),
  };
  obj.showName(); // this가 의도한 대로 동작

---

😊 마무리하며..

화살표 함수는 코드의 가독성과 효율성을 높이는 강력한 도구입니다. 초보자도 쉽게 익히고 활용할 수 있으니 많이 연습해보세요! 💪

다음에 더 재미있는 주제로 만나요!