[JavaScript 기본] 함수 표현식 & 화살표 함수

자바스크립트에서는 함수를 "값처럼" 다루는 것이 가능함

즉, 함수를 변수에 담거나, 인수로 전달하거나, 반환할 수도 있음

이 특성을 이해하면 함수 표현식과 화살표 함수의 차이가 명확해짐!

---

1. 함수 표현식

function funcA() {
  console.log("funcA");
}

let varA = funcA;
console.log(varA); // 함수 자체 출력 (참조)
varA(); // funcA() 실행

let varB = function () {
  // 익명 함수 (이름 없음)
  console.log("funcB");
};

varB(); // 실행 결과: funcB

• 함수 표현식은 "값처럼" 변수에 저장할 수 있음
• 이름이 없는 경우를 익명 함수 라고함
• 변수에 담기 때문에 선언 이전에는 호출 불가능(호이스팅 시 함수 내용은 올라가지 않음)

varB(); // 오류: varB is not a function

let varB = function () {
  console.log("funcB");
};

---

함수 표현식의 장점

• 다른 함수에 인수로 전달 가능 -> 콜백(callback)으로 자주 사용
• 동적으로 함수를 생성하거나, 클로저로 묶을 때 유용

function runTask(callback) {
  console.log("작업 시작");
  callback();
}

runTask(function () {
  console.log("작업 완료!");
});
// 결과
// 작업 시작
// 작업 완료!

---

2. 화살표 함수

• ES6에서 도입된 간결한 함수 표현 문법

let varC = () => {
  return 1;
};

console.log(varC()); // 1

• 한 줄일 때 `return`생략 가능

const add = (a, b) => a + b;
console.log(add(3, 4)); // 7

• 매개변수가 하나면 괄호 `( )` 생략 가능

const square = n => n * n;
console.log(square(5)); // 25

---

화살표 함수 vs 일반 함수 차이

구분	일반 함수	화살표 함수
문법	`function func() {}`	`() => {}`
`this` 바인딩	동적으로 (호출한 객체 기준)	정적으로 (선언된 위치 기준, 상위 스코프)
`arguments` 객체	있음	없음
생성자(`new`)	가능	불가능
사용 시기	메서드, 생성자 등 일반 함수	콜백, 간단한 표현식