화살표 함수 ()=>

화살표 함수는 자바스크립트에서 함수를 더 짧고 간단하게 쓸 수 있도록 도와주는 문법!
전통적인 함수 표현식보다 코드가 훨씬 깔끔.

---

구조 비교

• 전통적인 함수:

  function add(a, b) {
    return a + b;
  }

• 화살표 함수:

  const add = (a, b) => {
    return a + b;
  }

화살표 함수를 사용하면 function 키워드를 쓰지 않고, 대신 => 기호를 사용해서 함수를 정의할 수 있어요.

---

간단한 문법들

1. 리턴문이 한 줄인 경우

리턴할 내용이 한 줄이면, 중괄호와 return 키워드를 생략할 수 있어요.

const add = (a, b) => a + b;
console.log(add(2, 3)); // 출력: 5

2. 매개변수가 하나인 경우

매개변수가 하나일 때는 괄호를 생략할 수 있어요.

const square = x => x * x;
console.log(square(4)); // 출력: 16

3. 매개변수가 없는 경우

매개변수가 없으면 빈 괄호를 사용해요.

const sayHello = () => console.log("안녕!");
sayHello(); // 출력: 안녕!

---

자주 쓰이는 방식

• 짧은 문법으로 코드 간결하게 만들기:
  화살표 함수는 특히 배열의 각 요소를 처리할 때 자주 사용돼요.

  const numbers = [1, 2, 3, 4];
  const squares = numbers.map(x => x * x);//매개변수가 하나라 괄호 없음
  console.log(squares); // 출력: [1, 4, 9, 16]

• 콜백 함수로 사용하기:
  다른 함수에 인자로 넘길 때도 많이 쓰여요.

  setTimeout(() => {
    console.log("3초 후에 실행됩니다.");
  }, 3000);

---

정리

• 간단함: 전통적인 함수보다 코드가 짧고 읽기 easy
• 문법:
  • 여러 매개변수: (a, b) => ...
  • 하나의 매개변수: x => ...
  • 매개변수 없음: () => ...
• 리턴: 한 줄로 리턴할 때는 중괄호와 return 생략 가능.

화살표 함수를 잘 활용하면 자바스크립트 코드를 더 깔끔하게 작성 가능!