자바스크립트 화살표 함수란 무엇인가

자바스크립트의 화살표 함수는 함수를 정의하는 또 다른 방법 중 하나다. 보통 익명 함수라고도 한다. 이름에서도 유추할 수 있듯이 함수 형태는 이름이 없고, 중간에 화살표를 사용해 간결하게 작성하는 방법이다.
화살표 함수는 () => {} 와 같은 형식으로 작성이 되며, 기존의 함수 작성 방법보다 훨씬 더 간결한 형태라고 할 수 있다.
화살표 함수는 과연 쓸만한 함수인지... 함수의 특징과 활용 사례 등을 살펴보자.

---

화살표 함수 (익명 함수)

화살표 함수는 ES6(ECMAScript 2015)에서 도입된 새로운 형태의 함수 문법이다. 기존의 함수 형태보다 표현식이 더 간결하고 가독성이 좋으며, 주로 콜백 함수나 간단한 함수를 작성할 때 많이 사용된다.


문법
화살표 함수는 () => {} 형태로 작성되며, 화살표 왼쪽에는 매개변수를 전달받고, 오른쪽에는 함수의 실행 코드가 작성된다.

this
화살표 함수는 자신의 this를 가지지 않고, 상위 스코프의 this를 그대로 사용한다. 그렇기 때문에 일반 함수와의 this 동작은 다르게 작용된다.

return 생략
단일 표현식으로 이루어진 경우에는 중괄호와 return이 생략될 수 있다.
(x, y) => x + y 코드와
function (x, y) { return x + y } 는 동일하게 동작한다.

arguments 객체
화살표 함수는 자체적인 arguments 객체를 가지지 않으며, 대신 상위 스코프의 arguments 객체를 사용한다.


위와 같은 특징들로 인해 화살표 함수는 간결하게 처리가 가능하고, this 바인딩 관련 문제를 해결할 수 있다.

---

화살표 함수와 일반 함수의 차이

자바스크립트의 화살표 함수와 일반 함수는 몇가지 차이점이 있다. 문법적으로도 차이가 있지만 기능적으로도 큰 차이가 있기 때문에 각 함수의 특성을 잘 파악하고 상황에 맞게 사용하는 것이 중요하다.


문법적 차이
화살표 함수는 함수를 정의할 때 =>를 사용해서 정의를 하고, 일반 함수는 function 키워드를 사용하여 정의한다.

this 바인딩
화살표 함수는 자신의 this를 바인딩하지 않고, 외부 스코프의 this를 상속받는데, 화살표 함수 내부에서 this를 사용할 때, 해당 함수가 정의된 스코프의 this를 참조한다.
반면에 일반 함수는 호출되는 컨텍스트에 따라 this를 바인딩한다. 함수를 호출하는 방법에 따라 this의 값이 동적으로 결정된다.

arguments 객체
화살표 함수는 자체적인 arguments 객체를 가지지 않는데, 일반 함수는 자체적으로 arguments 객체를 가지며 함수 내부에서 사용이 가능하다.

생성자
화살표 함수는 익명 함수이기 때문에 생성자로 사용할 수 없으며, new 연산자와 함께 사용하게 되면 에러가 발생한다.
일반 함수는 생성자를 사용할 수 있으며, new 연산자와 함께 호출하여 객체를 생성할 수 있다.

중복 매개변수
화살표 함수는 중복된 매개변수 이름을 사용할 수 없으며, 일반 함수는 중복된 매개변수 이름을 사용할 수 있다.

return
화살표 함수는 단일 표현식을 반환할 때 return 키워드를 생략할 수 있으며, 일반함수는 명시적으로 return 키워드 사용하여 값을 반환해야 한다.


위의 차이점들을 통해서 정리하면, 화살표 함수는 간결하고 짧은 함수를 작성할 때 유용하게 사용되며, 주로 콜백 함수나 익명 함수에 유용하다.
일반 함수는 함수를 정의하거나 생성자 함수를 만들 때 주로 사용된다.
각 차이점들을 유의해서 상황에 맞게 사용하는 것이 중요하다.

---

arguments 객체

화살표 함수의 arguments 객체를 사용할 때에는 일반 함수와의 차이가 있기 때문에 유의해서 사용해야 한다.
보통 일반 함수에서 arguments를 사용할 때에는 함수 내에서 arguments 객체는 함수가 호출될 때 전달된 모든 인수를 포함하는 유사 배열 객체이며, 이 객체를 사용하여 함수 내에서 전달된 모든 인수에 접근할 수 있다. 

화살표 함수는 자체적인 arguments를 가지고 있지 않는다. 그렇기 때문에 화살표 함수 내부에서 arguments를 사용하면 외부 스코프의 arguments를 참조하게 되며, 상위 스코프의 arguments 객체를 상속받지 않기 때문에 arguments를 사용할 때 주의해야 한다.

추가로 비동기 함수를 사용할 때의 다른점이 있는데, 비동기 함수 내에서 화살표 함수를 사용할 때에는 arguments는 해당 비동기 함수가 호출될 때의 외부 스코프의 arguments를 참조하게 된다. 비동기 함수 내에서 arguments를 사용할 때 발생하는 주의사항 중 하나인데, 화살표 함수는 자신만의 arguments를 생성하지 않으므로, 외부 스코프의 arguments를 참조하게 된다.

화살표 함수는 클로저로 동작할 때에도 마찬가지다. 화살표 함수가 클로저로 사용될 경우 외부 스코프의 변수와 마찬가지로 외부 스코프의 arguments에도 접근할 수 있다. 이는 화살표 함수가 자신만의 arguments를 갖지 않기 때문에 발생하는 동작이다.

일반 함수의 arguments

function regularFunction() {
    console.log("Regular Function - Arguments:", arguments);
}

regularFunction(1, 2, 3);

위와 같이 일반 함수에서는 arguments를 사용하게 되면 함수 내에서 전달받은 arguments 값 1, 2, 3을 사용하게 된다.


화살표 함수의 arguments

const arrowFunction = () => {
    console.log("Arrow Function - Arguments:", arguments);
};

arrowFunction(4, 5, 6);

위와 같이 화살표 함수의 경우는 arguments를 전달받으면 일반 함수와 사용하는 게 유사해보이지만 실제로는 상위 스코프의 arguments 객체를 사용하게 되는 방식이다.
그런데 만약 상위 스코프가 없이 화살표 함수에서 arguments 객체를 호출하게 되면 에러가 발생하게 된다.

---

문자열 자르기 예제

const splitStr = str => str.split("");

const text = "Arrow function";

const splitText = splitStr(text);

위의 코드는 문자열 "Arrow function"을 split하는 예제 코드다. 문자열을 매개변수로 받아 split하고 return만 하면 되기때문에 위와 같이 간단히 화살표 함수를 써서 작성하였다. 위와 같이 하면 일반 함수를 사용할 때보다 훨씬 간결하고 가독성이 좋은 장점이 있다.

---

배열 요소 map() 연산 예제

배열 내의 요소들을 순회하면서 연산하는 작업을 처리할 때 일반 함수대신 화살표 함수를 사용하여 처리할 수 있다.

const numbers = [1, 2, 3, 4, 5];

// 화살표 함수를 이용하여 각 요소를 제곱하는 경우
const squaredNumbers = numbers.map(num => num * num);

console.log(squaredNumbers); 
// 출력: [1, 4, 9, 16, 25]

위의 코드는 정수로 이루어진 배열을 map()을 사용하여 순회할 때 화살표 함수를 사용하는 예제 코드다.
map(function() {}) 대신 map(() => {})와 같이 간결하게 변경하여 사용할 수 있다.

위와 같이 화살표 함수를 사용한다면 간단한 연산의 경우에는 라인 변경을 하지 않고 return을 생략하고 간결하게 작성할 수 있다.

---

배열 요소 filter() 연산 예제

map() 함수 뿐만 아니라 filter() 함수와 같이 순회하여 처리하는 함수는 모두 동일하게 사용이 가능하다.

const words = ["apple", "banana", "kiwi", "orange", "grape"];

// 길이가 5 이상인 단어만을 필터링하는 경우
const longWords = words.filter(word => word.length >= 5);

console.log(longWords); 
// ["apple", "banana", "orange"]

위의 코드는 과일 이름으로 구성된 배열이다.
filter() 함수에 화살표 함수를 사용해서 특정 조건에 부합하는 요소만 추출하는 예제 코드다. 위와 같은 경우는 요소의 길이가 5자 이상인 요소만 추출할 수 있도록 하는 예제인데, 이 때에도 마찬가지로 return을 생략하여 사용하였다.
map()과 거의 유사하게 처리가 가능한 것을 확인할 수 있다.

---

배열 요소 reduce() 연산 예제

이번에는 reduce() 함수를 활용한 예제인데, 연산이 조금 복잡할 수 있다.

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// 짝수의 인덱스를 가진 요소들의 인덱스를 배열로 반환하는 경우
const evenIndex = numbers.reduce((acc, num, index) => {
  if (index % 2 === 0) {
    acc.push(index);
  }
  return acc;
}, []);

console.log(evenIndex); 
// [0, 2, 4, 6, 8]

위의 코드와 같이 정수로 된 배열을 기준으로 reduce() 함수와 화살표 함수를 응용한 예제다.
위와 같이 코드 라인이 길어지게 되면 반환값은 return 구문을 사용해야 한다. 그래도 함수의 간결함은 변함이 없다.
코드의 내용은 배열을 순회하면서 현재 요소의 인덱스가 짝수인 경우 값을 새 배열에 추가시키는 내용이다.

---

화살표 함수 사용 시 주의사항

자바스크립트의 화살표 함수는 정말 다양한 상황에서 활용되는 기능 중 하나다. 그만큼 기능의 장점이 확실하다고 할 수 있다. 그러나 좋은 기능이라고 하더라도 정확히 알고 써야하며, 화살표 함수 역시 사용할 때 주의사항을 살펴보는 것이 좋다.


this 바인딩
화살표 함수는 자신의 this를 가지지 않고, 상위 스코프의 this를 그대로 사용한다. 그렇기 때문에 화살표 함수 내부에서 this를 사용할 때 주변 스코프의 this와 다를 수 있으므로 주의해서 사용해야 한다.

arguments 객체
화살표 함수는 자체적인 arguments 객체를 가지지 않기 때문에 arguments 객체를 사용하려면 일반 함수를 사용해야 한다.

생성자 사용 불가
화살표 함수는 생성자로 사용할 수 없다. 즉, new와 함께 사용할 수 없다.

명확한 반환값
화살표 함수는 단일 표현식을 가질 때 중괄호와 return을 생략할 수 있는데, 복잡한 로직을 가지는 경우에는 명확한 반환값을 보장하기 위해 중괄호와 return을 사용하는 것이 좋다.

가독성 유지
코드의 가독성을 유지하기 위해 화살표 함수를 남용하지 않는 것이 중요하다. 간단한 로직이 아닌 경우에는 일반 함수를 사용하는 것이 가독성을 높일 수 있다.

콜백 함수
화살표 힘수는 일반 함수와 달리 자체적인 this를 가지지 않기 때문에 콜백 함수로 사용할 때 주의가 필요하다. 특히 이벤트 핸들러나 메서드로 사용될 때 상황에 따라 예기치 못한 이슈가 발생할 수 있다.


위의 정리한 바와 같이 화살표 함수를 사용하기 전에 주의사항을 통해 현재 구현하고자 하는 기능에 적합한지를 고려해봐야 한다. 코드의 간결성을 추구하다보면 무작정 사용할 수 있는데 오히려 기능에 문제가 될 수 있다.

---

마무리

자바스크립트의 꾸준한 발전으로 다양한 기능들이 계속 나오고 있다. 예전에는 일반 함수로 모든 기능들을 구현하고 가독성도 많이 떨어지는 코드를 작성해왔다. 오늘 정리한 화살표 함수처럼 가독성을 높여주는 기능을 통해서 개발 효율을 높여주기도 한다. 화살표 함수는 확실히 장점이 큰 기능이지만 주의사항처럼 정확히 알지 않고 사용한다면 오히려 기능에 독이될 수 있다는 것을 알 수 있었다.
그래도 개인적으로는 화살표 함수가 상당히 편리하고 가독성이 좋아 많이 사용하고 있다.