본문 바로가기
카테고리 없음

JavaScript 함수의 모든 것: 선언식, 화살표 함수, this, 실행 컨텍스트까지

by ctrl-f 2025. 5. 6.

JavaScript 함수의 모든 것

 

자바스크립트(JavaScript)에서 함수는 가장 핵심적인 개념 중 하나입니다. 단순히 코드를 묶는 것이 아니라, 클로저, 스코프, this 바인딩, 실행 컨텍스트 등과도 밀접한 연관이 있습니다. 특히 ES6 이후 도입된 화살표 함수(Arrow Function)는 문법이 간결할 뿐 아니라 this 바인딩 방식에서도 중요한 차이를 가지며, 면접에서도 자주 출제되는 주제입니다. 이 글에서는 함수의 정의부터 function 선언식과 화살표 함수의 차이, 실행 컨텍스트와 this, 그리고 실무와 면접 대응 전략까지 학습 흐름에 맞춰 정리합니다.

JavaScript에서 함수란 무엇인가?

함수는 하나의 작업을 수행하는 코드의 묶음입니다. 자바스크립트에서 함수는 일급 객체(first-class object)이기 때문에 다음과 같은 특징을 가집니다:

  • 변수에 저장 가능
  • 다른 함수의 인자로 전달 가능
  • 다른 함수에서 리턴 가능

함수 정의 방식

자바스크립트에서는 세 가지 방식으로 함수를 정의할 수 있습니다:

  1. 선언식 (Function Declaration)
  2. 표현식 (Function Expression)
  3. 화살표 함수 (Arrow Function)
// 1. 선언식
function greet() {
  return 'Hello';
}

// 2. 표현식
const greet = function () {
  return 'Hello';
};

// 3. 화살표 함수
const greet = () => 'Hello';

세 가지 방식은 외형만 다르지 않습니다. 특히 호이스팅(hoisting)이나 this 바인딩에서 큰 차이를 보입니다.

호이스팅 차이

sayHello(); // 정상 작동

function sayHello() {
  console.log("Hello");
}

위 코드는 함수 선언식이므로 호이스팅되어 정상 실행됩니다. 반면, 함수 표현식이나 화살표 함수는 변수의 호이스팅만 일어나고, 함수 본문은 undefined 상태입니다.

sayHello(); // TypeError

const sayHello = () => console.log("Hello");

정리: function 선언식만 완전한 호이스팅을 지원합니다.

function과 화살표 함수의 차이와 사용법

function과 화살표 함수의 가장 핵심적인 차이점은 this 바인딩 방식입니다.

1. this 바인딩

전통적인 function은 실행 컨텍스트에 따라 this가 바뀌지만, 화살표 함수는 상위 렉시컬 스코프(정의된 위치)의 this를 그대로 사용합니다.

const obj = {
  name: "JS",
  sayHi: function () {
    console.log(this.name);
  }
};

const arrowObj = {
  name: "Arrow",
  sayHi: () => {
    console.log(this.name);
  }
};

obj.sayHi();      // JS
arrowObj.sayHi(); // undefined (전역 this)

설명: 화살표 함수는 객체의 메서드에서 this를 바인딩하지 않으므로, 일반적으로 객체 내부에서는 function 선언을 사용해야 합니다.

2. arguments 객체

function은 arguments라는 유사 배열 객체를 제공하지만, 화살표 함수는 arguments를 제공하지 않습니다.

function sum() {
  console.log(arguments);
}

const arrowSum = () => {
  console.log(arguments); // ReferenceError
};

3. 생성자 함수로 사용 가능 여부

function은 생성자로 사용 가능하지만, 화살표 함수는 생성자로 쓸 수 없습니다.

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

const john = new Person("John"); // 가능

const ArrowPerson = (name) => {
  this.name = name;
};

const jane = new ArrowPerson("Jane"); // TypeError

화살표 함수는 prototype이 없기 때문에 new 키워드와 함께 사용할 수 없습니다.

this와 스코프, 실행 컨텍스트와 함수의 관계

자바스크립트의 함수는 스코프(Scope)와 실행 컨텍스트(Execution Context) 개념과 매우 밀접한 관계를 갖습니다.

렉시컬 스코프

자바스크립트는 렉시컬 스코프(Lexical Scope)를 사용합니다. 즉, 함수가 선언된 위치에 따라 변수의 유효 범위가 결정됩니다.

function outer() {
  const outerVar = "I am outer";
  
  function inner() {
    console.log(outerVar);
  }
  
  return inner;
}

inner 함수는 outerVar에 접근할 수 있습니다. 이를 클로저(Closure)라고도 합니다.

this 바인딩의 결정 방식

  • 일반 함수: 호출 방식에 따라 this 결정
  • 화살표 함수: 선언 당시 상위 this로 고정
const button = {
  label: "Submit",
  onClick: function () {
    console.log(this.label); // Submit
  }
};

const arrowButton = {
  label: "Submit",
  onClick: () => {
    console.log(this.label); // undefined
  }
};

정리: this를 사용해야 할 객체 내부 함수, 클래스 메서드에서는 function을 사용하는 것이 더 적절합니다.

실무 적용과 면접 질문 대응 전략

언제 function을 쓰고, 언제 화살표 함수를 써야 할까?

상황 추천 함수 형태 이유
객체 메서드 function this 바인딩 필요
콜백 함수 (map, filter 등) 화살표 함수 간결한 문법, 상위 this 유지
클래스 내 메서드 function or 화살표 (주의) bind 필요 여부 고려
이벤트 핸들러 function DOM this 필요 시

면접 질문 예시

  • “function과 화살표 함수의 차이는?”
  • “this가 각각 어떻게 바인딩되나요?”
  • “화살표 함수에서 arguments가 없다는 건 무슨 의미인가요?”
  • “new와 함께 쓸 수 있는 함수 형태는?”

모범 답변 예시

“function은 호출 방식에 따라 this가 달라지지만, 화살표 함수는 정의된 렉시컬 스코프의 this를 유지합니다. 그래서 객체 메서드나 생성자 함수에서는 function이 적합하고, 콜백 함수나 내부 this 공유가 필요한 경우에는 화살표 함수가 더 좋습니다. 또한 function은 arguments 객체가 자동 제공되지만, 화살표 함수에는 없습니다.”

결론

자바스크립트 함수는 단순한 실행 코드 블록이 아니라, 스코프, this, 클로저, 실행 컨텍스트 등과 밀접하게 연결된 구조입니다. 특히 function과 화살표 함수는 문법만이 아니라 동작 방식, 바인딩, 메모리 처리 방식에서 차이가 크기 때문에 상황에 따라 선택하는 전략이 중요합니다.

실무에서는 두 함수를 혼용하되, this 바인딩 여부와 호출 맥락에 따라 올바르게 선택해야 하며, 면접에서는 차이점뿐 아니라 실제 예제와 함께 설명하는 것이 효과적입니다. 함수의 본질을 이해하면 자바스크립트 자체를 더 깊이 이해할 수 있습니다.

티스토리툴바