[JS] 함수 기본 개념

자바스크립트 함수 완벽 개념 정리

1. 함수의 기본 개념

함수의 정의: 특정 작업을 수행하기 위해 설계된 코드 블록으로, 호출될 때만 실행됩니다.

// 기본 함수 구조
function 함수이름(매개변수1, 매개변수2) {
  // 실행할 코드
  return 결과값; // 선택사항
}

함수 범위: 중괄호 {} 안에 작성된 모든 코드가 함수의 본문입니다. 함수는 이 중괄호가 끝나는 곳에서 종료됩니다.

2. 매개변수와 인자값

매개변수(Parameter): 함수 정의에서 사용되는 변수
인자값(Argument): 함수 호출 시 전달하는 실제 값

// name은 매개변수
function 인사(name) {
  console.log(`안녕하세요, ${name}님!`);
}

// "홍길동"은 인자값
인사("홍길동");

매개변수 규칙:

• 매개변수 이름은 변수 이름 규칙을 따름
• 쉼표로 구분하여 여러 개 정의 가능
• 기본값 설정 가능: function 함수(이름 = "무명")

3. 함수 정의 방법들

3.1 함수 선언문 (Function Declaration)

function 더하기(a, b) {
  return a + b;
}

특징:

• 호이스팅(Hoisting)됨: 코드에서 함수 선언 전에도 호출 가능
• 가장 기본적인 함수 정의 방법

3.2 함수 표현식 (Function Expression)

const 빼기 = function(a, b) {
  return a - b;
};

특징:

• 변수에 함수를 할당
• 호이스팅되지 않음 (선언 전에 호출 불가)
• 익명 함수(무명 함수)로 주로 사용

3.3 화살표 함수 (Arrow Function)

const 곱하기 = (a, b) => a * b;

// 본문이 여러 줄인 경우
const 나누기 = (a, b) => {
  if (b === 0) return "0으로 나눌 수 없습니다";
  return a / b;
};

특징:

• 더 간결한 문법
• this 바인딩 방식이 일반 함수와 다름
• 한 줄 코드는 return 생략 가능
• 매개변수가 하나면 괄호 생략 가능: x => x * 2

3.4 즉시 실행 함수 (IIFE: Immediately Invoked Function Expression)

(function() {
  console.log("즉시 실행됨");
})();

// 매개변수를 전달할 수도 있음
(function(이름) {
  console.log(`안녕, ${이름}!`);
})("홍길동");

특징:

• 정의되자마자 즉시 실행됨
• 전역 스코프를 오염시키지 않는 독립적인 환경 제공
• 라이브러리 제작이나 초기화 코드에 자주 사용

4. 가변 인자 함수 (유연한 인자 수용하기)

4.1 arguments 객체 사용 (전통적 방법)

function 합계() {
  let 총합 = 0;
  for (let i = 0; i < arguments.length; i++) {
    총합 += arguments[i];
  }
  return 총합;
}

합계(1, 2, 3, 4, 5); // 15

특징:

• 모든 함수 내부에 자동으로 생성되는 유사 배열 객체
• 화살표 함수에서는 사용 불가

4.2 나머지 매개변수(Rest Parameters) 사용 (현대적 방법)

function 합계(...숫자들) {
  return 숫자들.reduce((총합, 현재값) => 총합 + 현재값, 0);
}

합계(1, 2, 3, 4, 5); // 15

특징:

• ... 구문을 사용하여 여러 인자를 배열로 수집
• 실제 배열이므로 배열 메서드 사용 가능
• 마지막 매개변수로만 사용 가능: function 함수(a, b, ...나머지)

5. 배열과 객체 구분하기

5.1 배열 (Array)

// 배열 생성: 대괄호 [] 사용
let 과일들 = ["사과", "바나나", "오렌지"];

// 배열 접근
console.log(과일들[0]); // "사과"

5.2 객체 (Object)

// 객체 생성: 중괄호 {} 사용
let 사람 = {
  이름: "김철수",
  나이: 25,
  직업: "개발자"
};

// 객체 속성 접근
console.log(사람.이름); // "김철수"
console.log(사람["나이"]); // 25

5.3 함수와 괄호 사용

// 함수 정의: function 키워드, () 매개변수, {} 함수 본문
function 계산(a, b) {
  return {
    합: a + b,      // 객체는 {}
    차: a - b,
    곱: a * b,
    몫: a / b
  };
}

// 함수 호출: 함수이름()
let 결과 = 계산(10, 2);

6. 함수의 반환값 (return)

// return 있는 함수
function 제곱(숫자) {
  return 숫자 * 숫자;
}

// return 없는 함수
function 인사(이름) {
  console.log(`안녕하세요, ${이름}님!`);
  // 암묵적으로 undefined 반환
}

// 조건에 따른 반환
function 절대값(숫자) {
  if (숫자 < 0) {
    return -숫자;
  }
  return 숫자;
}

특징:

• return 문은 함수 실행을 즉시 종료하고 값을 반환
• return 문이 없거나 값 없이 return만 있으면 undefined 반환
• 함수는 항상 무언가를 반환함

7. 콜백 함수 (Callback Functions)

콜백 함수는 다른 함수에 인자로 전달되어 나중에 호출되는 함수입니다.

// 콜백 함수 예시
function 작업수행(작업) {
  console.log("작업 시작");
  작업(); // 전달받은 함수 실행
  console.log("작업 완료");
}

// 콜백 함수를 인자로 전달
작업수행(function() {
  console.log("중요 작업 진행 중...");
});

실용적인 예제:

// 배열의 forEach 메소드는 콜백 함수를 인자로 받음
let 숫자들 = [1, 2, 3, 4, 5];

숫자들.forEach(function(숫자) {
  console.log(숫자 * 2);
});

// 화살표 함수로 더 간결하게
숫자들.forEach(숫자 => console.log(숫자 * 2));

8. 자주 사용하는 내장 함수들

8.1 문자열 관련 내장 함수

let 문자열 = "Hello, World!";

문자열.length;            // 13 (길이)
문자열.toUpperCase();     // "HELLO, WORLD!" (대문자로)
문자열.toLowerCase();     // "hello, world!" (소문자로)
문자열.indexOf("World");  // 7 (위치 찾기)
문자열.slice(0, 5);       // "Hello" (부분 문자열)
문자열.split(", ");       // ["Hello", "World!"] (분할)

8.2 배열 관련 내장 함수

let 배열 = [1, 2, 3, 4, 5];

배열.length;              // 5 (길이)
배열.push(6);             // [1, 2, 3, 4, 5, 6] (끝에 추가)
배열.pop();               // 마지막 요소 제거하고 반환
배열.unshift(0);          // [0, 1, 2, 3, 4, 5] (앞에 추가)
배열.shift();             // 첫 요소 제거하고 반환
배열.join("-");           // "1-2-3-4-5" (문자열로 결합)

// 변환 메소드
배열.map(x => x * 2);     // [2, 4, 6, 8, 10] (모든 요소 변환)
배열.filter(x => x > 2);  // [3, 4, 5] (조건에 맞는 요소만 선택)
배열.reduce((합, 현재값) => 합 + 현재값, 0); // 15 (누적 계산)

8.3 기타 유용한 내장 함수

// 수학 관련
Math.random();       // 0~1 사이 랜덤 숫자
Math.floor(4.7);     // 4 (내림)
Math.ceil(4.3);      // 5 (올림)
Math.round(4.5);     // 5 (반올림)
Math.max(1, 3, 5);   // 5 (최대값)
Math.min(1, 3, 5);   // 1 (최소값)

// 시간 관련
let 현재 = new Date();
현재.getFullYear();   // 현재 년도
현재.getMonth();      // 현재 월 (0-11)
현재.getDate();       // 현재 일

9. 함수 스코프와 클로저

9.1 스코프 (변수 유효 범위)

let 전역변수 = "전역";

function 외부함수() {
  let 외부변수 = "외부";

  function 내부함수() {
    let 내부변수 = "내부";
    console.log(내부변수); // "내부" (자기 스코프)
    console.log(외부변수); // "외부" (부모 스코프)
    console.log(전역변수); // "전역" (전역 스코프)
  }

  내부함수();
  // console.log(내부변수); // 오류! 내부변수는 내부함수 안에서만 유효
}

9.2 클로저 (Closure)

클로저는 함수가 선언된 환경의 변수를 기억하는 것을 말합니다.

function 카운터만들기() {
  let 횟수 = 0; // 외부에서 직접 접근 불가능한 변수

  return function() {
    횟수++; // 바깥 함수의 변수 사용
    return 횟수;
  };
}

const 카운터 = 카운터만들기();
console.log(카운터()); // 1
console.log(카운터()); // 2
console.log(카운터()); // 3

10. 실전 함수 예제

10.1 기본 함수

// 두 숫자의 합을 계산하는 함수
function 더하기(a, b) {
  return a + b;
}

console.log(더하기(5, 3)); // 8

10.2 조건에 따른 처리

// 나이에 따라 다른 메시지를 반환하는 함수
function 나이확인(나이) {
  if (나이 < 0) {
    return "유효하지 않은 나이입니다";
  } else if (나이 < 18) {
    return "미성년자입니다";
  } else if (나이 < 65) {
    return "성인입니다";
  } else {
    return "노년층입니다";
  }
}

console.log(나이확인(15)); // "미성년자입니다"

10.3 배열과 함수 활용

// 배열에서 가장 큰 수를 찾는 함수
function 최대값찾기(배열) {
  if (배열.length === 0) return null;

  let 최댓값 = 배열[0];
  for (let i = 1; i < 배열.length; i++) {
    if (배열[i] > 최댓값) {
      최댓값 = 배열[i];
    }
  }
  return 최댓값;
}

console.log(최대값찾기([3, 8, 2, 10, 5])); // 10