자바스크립트 function 과 화살표 함수 ( => )

 

JavaScript에서 function() {}과 () => {}는 두 가지 다른 함수 선언 방식을 나타냅니다. 이들은 각각 "전통적인 함수 선언"과 "화살표 함수(arrow function)"로 알려져 있으며, 몇 가지 중요한 차이점이 있습니다.

1. 문법

• 전통적인 함수 선언(function() {}):
• function myFunction(a, b) { return a + b; }
• 화살표 함수(() => {}):
• const myFunction = (a, b) => a + b;

화살표 함수는 더 간결한 문법을 제공합니다.

2. this 바인딩

• function() {}: 전통적인 함수에서 this는 함수가 호출되는 방식에 따라 달라집니다. 예를 들어, 메소드로서 호출되면 this는 호출한 객체를 가리키고, 일반 함수로서 호출되면 this는 전역 객체(브라우저에서는 window, Node.js에서는 global)를 가리키거나 엄격 모드(use strict)에서는 undefined가 됩니다.
• () => {}: 화살표 함수에서 this는 함수가 정의될 때의 컨텍스트를 유지합니다. 즉, 화살표 함수 내부의 this는 외부 함수의 this와 동일합니다.

3. 생성자 함수로의 사용

• function() {}: 전통적인 함수는 new 키워드를 사용하여 생성자 함수로 사용될 수 있습니다.
• () => {}: 화살표 함수는 생성자 함수로 사용될 수 없습니다. new 키워드와 함께 화살표 함수를 사용하려고 하면 오류가 발생합니다.

4. arguments 객체

• function() {}: 전통적인 함수 내부에서 arguments 객체를 사용하여 함수에 전달된 모든 인자에 접근할 수 있습니다.
• () => {}: 화살표 함수는 arguments 객체를 바인딩하지 않습니다. 함수 내부에서 전달된 인자에 접근하기 위해서는 나머지 매개변수(rest parameters)를 사용해야 합니다.

이러한 차이점들로 인해 화살표 함수와 전통적인 함수는 각각의 사용 사례에 따라 선택하여 사용되어야 합니다. 화살표 함수는 this 바인딩의 예측 가능성 덕분에 특히 이벤트 핸들러나 콜백 함수에 자주 사용됩니다. 반면, 전통적인 함수는 생성자 함수로의 사용이 가능하며, 더 유연한 this 바인딩을 제공합니다.

 

 

this 키워드의 사용법과 그것이 다르게 작동하는 예제를 보여드리겠습니다.

1. 전통적인 함수에서의 this

전통적인 함수에서 this는 함수가 어떻게 호출되었는지에 따라 달라집니다.

function traditionalFunction() {
  console.log(this);
}

traditionalFunction(); // 전역 객체 (브라우저에서는 window)

const obj = {
  method: traditionalFunction
};

obj.method(); // obj

첫 번째 호출(traditionalFunction())에서 this는 전역 객체를 가리킵니다. 두 번째 호출(obj.method())에서는 this가 obj를 가리킵니다.

2. 화살표 함수에서의 this

화살표 함수에서 this는 함수가 선언될 때의 컨텍스트를 가리킵니다.

const arrowFunction = () => {
  console.log(this);
};

arrowFunction(); // 전역 객체 (브라우저에서는 window)

const obj2 = {
  method: arrowFunction
};

obj2.method(); // 여전히 전역 객체 (브라우저에서는 window)

화살표 함수에서 this는 언제나 선언될 때의 컨텍스트를 유지합니다. 그래서 arrowFunction이 선언된 곳의 this는 전역 컨텍스트이므로, 이 함수 안에서 this를 호출하면 항상 전역 객체를 가리킵니다. 객체 obj2 내에서 메서드로 호출되어도 마찬가지입니다.

3. this 바인딩의 명시적 변경

this 바인딩은 call, apply, bind 메서드를 사용하여 명시적으로 변경할 수 있습니다.

function showThis(a, b) {
  console.log(this, a, b);
}

const context = { value: "I'm the context" };

showThis.call(context, 1, 2); // context { value: "I'm the context" }, 1, 2
showThis.apply(context, [1, 2]); // context { value: "I'm the context" }, 1, 2

const boundFunction = showThis.bind(context);
boundFunction(1, 2); // context { value: "I'm the context" }, 1, 2

call과 apply는 함수를 즉시 호출하며, this 컨텍스트와 인자를 전달합니다. bind는 새로운 함수를 반환하고, 이 함수는 언제든지 호출할 수 있으며, 명시적으로 설정된 this 컨텍스트를 가집니다.

이러한 this의 특성과 사용법을 이해하는 것은 JavaScript에서 중요한 부분입니다.