[JS] function 대신 arrow function(화살표 함수) 사용하는 이유

김zunyange·2023년 1월 26일

자바스크립트 화살표 함수

JavaScript

목록 보기

11/17

ES6 문법 이후부터는 자바스크립트에서 함수를 만들 수 있는 문법이 새롭게 하나 등장했습니다.
arrow function 이라는 문법인데 이걸 이용하시면 함수를 만들 수 있습니다.

그냥 기존 function () {} 이게 있는데 왜 새로 추가했을까요?

기본 함수의 식은 두 가지로 사용할 수 있습니다.

(1)
function 함수이름() {
  //어쩌구
}

(2)
var 함수이름 = function() {
  //어쩌구
}

ES6 신문법인 화살표 함수를 사용하면 이렇게 만들 수도 있습니다.

var 함수이름 = () => {
  //어쩌구
}

function이라는 길고 복잡한 키워드 대신에
=> 이런 화살표를 사용해서 함수를 만들어내는 신문법입니다.
그냥 그런게 있구나 하고 외우면 되지만, 외우기 전에 이 문법의 용도를 아는게 중요합니다.

1. 함수 본연의 기능을 아주 잘 표현하는 문법입니다.

프로그래밍할 때 function 문법은 왜 사용할까요?
모른다면 지금 당장 외우시길 바랍니다.

여러가지 기능을 하는 코드를 한 단어로 묶고 싶을 때 (그리고 나중에 재사용할 때)
입출력기능을 만들 때

이럴 때 함수를 쓰셔야 합니다. 그래야 좋은 프로그래머가 될 수 있습니다.

그리고 arrow function을 사용하면 함수 본연의 입출력기능을 아주 직관적으로 잘 표현해줍니다. 입출력기능이 쉽고 예쁘게 표현된다는 의미입니다.

var 두배만들기 = (x) => { return x * 2 }

console.log( 두배만들기(4) ); // 8
console.log( 두배만들기(8) ); // 16

숫자를 넣으면 2배를 해주는 함수를 하나 만들었습니다.
함수 표현식 자체가 x가 x * 2가 됩니다~ 라고 말하는 것 같죠?
매우 이해하기 쉬워집니다.

이게 장점1입니다.

2. 소괄호 생략이 가능합니다.

파라미터가 하나라면 소괄호를 생략가능합니다.

var 두배만들기 = x => { return x * 2 }

console.log( 두배만들기(4) ); // 8
console.log( 두배만들기(8) ); // 16

이렇게 작성을 해도 같다는 것입니다.

3. 중괄호 생략이 가능합니다.

중괄호 안에 return이 한줄 뿐이라면 중괄호와 return도 생략가능합니다.

var 두배만들기 = x => x * 2 ;

console.log( 두배만들기(4) ); // 8
console.log( 두배만들기(8) ); // 16

생략하니 이제 x가 어떻게 변하는 함수인지 입출력기능이 바로 한눈에 들어옵니다.
원래 {} 중괄호 끝날 땐 세미콜론 안쳐도 잘 되는데 생략할 땐 매너있게 세미콜론은 적어줍시다.

4. 내부에서 this값을 쓸 때 밖에 있던 this값을 그대로 사용합니다.

함수를 쓸 때 함수가 쓰인 위치에 따라서 내부의 this값이 변한다고 저번시간에 배웠습니다.
근데 arrow function은 어디서 쓰든간에 내부의 this 값을 변화시키지 않습니다.
그러니까 바깥에 있던 this의 의미를 그대로 내부에서도 사용하는 함수가 바로 arrow function 이라는 함수입니다.
(이게 장점 4이자 arrow function을 쓰는 핵심 이유입니다.)

4-1. 일반 함수의 this

function 키워드로 생성한 일반 함수와 화살표 함수의 가장 큰 차이점은 this입니다.

함수 호출 방식에 의해 결정되는 this

자바스크립트의 경우 함수 호출 방식에 의해 this에 바인딩할 어떤 객체가 동적으로 결정됩니다. 다시 말해, 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되는 것이 아니고, 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정됩니다.

콜백 함수 내부의 this는 전역 객체 window를 가리킵니다.