자바스크립트에서 화살표 함수와 일반 함수의 6가지 차이점

함수는 개발자가 재사용 가능한 코드 블록을 생성할 수 있도록 함으로써 자바스크립트 프로그래밍에서 중요한 역할을 합니다. 자바스크립트에는 일반 함수와 화살표 함수의 두 가지 주요 함수가 있으며, 다양한 방식으로 정의할 수 있습니다.

화살표 함수와 일반 함수는 자바스크립트에서 서로 다른 두 가지 유형의 함수이며, 각각 고유한 특성을 가지고 있습니다. 둘 다 특정 작업을 수행하는 데 사용되지만 서로를 구별하는 주요 차이점이 있습니다. 코드 내에서 함수를 효과적으로 활용하려면 이러한 차이점을 이해하는 것이 중요합니다.

문법 차이

자바스크립트 함수의 구문 선택은 가독성과 이해의 용이성에 영향을 줍니다. 일반 함수와 화살표 함수는 구문이 다르기 때문에 함수를 작성하고 사용하는 데 차이가 있을 수 있습니다.

자바스크립트 화살표 함수는 기존 함수 선언에 비해 구문이 단순화되어 있어 읽고 이해하기 쉽습니다. 한 줄의 코드에서 함수 선언과 할당을 조합하여 생성됩니다.

const add = (a, b) => a + b;

주어진 코드는 두 개의 매개변수 “a”와 “b”를 받아 “return a+b” 공식을 사용하여 그 합계를 반환하는 “add”라는 이름의 화살표 함수를 생성합니다.

반대로 자바스크립트에서 일반 함수를 정의하려면 “함수” 키워드 뒤에 중괄호 안에 함수 이름과 매개변수를 사용해야 합니다. 다음은 정규 함수를 정의한 예시입니다.

function add(a, b) {
  return a + b;
}

“이 예시는 중괄호와 ‘return’ 문을 사용하는 정규 함수를 만들기 위해 ‘function’ 키워드를 사용하는 방법을 보여줍니다.

화살표 함수는 단일 표현식이 포함된 간단한 구문에 더 적합한 반면, 일반 함수는 여러 문이나 표현식이 포함된 복잡한 구문에 더 적합합니다. 일반 함수는 화살표 함수에 비해 구문이 길기 때문에 여러 문이나 표현식이 필요한 경우 읽고 이해하기 쉽습니다.

범위 차이

“범위 지정”이라는 개념은 함수의 내부 변수와 함수를 코드의 다른 부분에서 액세스할 수 있는 방식을 의미합니다. 범위 지정은 코드의 여러 섹션에서 변수와 함수를 정의하고 사용할 수 있는 방법을 결정하기 때문에 JavaScript 프로그래밍의 필수적인 측면입니다. 변수와 함수의 범위 지정 방식은 화살표 및 일반 함수의 작성 및 활용 방식에 큰 영향을 미칠 수 있습니다.

`this` 키워드에 대한 범위 지정 규칙은 화살표 함수와 일반 함수 간에 크게 다릅니다.화살표 함수는 자체 `이 값`이 없으며, 정의할 때 둘러싸는 어휘 범위에 따라 결정됩니다. 따라서 함수가 호출되는 컨텍스트에 따라 달라질 수 있습니다.

화살표 함수에는 자체 이 키워드가 없지만 함수를 둘러싸고 있는 정적 범위와 동일한 이 값을 공유합니다.

주어진 텍스트는

const person = {
  name: 'John,'

  sayName: function() {
    console.log(this.name);
  }
};

person.sayName(); // logs 'John'

일반 `sayName()` 함수는 개별 객체의 속성이며 그 안에 있는 `this` 키워드는 특정 사람 항목을 참조합니다.

화살표 함수로 같은 작업을 시도하는 목적은 무엇인가요?

const person = {
  name: 'John',

  sayName: () => {
    console.log(this.name);
  }
};

person.sayName(); // logs undefined

`sayName()` 메서드에 사용된 화살표 함수에는 자체 `this` 키워드가 없으므로 주변 정적 범위에서 `this` 값을 상속받습니다. 이 상황에서는 인스턴스의 전역 범위가 화살표 함수에 대한 `this` 컨텍스트로 사용됩니다.

`person.sayName()`을 호출할 때 “John”이라는 값을 가져오는 대신 정의되지 않은 값을 반환하여 코드의 전체 기능에 영향을 줍니다.

각각 적용하면 좋은 경우는?

자체 “this” 키워드에 액세스해야 하는 함수는 객체 내의 화살표 함수나 메서드보다는 일반 함수를 사용하여 더 적절하게 정의할 수 있습니다.

“this” 키워드를 사용할 필요가 없는 함수 프로그래밍 및 콜백에는 화살표 함수가 더 적합할 수 있습니다.

함수 바인딩 차이점

화살표 함수는 일반 함수에 비해 독특한 형태의 함수 바인딩을 가지며, 이는 사용법에 영향을 미칩니다.

일반 함수에는 화살표 함수와 구별되는 “함수 바인딩”이라는 특수한 속성이 있습니다. 즉, 일반 함수 내에서 “this” 키워드를 사용하면 함수가 호출된 방식에 따라 다른 객체와 연결됩니다. 예를 들어 일반 함수를 객체 메서드로 호출하는 경우 “this”는 객체 인스턴스를 참조합니다. 그러나 “call”, “apply” 또는 “bind” 메서드를 사용하여 일반 함수를 호출하는 경우 “this”는 해당 메서드에 지정된 값을 참조합니다. 화살표 함수에는 자체 “this” 바인딩이 없으므로 항상 둘러싸는 컨텍스트에서 “this” 값을 상속합니다.

화살표 함수에는 기존 함수처럼 자체 `this` 키워드가 없습니다. 대신 주변 범위에서 ‘this’의 값을 상속합니다.

예제를 통해 이 개념을 이해하는 또 다른 방법을 알려드리겠습니다.이름 속성을 가진 사람에 대한 객체가 있고 표준 함수를 사용하여 그 사람의 이름을 표현하는 `sayName()`이라는 메서드가 있다고 가정해 보겠습니다.

const person = {
  name: 'John',

  sayName: function() {
    console.log(this.name);
  }
};

const anotherPerson = {
  name: 'Jane'
};

person.sayName.call(anotherPerson); // logs 'Jane'

문제의 코드는 `Person` 클래스의 인스턴스를 사용하며, `call()` 메서드를 통해 같은 클래스의 다른 인스턴스에 대한 참조가 `sayName()` 메서드의 인수로 전달됩니다. 결과적으로 `sayName()` 메서드 내의 `this` 키워드는 인자로 전달된 다른 인스턴스를 참조하므로 메서드가 호출될 때 “John”이 아닌 “Jane”이 출력됩니다.

일반 함수 대신 화살표 함수를 사용하여 클래스를 다른 클래스에 인수로 전달할 수도 있습니다.

const person = {
  name: 'John',

  sayName: () => {
    console.log(this.name);
  }
};

const anotherPerson = {
  name: 'Jane'
};

person.sayName.call(anotherPerson); // logs undefined

이 예제에서 `sayName()` 내에 화살표 함수를 사용하는 이유는 `sayName()`에 대한 특정 키워드가 없기 때문입니다. 따라서 화살표 함수를 사용하여 자체 실행 익명 함수를 만들어 주변(전역) 범위의 속성을 상속할 수 있습니다.

이 문은 `person.sayName.call(anotherPerson)`이 실행되면 화살표 함수 내부의 `this` 키워드는 여전히 전역 객체를 참조하는 반면 `Jane`은 출력에서 `undefined`로 대체될 것임을 시사합니다.

화살표 함수는 때때로 기존 함수보다 더 간결할 수 있지만 함수를 특정 `이것` 값에 바인딩하는 데 사용할 수는 없습니다. 바인딩이 필요한 경우 일반 함수를 사용하는 것이 더 나을 수 있습니다.

암시적 반환

화살표 함수에는 값을 반환하는 메커니즘이 내장되어 있습니다. 본문에 하나의 표현식만 포함된 경우 해당 표현식이 함수의 결과로 자동 반환됩니다.

텍스트는 요점을 설명하기 위해 특정 사례 또는 그림을 제공합니다.

const double = (x) => x * 2;

이 화살표 함수는 하나의 인수를 받아 함수 본문 내에서 처리하며, 표현식이 하나만 있으므로 ‘return’ 문을 사용할 필요가 없습니다.

호환성 차이점

ECMAScript 6의 새로운 기능인 화살표 함수는 이전 웹 브라우저나 환경과 호환되지 않을 수 있습니다. 자바스크립트 초기부터 존재해 온 기존 함수는 일반적으로 사용되며 폭넓게 지원됩니다.

일반적인 환경에서 예상대로 작동하지 않을 수 있는 샘플 코드가 제공되었습니다.

const add = (a, b) => a + b;

다음은 주어진 코드 조각의 사람이 읽을 수 있는 버전입니다: ”’python # 함수를 작성할 때 일반적인 지침은 함수를 최대한 재사용 가능하게 만드는 것입니다. 이를 달성하는 한 가지 방법은 함수가 하나 이상의 인수를 받아 동작을 사용자 지정하는 데 사용할 수 있도록 만드는 것입니다.이렇게 하면 매번 전체를 복사하여 붙여넣을 필요 없이 다른 입력으로 동일한 함수를 쉽게 재사용할 수 있습니다. 이 접근 방식을 사용하여 직사각형의 넓이를 계산하는 간단한 함수의 예시를 통해 그 작동 방식을 설명해 보겠습니다: def calculate_rectangle_area(length, width): # 직사각형의 넓이를 계산하려면 길이와 너비를 함께 곱하면 됩니다. 하지만 그 전에 길이와 너비가 0인지 확인해야 합니다.

function add(a, b) {
  return a + b;
}

프로젝트에 이전 버전과의 호환성이 필요한 경우 화살표 함수를 사용하는 대신 일반 함수를 선택하세요. 그럼에도 불구하고 화살표 함수는 최신 브라우저와 컨텍스트에서 사용할 때 가독성과 간결성 측면에서 장점이 있습니다.

자바스크립트에서 화살표 함수 또는 일반 함수 선택

자바스크립트에서 화살표 함수와 기존 함수는 여러 가지 면에서 다릅니다. 화살표 함수는 구문이 간단하지만 주변 컨텍스트에서 “this” 키워드를 상속받습니다. 반면에 일반 함수는 더 다재다능하고 더 복잡한 시나리오를 처리할 수 있습니다.

코딩에서 다양한 함수를 사용하려면 그 차이점을 이해하고 프로젝트의 필요에 따라 각 함수를 언제 적용해야 하는지 알아야 합니다. 또한 함수를 선택할 때 호환성 문제를 고려하는 것도 중요합니다.

자바스크립트의 화살표와 정규 함수는 깔끔하고 효율적인 코드를 작성하는 데 매우 유용합니다.