함수 Expressions(표현식) vs 함수 Statements(선언문)

함수

"어떤 작업을 한 번에 처리하는 코드 덩어리"
쉽게 말해서, 필요할 때 꺼내 쓰는 '요리 레시피' 같은 것👩‍🍳

👇함수는 왜 쓰는지🤷‍♀️

1️⃣ 반복 줄이려고

같은 코드 여러 번 쓰지 않고 필요할 때마다 함수만 불러서 씀

function greet() {
  console.log("안녕하세요!");
}

greet();  // 출력: 안녕하세요!
greet();  // 출력: 안녕하세요!

→ 이렇게 쓰면 같은 console.log를 여러 번 안 써도됨

2️⃣ 코드를 깔끔하게 정리하려고

복잡한 코드를 이름 붙여서 숨기면 전체 코드가 보기 쉬워짐

// 복잡한 계산을 함수로 정리
function calculateTotal(price, tax) {
  return price * tax;
}

let result = calculateTotal(1000, 0.1); // 결과: 1100

→ calculateTotal이란 이름 덕분에 무슨 역할인지 바로 보임

3️⃣ 재사용하려고

한 번 만든 함수는 여러 곳에서 다시 쓸 수 있음

function double(num) {
  return num * 2;
}

console.log(double(3));  // 6  
console.log(double(10));  // 20

→ 함수 하나 만들면 숫자 두 배 만들기 언제든 가능

4️⃣ 입력값(매개변수)에 따라 다르게 동작시킬 수 있음

function greet(name) {
  console.log(`안녕, ${name}야!`);
}

greet("짱구");  // 안녕, 짱구야!
greet("철수"); // 안녕, 철수야!

→ 누굴 불러도 인사해주는 함수

🔹함수 선언문

function funcDeclaration() {
  return 'A function declaration 함수 선언문';
}

함수 선언은 함수를 만들고 이름을 지정하는 것
function 키워드 다음에 함수 이름을 작성할 때 함수 이름을 선언함

✅ 함수 선언문은 호이스팅에 영향 받음 ⭕

sayHi();  // 👉 출력: 안녕!

function sayHi() {
  console.log("안녕!");
}

이건 에러 안 나고 잘 동작함
이유 : function sayHi( )가 위로 끌어올려져서 먼저 실행 가능하기 때문

🔹함수 표현식

let funcExpression = function () {
  return 'A function expression 함수 표현식';
}

함수 표현식은 함수를 만들고 변수에 할당하는 경우
🤫함수는 익명이므로 이름은 없음🙅‍♀️

✅ 함수 선언문은 호이스팅에 영향 받지 않음 ❌

// ❌ 에러 발생! Cannot access 'sayHi' before initialization
sayHi(); 

const sayHi = function () {
  console.log("안녕!");
};

sayHi는 const로 선언한 함수 표현식이라서
초기화 되기 전에 사용할 수 없음