프론트엔드/JAVASCRIPT

JavaScript 함수(Function) 정리

CYANREDSKY 2025. 9. 23. 12:34

함수(Function) 는 특정 작업을 수행하는 코드 블록을 의미합니다. 같은 코드를 반복해서 작성하지 않고, 재사용할 수 있도록 도와주는 핵심 개념입니다.

1. 함수 선언 방식

(1) 함수 선언문 (Function Declaration)

  • 코드 실행 전에 메모리에 로드(호이스팅 O)
  • 어디서든 호출 가능
function greet(name) {
  return `안녕하세요, ${name}님!`;
}

console.log(greet("홍길동")); // 안녕하세요, 홍길동님!

(2) 함수 표현식 (Function Expression)

  • 변수에 함수 저장
  • 호이스팅 X (정의 이후에만 호출 가능)
const greet = function(name) {
  return `안녕하세요, ${name}님!`;
};

console.log(greet("이몽룡"));

(3) 화살표 함수 (Arrow Function)

  • 간결한 문법
  • this 바인딩이 없음 → 콜백 함수로 자주 사용
const greet = (name) => `안녕하세요, ${name}님!`;
console.log(greet("성춘향"));

2. 매개변수와 인자

기본 매개변수

function greet(name = "Guest") {
  return `안녕하세요, ${name}님!`;
}

console.log(greet()); // 안녕하세요, Guest님!

나머지 매개변수(Rest Parameters)

function sum(...numbers) {
  return numbers.reduce((acc, cur) => acc + cur, 0);
}

console.log(sum(1, 2, 3, 4)); // 10

3. 반환값 (return)

function multiply(a, b) {
  return a * b;
}

let result = multiply(3, 4);
console.log(result); // 12

4. 함수의 범위(Scope)

  • 지역 변수(Local): 함수 안에서만 유효
  • 전역 변수(Global): 어디서나 접근 가능
let x = 10; // 전역 변수

function test() {
  let y = 20; // 지역 변수
  console.log(x, y);
}

test();        // 10 20
console.log(x); // 10
// console.log(y); // 오류 발생

5. 콜백 함수 (Callback Function)

함수를 인자로 전달받아 실행하는 함수

function processUserInput(callback) {
  let name = "홍길동";
  callback(name);
}

processUserInput(function(user) {
  console.log(`환영합니다, ${user}님!`);
});

6. 고차 함수 (Higher-Order Function)

다른 함수를 인자로 받거나, 함수를 반환하는 함수

function makeMultiplier(x) {
  return function(y) {
    return x * y;
  };
}

let double = makeMultiplier(2);
console.log(double(5)); // 10

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

정의와 동시에 실행되는 함수

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

8. 재귀 함수 (Recursive Function)

자기 자신을 호출하는 함수

function factorial(n) {
  if (n === 1) return 1;
  return n * factorial(n - 1);
}

console.log(factorial(5)); // 120

9. 화살표 함수와 this

  • 일반 함수: 호출한 객체에 따라 this 바뀜
  • 화살표 함수: this가 상위 스코프에 고정
const person = {
  name: "홍길동",
  normal: function() {
    console.log(this.name);
  },
  arrow: () => {
    console.log(this.name);
  }
};

person.normal(); // 홍길동
person.arrow();  // undefined (전역 this 참조)

마무리

JavaScript 함수는 크게 다음과 같이 분류됩니다.

  • 정의 방식: 선언문, 표현식, 화살표 함수
  • 활용 방식: 콜백, 고차 함수, 즉시 실행, 재귀
  • 핵심 개념: 스코프, this

함수를 제대로 이해하면 재사용성, 가독성, 유지보수성이 높은 코드를 작성할 수 있으며, JavaScript의 비동기 처리(이벤트, Promise, async/await) 를 다룰 때도 필수적인 기반이 됩니다.

'프론트엔드 > JAVASCRIPT' 카테고리의 다른 글

JavaScript map() 정리  (0) 2025.10.23
JavaScript forEach() 정리  (0) 2025.10.23
JavaScript 반복문 정리  (0) 2025.09.23
JavaScript 배열(Array) 정리  (0) 2025.09.23
JavaScript 조건문 정리  (0) 2025.09.23