JavaScript에서 화살표 함수와 일반 함수의 차이점

Next.js와 React에서 웹 애플리케이션을 개발하며 JavaScript의 중요한 기능 중 하나로 여겨지는 화살표 함수와 일반 함수의 차이를 알아봅시다.

JavaScript에서 함수는 특정 작업을 수행하기 위해 디자인된 코드 블록입니다. 함수를 활용하면 개발자들은 큰 프로그램을 여러 개의 작고 관리하기 쉬운 컴포넌트로 분리할 수 있습니다. 따라서 동일한 코드를 반복해서 작성할 필요가 없게 됩니다. JavaScript에서 사용할 수 있는 함수의 유형은 크게 두 가지입니다.

1. 일반 함수
2. 화살표 함수 (ES6¹에서 도입됨)

일반 함수

일반 함수는 주로 두 가지 방식, 즉 함수 선언과 함수 표현식을 통해 작성됩니다.

// 함수 선언 방식
function add(a, b) {
  return a + b;
}
// 함수 표현식 방식
const sum = function (a, b) {
  return a + b;
  add(2, 3); // 5
  sum(2, 3); // 5
}

함수 선언과 함수 표현식 사이의 핵심 차이점은, add(2,3) 같은 함수는 선언되기 전에도 호출할 수 있다는 것입니다. 그러나 sum(2,3)과 같은 함수는 정의된 후에만 호출할 수 있습니다.

화살표 함수 (Arrow Functions)의 7가지 다른점

화살표 함수(또는 fat arrow 함수라고도 함)는 ES6에서 새롭게 소개된 기능으로, 함수 표현식을 작성하기 위한 더 간결한 문법을 제공합니다. 일반 함수에 비해 훨씬 깔끔하게 함수를 생성할 수 있습니다. 여기에서는 선언 방식을 사용하지 않고, 함수 표현식만을 사용하여 작성할 수 있습니다.

// 화살표 함수 표현식
const add = (a, b) => {
  return a + b;
}
// 간결한 문법
const add = (a, b) => a + b;

화살표 함수와 일반 함수 사이에는 몇 가지 차이점이 있습니다:

• 문법
• arguments 객체의 부재
• 화살표 함수에는 prototype 객체가 없음
• new 키워드로 호출할 수 없음 (생성자 함수가 아님)
• 자체적인 this가 없음
• 생성자 함수로 사용할 수 없음
• 중복된 이름의 매개변수가 허용되지 않음

각 항목에 대해 자세히 알아보겠습니다.

1. 문법

함수 내에 하나의 표현식만 있는 경우 중괄호는 필요 없으며, 해당 결과는 함수에서 암시적으로 반환됩니다.

const add = (a, b) => {
  return a + b;
}
// 간결한 문법
const add = (a, b) => a + b;
  // 매개변수가 하나만 있을 경우 괄호 생략
  const square = a => a * a;

2. 화살표 함수에서의 arguments 객체

함수에 전달되는 인수의 수가 알려져 있지 않은 경우, arguments라는 단일 변수로 모든 매개변수를 얻을 수 있습니다.

화살표 함수 내에서는 arguments를 사용할 수 없습니다. 화살표 함수에서 arguments에 접근하려고 하면 오류가 발생합니다.

const arrowFun = () => {
  console.log(arguments);
  // 오류 발생: arguments가 정의되지 않음
}

하지만 대신 "rest 매개변수"를 사용하여 일반 배열 객체를 얻을 수 있습니다.

// 화살표 함수에서의 rest 연산자와 간결한 문법
const findMaxNumber = (...numbers) => Math.max(...numbers);
findMaxNumber(1, 2, 3, 4); // 4

3. 화살표 함수와 프로토타입 객체

일반 함수와 달리 화살표 함수에는 "프로토타입 객체"가 없습니다. 화살표 함수의 프로토타입을 접근하려고 시도하면 undefined를 반환합니다.

// 일반적인 JavaScript 함수
function traditionalFunction() {}

// ES6 화살표 함수
const arrowFn = () => {};

console.log(traditionalFunction.prototype); // {constructor: f}
console.log(arrowFn.prototype); // undefined

4. new 키워드로 호출 불가능

화살표 함수는 생성자가 없기 때문에 new 키워드로 호출할 수 없습니다. "new 키워드로 인스턴스화"하려고 시도하면 오류가 발생합니다.

const UserDetails = (name) => {
  this.name = name;
};
const user1 = new UserDetails("jaya");
// 오류: UserDetails는 생성자가 아님

5. 자체적인 this 없음 (call, apply, bind는 예상대로 동작하지 않음)

전통적인 함수에서 내부적인 this 값은 동적입니다. 이는 함수가 어떻게 호출되는지에 따라 달라집니다.

const user = {
  username: "Jayanth",
  getUserName: function() {
    return this.username;
  }
};
const getName = user.getUserName; 
console.log(getName()); // undefined
console.log(user.getUserName()); // Jayanth

일반 함수와는 달리, 화살표 함수는 자체적인 this 바인딩이 없습니다. 화살표 함수 내에서 this를 접근하면 가장 가까운 화살표 함수가 아닌 부모 함수의 this를 반환합니다.

const user = {
  username: "Jayanth",
  getUserName: () => {
    return this.username;
  }
};
const getName = user.getUserName; 
console.log(getName()); // undefined
console.log(user.getUserName()); // undefined

화살표 함수의 this 값은 선언 시점에 결정되며, 이후에 변경되지 않습니다. 따라서 call, apply, bind는 화살표 함수의 this 값을 변경할 수 없습니다.

6. 생성자 함수로 사용 불가능

MDN에 따르면

function* 문장은 생성기 함수를 정의합니다.

yield 키워드는 화살표 함수의 본문에서 사용될 수 없습니다. 결과적으로 화살표 함수는 생성기로 사용될 수 없습니다.

7. 중복된 이름의 매개변수 허용 안 됨

비 엄격 모드에서는 일반 함수는 중복된 이름의 매개변수를 사용할 수 있습니다. 하지만 엄격 모드에서는 허용되지 않습니다.

화살표 함수는 엄격 모드 또는 비 엄격 모드 모두에서 중복 매개변수를 허용하지 않습니다. 중복 매개변수는 Syntax Error를 발생시킵니다.

결론

JavaScript는 웹 개발의 핵심 언어로, 그 안에 다양한 기능과 특징을 가지고 있습니다. 이 글에서는 그 중에서도 Next.js와 React 개발에 있어서 중요한 역할을 하는 일반 함수와 화살표 함수의 차이점에 대해 깊게 파헤쳤습니다. 두 함수의 다양한 특성, 예를 들면 this 바인딩 방식이나 문법적인 차이, 그리고 화살표 함수의 간결함 등은 단순히 코드를 작성하는 것 이상의 의미를 가지며, 이를 통해 보다 효율적이고 유지 보수가 쉬운 애플리케이션을 구축할 수 있습니다. 특히 Next.js와 React를 활용하는 개발자들에게는 이러한 지식이 더욱 중요합니다. 컴포넌트 기반의 개발 방식에서 함수의 역할과 특성을 정확히 이해하고 활용하는 것은 애플리케이션의 성능과 구조에 큰 영향을 미칩니다. 그렇기에 이 글을 통해 얻은 지식을 잘 활용하여, 각 상황에 맞는 최적의 함수 선택과 활용법을 마스터하는 것이 Next.js와 React 개발의 성공 키가 될 것입니다.