Dev-Tino 4주차(1):: JavaScript 화살표 함수란?

화살표 함수란?

함수 표현식에 대한 간결한 대안. ES6에서 도입되었으며 자바 스크립트에서 사용하던 기존의 함수 선언식이나 함수 표현식에 비해 간결하고 쉽게 함수를 표기하기 위해 고안되었다.

함수를 쓰긴 써야 하는데 내용이 너무나도 짧은 경우가 있다. function 키워드를 넣기에는 아쉽고, 그렇다고 함수로 선언하지 않기에는 좀 내용이 있는 경우이다. ES6과 화살표 함수가 나오기 전까지 우리는 이런 함수에도 기본 함수를 사용하여 코딩했어야 했다. 다음은 그 예시이다::

return x1+x2 한 문장을 위해 우리는 function 키워드를 이용해야 한다. 배보다 배꼽이 크다. 이럴 때 화살표 함수를 사용한다.

화살표 함수의 표현식::

즉, 이것은 function이라는 길고 복잡한 키워드 대신 ‘=>’ 키워드를 이용해 함수를 만들어내는 문법이다. 이는 함수 본연의 기능을 잘 표현하며, 소괄호 생략이 가능하고, 중괄호 안에 return이 한 줄이라면 중괄호와 return도 생략 가능하며 내부에서 this값을 쓸 때 밖에 있던 this 값을 그대로 사용한다 (*함수를 쓸 때 함수가 쓰인 위치에 따라서 내부의 this 값이 바뀌는 문제가 있다.)는 장점이 있다. 다시 한 번 화살표 함수의 특징 및 장점을 정리하자면 다음과 같다.::

1. 매개 변수가 하나일 시 소괄호를 생략할 수 있다. (단, 매개변수가 없을 때에는 생략할 수 없다.)

2. 함수 내부가 단일 표현식(single expression, 간단한 문장이나. 도출된 값이 반환되는 값과 동일한 문장 정도를 생각하면 편할 성 싶다.)인 경우 return 키워드를 생략할 수 있다. 단, return 키워드를 생략할 때에는 반드시 중괄호{}도 생략해야 한다.

3. 중복된 매개변수 이름을 선언할 수 없다.

예시는 다음을 확인하면 편하다.

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

위에서 설명한 문법적 차이 이외에도 화살표 함수와 일반 함수에게는 많은 차이가 존재한다. 크게 세 가지인데, ‘인스턴스를 생성하는 등 생성자 함수로 사용할 수 없으’며 ‘자신만의 this를 가지지 않’고 ‘argument 객체를 가지지 않는다’는 점이다.

1. 화살표 함수는 인스턴스(instance)를 생성할 수 없다.

인스턴스, 다른 말로 인스턴스 객체(Instance Object)는 클래스를 통해 만들어진 객체를 의미한다. 각 인스턴스는 클래스의 고유한 속성과 메소드(객체에 딸린 함수)를 가진다. 생성자를 통해 함수에 인자를 넣듯 속성(세부사항)을 넣을 수 있으나… 화살표 함수는 이것이 불가능하다. 화살표 함수는 non-constructor(생성자 함수가 아닌 일반적인 함수, 이러한 함수들은 객체를 인스턴스화하거나 새로운 객체를 생성하는 목적이 아닌 다른 기능을 수행한다.)이기 때문이다. 그렇기 때문에 prototype 속성(*객체 생성자 함수에 의해 생성되는 객체들이 공유하는, 속성과 메소드를 저장하는 특수 객체.)도 없고 생성도 하지 않는다.

2. 화살표 함수는 자신만의 this를 가지지 않는다.

addEventListener를 사용하여 이벤트를 처리할 때 콜백 함수 내에서의 this는 해당 이벤트가 발생한 DOM 요소를 가리킨다. 이 때, 일반 함수를 사용할 때와 화살표 함수를 사용하여 이벤트 핸들러를 정의하면 this를 가리키는 대상이 달라진다. 하단의 예시를 보자.

다음은 addEventListener를 사용하는 예시이다. 첫 번째 함수(화살표 함수 사용 x)의 경우 this가 myButton 요소를 가리킨다. this.Content는 버튼의 텍스트인 “Click Me”를 출력하고 말이다.

그러나 두 번째 이벤트 핸들러의 경우, 버튼 클릭시 "Clicked using arrow function. This text: undefined" 가 출력된다. 화살표 함수의 his가 전역 컨텍스트를 가리키기 때문이다. 따라서 이벤트 핸들러 내에서 this가 필요한 경우에는 일반 함수를 사용하는 것이 적합하다. 화살표 함수는 주로 this를 사용하지 않거나, 외부 스코프에서의 this를 그대로 사용할 때 유용하다.

3. 화살표 함수는 arguments 객체를 가지지 않는다.

argumnet 객체는 함수 내에서 인수에 접근하는 데에 사용된다. 일반 함수에서는 이 객체를 사용할 수 있으나 화살표 함수에서는 사용할 수 없다. 이 때 argument 객체란 ‘함수에 전달된 인수에 해당하는 Array 형태의 객체’이다. (Array 객체란 arguments가 length 속성과 map과 같은 내장 메소드를 가지고 있지 않다는 뜻이다.)

필요에 따라서는 적절히 화살표 함수를 이용하여 좋은 코드를 만들자.

[참고 자료]

-https://ko.javascript.info/arrow-functions-basics

-https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions

-https://codingeverybody.kr/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%ED%99%94%EC%82%B4%ED%91%9C-%ED%95%A8%EC%88%98%EC%9D%98-%EC%9D%B4%ED%95%B4%EC%99%80-%EC%82%AC%EC%9A%A9%EB%B2%95/

-https://velog.io/@boyeon_jeong/non-constructor-%ED%95%A8%EC%88%98

-https://velog.io/@pds0309/Javascript-Prototype-%EA%B8%B0%EB%B3%B8-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0 //prototype 기본 이해하기

-https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/arguments

//argument 객체