[JavaScript 기본] 함수 정리

함수는 반복 로직을 재사용하고, 코드를 역할 단위로 묶는 기본 단위임

예시로 흐름을 먼저 보겠음

// 함수 선언문 (Function Declaration)
function greeting() {
  console.log("안녕하세요");
}

console.log("호출 전");
greeting(); // 함수 호출
console.log("호출 후");

function getArea(width, height) {
  // 중첩 함수 (Nested Function)
  function another() {
    console.log("another");
  }

  another();

  // ( ) 안에 있는 것을 "매개변수(parameter)"라고 부름
  const area = width * height;

  return area; // return 이후 코드는 실행되지 않음 (함수 즉시 종료)
}

// getArea(20, 20)에서 ( ) 안에 넣는 값을 "인수(argument)"라고 부름

const area1 = getArea(30, 30);
console.log(area1); // 900

// 호출을 먼저 하고 함수를 "선언"해도 동작함 → 선언문은 호이스팅됨

---

1. 함수 선언 방식

---

1-1. 함수 선언문

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

• 이름 필수
• 호이스팅으로 선언 이전 호출 가능 (메모리에 전체 함수가 먼저 올라감)

---

1-2. 함수 표현식

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

• 변수에 함수 값을 대입
• 호이스팅 시 함수 본문은 올라가지 않음 (변수만 선언 단계로 올라감 -> 선언 이전 호출 불가)

---

1-3. 화살표 함수

const add = (a, b) => a + b;           // 표현식이 한 줄이면 return 생략 가능
const square = (n) => { return n * n }; // 블록 쓰면 return 필요

• `this`, `arguments` 바인딩이 없음 (콜백에 유용)
• 생성자(`new`)로 사용 불가

---

2. 호이스팅

형태	선언 이전 호출
함수 선언문	가능 (함수 본문까지 미리 메모리에 올라감)
함수 표현식	불가 (변수 선언만 호이스팅, 값 대입 전이라 호출 불가)
화살표 함수	불가 (표현식과 동일)

hello();             // 동작
function hello() { console.log('hi'); }

hi();                // TypeError (아래에서 대입되기 전)
const hi = function () { console.log('hi'); };

---

3. 매개변수(`parameter`) vs 인수(`argument`)

• 매개변수 : 함수 정의 시 괄호 안 이름들
• 인수 : 함수 호출 시 넘기는 실제 값

function getArea(width, height) { // ← 매개변수
  return width * height;
}

getArea(30, 30); // ← 인수

---

3-1. 기본값 `Defalut Parameter`

function greet(name = "Guest") {
  console.log(`안녕하세요, ${name}`);
}
greet();           // "안녕하세요, Guest"
greet("도서");     // "안녕하세요, 도서"

---

3-2. 구조 분해 매개변수(읽기 쉬움)

function createUser({ name, age }) {
  return `${name}(${age}) 생성`;
}
createUser({ name: "도서", age: 27 });

---

3-3. 가변 인수

function sum(...nums) {
  return nums.reduce((acc, cur) => acc + cur, 0);
}
sum(1, 2, 3, 4); // 10

---

4. 반환(`return`)과 조기 종료(`guard`)

• `return`을 만나면 그 즉시 함수 종료
• 이후 코드는 실행되지 않음(Dead code)

function buy(amount) {
  if (amount <= 0) return;  // 가드 패턴: 잘못된 입력 빠르게 차단
  console.log("결제 진행");
}

• 아무 것도 반환하지 않으면 `undefined`반환

function logOnly() {
  console.log('print');
}
console.log(logOnly()); // undefined

---

5. 스코프와 중첩 함수

• 함수는 블록 스코프를 가짐
• 중첩 함수는 바깥 함수의 변수에 접근 가능(클로저의 기초)

function outer() {
  const secret = "token";
  function inner() {
    console.log(secret); // 접근 가능
  }
  inner();
}
outer();

• 클로저 : 내부 함수가 바깥 환경(변수)을 기억하고 접근하는 특성
  -> 콜백/팩토리 함수에서 자주 쓰임

---

6. 값 전달 방식

• JavaScript는 값에 의한 전달이다. (pass by value)
• 다만, 객체 / 배열은 "참조(주소)"값이 복사 되므로, 함수 안에서 객체를 수정하면 원본이 바뀌는 것처럼 보임

function touch(obj) {
  obj.name = "수정됨";
}
const user = { name: "도서" };
touch(user);
console.log(user.name); // "수정됨"

• 원본 보호가 필요하면 얕은 복사 후 사용

function safeTouch(user) {
  const copy = { ...user };
  copy.name = "수정됨";
  return copy;
}

---

7. 자주 쓰이는 패턴

 

7-1. 즉시 실행 함수 - 초기화 / 한 번만 실행

(function () {
  console.log("한 번만 실행");
})();

---

7-2. 순수 함수 - 테스트 쉬움

// 입력만으로 결과가 결정, 외부 상태 변경 X
const add = (a, b) => a + b;

---

7-3. 부수효과(사이드 이펙트)함수 - 최소화 권장

// 콘솔 출력, DOM 조작, 네트워크 호출 등
function notify(msg) {
  console.log(msg);
}

---

7-4. 안전 접근(옵셔널 체이닝) + 기본값

function getCity(user) {
  return user?.address?.city ?? "Unknown";
}