[JavaScript] function / 화살표함수

1. 문법적 차이:

화살표 함수:

javascriptCopy code

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

일반 함수 표현식:

javascriptCopy code

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

화살표 함수는 간결한 문법을 가지고 있으며, 함수 몸체가 한 줄인 경우 중괄호({})와 return 키워드를 생략할 수 있습니다.

2. this의 동작:

화살표 함수: 화살표 함수는 자신만의 this를 생성하지 않고, 외부 스코프의 this를 그대로 사용합니다. 따라서 화살표 함수 내에서 this는 선언 시점에 결정되며 변경되지 않습니다.

일반 함수 표현식: 일반 함수는 자신만의 this를 가지며, 함수가 호출될 때마다 동적으로 바인딩됩니다.

3. 생성자 함수로서의 사용:

화살표 함수: 화살표 함수는 생성자로 사용될 수 없습니다. new 키워드와 함께 호출하면 에러가 발생합니다.

일반 함수 표현식: 일반 함수는 생성자로 사용될 수 있습니다. new 키워드와 함께 호출하면 새로운 객체가 생성되고, 함수 내에서 this는 새로운 객체를 가리킵니다.

사용법 선택:

1. 간결성과 가독성:
   • 화살표 함수는 간결한 문법으로 작성할 수 있어 코드를 더 간결하게 만들 수 있습니다.
   • 간단한 함수 또는 콜백 함수 등의 경우에 화살표 함수가 더 편리할 수 있습니다.
2. this의 동작:
   • this가 중요한 역할을 하는 메서드나 객체 생성 등의 경우에는 function 표현식을 사용하여 동적인 this 바인딩이 필요한 경우가 있습니다.
   • 반면, this를 외부 스코프에서 가져와 사용하는 경우에는 화살표 함수가 편리할 수 있습니다.
3. 생성자 함수의 사용:
   • 생성자 함수로 사용해야 하는 경우에는 function 표현식을 사용해야 합니다.

javascriptCopy code

// 간단한 예시 const obj = { name: 'John', sayHelloArrow: () => { console.log(`Hello, ${this.name}`); // this는 외부 스코프의 this를 사용 }, sayHelloFunction: function() { console.log(`Hello, ${this.name}`); // this는 현재 객체(obj)를 가리킴 } }; obj.sayHelloArrow(); // Hello, undefined obj.sayHelloFunction(); // Hello, John

 

 

---

 

 

화살표 함수의 장점:

1. 간결한 문법:
   • 단일 표현식의 경우 {}와 return을 생략할 수 있어 코드를 더 간결하게 만들 수 있습니다.
2. this 동작:
   • 화살표 함수는 자신만의 this를 생성하지 않고 외부 스코프의 this를 그대로 사용합니다. 따라서 this가 중요한 역할을 하는 경우에 유용하게 사용됩니다.
3. 명시적인 반환:
   • 단일 표현식을 가질 때, 명시적인 return 문을 사용하지 않아도 결과가 암시적으로 반환되기 때문에 간단한 표현식을 갖는 함수에서 유용합니다.

화살표 함수의 단점:

1. 메서드로의 사용 제한:
   • 화살표 함수는 this를 생성하지 않기 때문에, 객체의 메서드로 사용될 경우 해당 객체를 가리키지 않습니다. 이로 인해 메서드 내부에서 객체의 프로퍼티에 접근이 어려울 수 있습니다.
2. 생성자로의 사용 불가:
   • 화살표 함수는 생성자 함수로 사용할 수 없습니다. new 키워드와 함께 호출하면 에러가 발생합니다.
3. 가독성 감소:
   • 복잡한 함수나 여러 문장을 포함하는 경우 가독성이 감소할 수 있습니다. 이런 경우에는 명시적인 {}와 return을 사용하는 일반 함수 표현식이 더 적합할 수 있습니다.

일반 함수 표현식의 장점:

1. this 동작:
   • 일반 함수는 호출될 때마다 동적으로 this가 바인딩되기 때문에, 객체의 메서드로 사용할 때 객체를 가리킵니다.
2. 메서드로의 사용 가능:
   • 객체의 메서드로 사용할 때, 객체 내부의 프로퍼티에 쉽게 접근할 수 있습니다.
3. 생성자로의 사용 가능:
   • 생성자 함수로 사용하여 객체를 생성할 수 있습니다.

일반 함수 표현식의 단점:

1. 간결성 부족:
   • 간단한 표현식을 가지는 함수의 경우, {}와 return을 작성해야 하므로 코드가 더 길어질 수 있습니다.
2. 명시적인 this 바인딩 필요:
   • 메서드로 사용되는 경우, 명시적으로 this를 바인딩해주어야 하는 번거로움이 있습니다.

이러한 장단점을 고려하여 코드의 목적과 특정 상황에 적합한 함수 표현식을 선택하는 것이 중요합니다. 함수의 사용 용도, this의 역할, 코드의 가독성 등을 고려하여 화살표 함수와 일반 함수 표현식을 적절히 조합하여 사용하면 됩니다.