2026-02-23

함수

함수란

일급 객체(First-class object)이자 재사용 가능한 코드 블록

  • 변수에 저장 가능
  • 다른 함수의 인자로 전달 가능
  • 함수에서 반환 가능
  • 객체의 프로퍼티가 될 수 있음

함수 선언 방식

  • 함수 선언문 (Function Declaration)

      function add(a, b) {
    return a + b;
  }
    • 전체가 호이스팅됨
    • 선언 전에 호출 가능

  • 함수 표현식 (Function Expression)

      const add = function (a, b) {
    return a + b;
  };
    • 변수에 저장
    • 변수 호이스팅 규칙 따름
    • 선언 전에 호출 불가

  • 화살표 함수 (Arrow Function)

      const add = (a, b) => a + b;
    • ES6에서 등장
    • 선언된 위치의 this 값을 유지 → this 바인딩 방식이 다름
    • 생성자로 사용 불가

일급 객체

함수는 값처럼 다뤄진다.

function sayHello() {
  return "hello";
}

function run(fn) {
  console.log(fn());
}

run(sayHello);

매개변수 특징

  • 기본값 설정

      function greet(name = "Guest") {
    return name;
  }

  • Rest Parameter

      function sum(...nums) {
    return nums.reduce((a, b) => a + b);
  }

  • arguments 객체 (구버전)

this와 함수

  • 일반 함수의 this
    • 호출 방식에 따라 결정됨
      function test() {
    console.log(this);
  }
    • 일반 호출 → window (브라우저)
    • 객체 메서드 호출 → 해당 객체
    • 생성자 호출 → 새 객체
  • 화살표 함수의 this
    • 상위 스코프의 this를 그대로 사용 (Lexical this)
    • 자신만의 this가 없음
      const obj = {
    name: "JS",
    arrow: () => console.log(this.name),
  };

    ⇒ 이벤트 핸들러나 클래스 내부에서 자주 사용

클로저 (Closure)

함수가 선언될 당시의 스코프를 기억하는 것

function outer() {
  let count = 0;

  return function () {
    count++;
    return count;
  };
}
  • 해당 환경에 접근할 수 있는 기능
  • 내부 함수가 외부 변수에 접근 가능
  • 상태 유지, 캡슐화, 모듈 패턴에 사용

생성자 함수

function Person(name) {
  this.name = name;
}

const p = new Person("JS");
  • new 키워드로 객체 생성
  • prototype 기반 동작

⇒ 현재는 class 문법을 더 많이 사용

고차 함수 (Higher-Order Function)

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

arr.map((item) => item * 2);
  • map
  • filter
  • reduce

함수와 실행 컨텍스트

함수 호출 시:

  1. 새로운 실행 컨텍스트 생성
  2. 스코프 체인 형성
  3. this 바인딩 결정
  4. 코드 실행

⇒ 스코프와 클로저와 연결됨

참고자료

  • https://velog.io/@surim014/%EC%9B%B9%EC%9D%84-%EC%9B%80%EC%A7%81%EC%9D%B4%EB%8A%94-%EA%B7%BC%EC%9C%A1-JavaScript%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80-part-6-Function
  • https://dawntea-studio.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%ED%95%A8%EC%88%98-%EC%A0%95%EB%A6%AC-javascript-function
  • https://nicekhj.tistory.com/17

results matching ""

    No results matching ""