📌 자바스크립트 함수(Function)

함수는 프로그램을 구성하는 핵심적인 구성 요소입니다.
복잡한 코드를 논리적으로 분리하고 재사용 가능하게 만들어줌으로써 코드 품질을 향상시키는 역할을 합니다.

---

✅ 함수의 장점

• 코드의 재사용성
  동일한 작업을 반복할 필요 없이 함수로 정의하여 호출만 하면 됩니다.

• 유지보수의 용이성
  수정이 필요한 경우 함수 내부만 수정하면 되어 전체 코드에 영향을 주지 않습니다.

• 코드의 신뢰성
  블록화된 코드로 로직을 예측하기 쉬워지고, 테스트도 용이합니다.

• 가독성 향상
  코드의 의미를 이름으로 표현하므로 코드 이해도가 높아집니다.

---

✏️ 함수 선언 (Function Declaration)

// add 함수는 두 개의 인자 x, y를 받아 합을 반환합니다.
// 함수 선언문은 호이스팅되므로, 선언 이전에도 호출 가능합니다.

function add(x, y) {
  return x + y;
}

add(1, 2); // 3

❗ 익명 함수는 단독으로 존재할 수 없다

// Error: 익명 함수는 변수에 할당되거나 다른 함수의 인자로 사용되어야 합니다.

function(x, y) {
  return x + y;
}

✨ 화살표 함수 (Arrow Function)

// 화살표 함수는 함수 표현식의 간결한 형태입니다
// this 바인딩 방식이 다르므로, 일반 함수와의 차이에 유의해야 합니다.

const add1 = (x, y) => {
  return x + y;
};

🌐 지역 변수 vs 전역 변수

// 지역 변수

function showMessage() {
  let message = "Hello!";
  alert(message); // ✅ 함수 내부에서는 접근 가능
}
showMessage();

alert(message); // ❌ ReferenceError: message is not defined

// message는 함수 내부에서 선언된 지역 변수이므로 외부에서 접근할 수 없습니다.

// 전역 변수
// 전역 변수는 어디서든 접근 가능하지만, 이름 충돌이나 예기치 않은 변경의 위험이 있으므로 사용에 주의해야 합니다.

let globalMsg = "Hi!";

function greet() {
  alert(globalMsg); // ✅ 전역 변수는 함수 내부에서도 접근 가능
}

📎 함수 정리표

구분	설명	예시 또는 특징
함수 선언문	function 키워드를 이용한 함수 선언. 호이스팅 O	function foo() {}
함수 표현식	함수를 변수에 할당. 호이스팅 X	const foo = function() {}
화살표 함수	간결한 함수 표현식. this가 바인딩되지 않음	const foo = () => {}
지역 변수	함수 내부에서 선언된 변수. 함수 외부에서 접근 불가	let msg = 'hi'; (함수 내 선언)
전역 변수	함수 외부에서 선언된 변수. 전체 스코프에서 접근 가능	let msg = 'hi'; (함수 외 선언)
함수 호출	함수 이름과 괄호를 이용해 호출	foo()
재사용성	함수를 정의해 반복적인 작업을 처리할 수 있음	DRY 원칙 적용
가독성 향상	의미 있는 함수명을 통해 코드 이해도를 높일 수 있음	calculateTotalPrice()
유지보수 용이	함수 내부만 수정하면 되기 때문에 전체 코드에 영향이 적음	모듈화된 로직 관리