Arrow function은 function을 대체하는 신문법이 아님

ES6 문법 이후부터는
자바스크립트에서 함수를 만들 수 있는 문법이 새롭게 하나 등장했습니다. 

 

arrow function 이라는 문법인데 이걸 이용하시면 함수를 만들 수 있습니다. 

보통 함수 만드는 방법.

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

지금부터 알아보도록 합시다. 

함수 만들 수 있는 또 다른 방법이 몇 가지 있음. 

저런식으로 함수를 만들어봄.

= var 함수

1번이랑 2번이랑 똑같은 의미라고 보면 된다.

함수() 라고 쓰면 함수가 실행될 것. 

---

Arrow function 문법 

자바스크립트에선 함수를 이런 식으로 만들어서 사용합니다.

(1)
function 예쁜함수(){
  //어쩌구
}

(2)
var 예쁜함수 = function(){
  //어쩌구
}

함수는 (1) 또는 (2)처럼 만들고

예쁜함수(); 이렇게 함수를 사용합니다. 

(function 키워드로 시작하는것 말고도 (2)번처럼 변수에다가 함수를 등호=로 집어넣어서 함수를 만들 수 있습니다. )

 

근데 ES6 신문법을 사용하면 함수를 이렇게 만들 수도 있습니다. 

function 이라는 키워드 대신에 

=> 써서 만들어낼 수 있음. 

 

똑같이 함수(); 써서 실행도 시킬 수 있다.

var 예쁜함수 = () => {
  //어쩌구
}

function이라는 길고 복잡한 키워드 대신에

=> 이런 예쁜 화살표를 사용해서 함수를 만들어내는 신문법입니다. 

그냥 그런게 있구나 하고 외워가시면 되겠습니다 .

근데 외우기 전에 이 문법의 용도를 아는게 중요합니다. 

---

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

혹시 프로그래밍할 때 function 문법은 왜 사용하는지 아십니까. 

책이랑 다른 강의에서는 이런거 설명 잘 안해주죠?

모른다면 지금 당장 외우시길 바랍니다. 

 

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

2. 입출력기능을 만들 때 

이럴 때 함수를 쓰셔야 합니다.

그래야 좋은 프로그래머가 될 수 있지요.  

 

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

---

입출력기능이 뭔소리에요?

함수가 뭔지부터 알아봅시다.

이렇게 입출력 기능을 만들어봐줌. 

그리고 콘솔창에

함수 (5) 해서 함수 출력해준다. 

그러면 15 나오는거 확인됨.

화살표 함수를 쓰게 되면

좀 더 직관적으로 파악이 된다. 

 

a 를 넣으면 5가 전달돼서 15 

소괄호를 생략할 수도 있다.

 언제? : 파라미터가 1개밖에 없을 때. 

이렇게 () 생략해서 사용해줌. 

return 이렇게 1줄 밖에 없으면

중괄호 또한 생략 가능.

아주 직관적으로 보이게 됨 .

만약 파라미터가 2개 이상 있을 경우 

: a, b

 소괄호 무조건 써주기. 

중괄호 생략 가능

array 에다가 반복문 돌린 경우

( forEach 안에는 콜백함수 들어감)

이렇게 반복문 생성.

데이터 개수 4개니까 4번 반복

a = 배열 안에있는 하나하나의 데이터 

즉, 1 / 2 / 3 / 4

forEach 안에 있는 fucntion 도 함수기 때문에

화살표 함수로 축약 가능. 

소괄호도 제거해줄 수 있음.

이것도 마찬가지로

한 줄 밖에 없으면

중괄호 제거해줄 수 있음. 

직관적으로 보이게 된다. 

이벤트 리스너인 경우 

여기서도 function 있는 거 확인됨 

얘도 축약가능.

function 지우고 저렇게 써도 될 듯. 

근데 화살표 함수는 안에서 this 값을 쓸 때 

문제가 될 수 있음. 

this 값을 새로 재정의 해주지 않기 때문. 

 

상위에 있던 this 값을 받아서 갖다 쓰게 됨.

여기서 this 값을 출력해보면? 

화살표함수에서는 window 가 된다. 

저기 있는 this 랑 똑같은 의미가 됨. 

그냥 화살표 함수 써주고 싶으면

저렇게 e.currentTarget 으로 정의해주고 쓰면 됨. 

- this 를 굳이 안쓰면 됨. 

오브젝트 안에 함수가 있는 경우

function 대신에

화살표 함수를 썻을 경우 

오브젝트.함수() 이렇게 불러올 수 있었음. 

여기서도 this 값이 이상했다. 

화살표 함수니까

this 를 사용했을 경우 this 값 재정의가 안됨.

바깥에 있던 this 값을 저기다가 적용시켜버림 (window) 

확인해보기 

= window 나옴. 

 

---

함수는 수학에서 온 개념입니다. 

원래 함수는 뭐 숫자를 집어넣으면 뭔가 다른 숫자를 배출하는 블랙박스같은 역할을 합니다. 

위 그림처럼 input을 집어넣으면 output을 출력해주는 박스가 바로 함수입니다.

 

실은 함수개념은 중학교 수학시간에 배웁니다. 

문제) f(x) = x + 2 입니다. 그럼 f(2)는 뭘까요?

답은 4입니다.

 

f(x) 이게 함수입니다. 

아까 박스처럼 그림으로 표현하자면 이렇겠네요. 

 

 

위에선 x를 집어넣으면 x + 2 를 출력해주는 함수를 만들어 쓰고 있던 것입니다.

 

그럼 프로그래밍에선 어떨까요? 2를 집어넣으면 x + 2를 출력해주는 함수를 어떻게 만들어쓰죠?

function 더해주세요(x){
  return x + 2
}

이런 문법을 이용해서 만들어 사용합니다. 

함수의 소괄호안에는 input역할을 하는 파라미터가 있고

함수내에 return이라는 것은 output역할을 하는 키워드입니다. 

그럼 이제 더해주세요(2); 이렇게 사용하시면 4가 이 자리에 남게 되는 것이고요.

소괄호에 뭔가 집어넣으면 return을 이용해 뭔가 뱉어내는 것 

이게 바로 함수의 입출력 기능입니다. 

[collapse]

 

그래서 arrow function을 쓰시면 입출력기능이 쉽고 예쁘게 표현되지 않습니까.

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

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

숫자를 넣으면 2배를 해주는 함수를 하나 만들었습니다. 

함수 표현식 자체가 x가 x * 2가 됩니다~ 라고 말하는 것 같죠?

매우 이해하기 쉬워집니다. 

이게 장점1입니다. 

---

왜쓰냐면 2. 소괄호 생략이 가능합니다.  

 

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

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

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

이렇게 해도 된다는 소리입니다. 

---

왜쓰냐면 3. 중괄호 생략이 가능합니다.  

 

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

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

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

생략하니 이제 x가 어떻게 변하는 함수인지 입출력기능이 바로 한눈에 들어오는군요.

원래 {} 중괄호 끝날 땐 세미콜론 안쳐도 잘 되는데

생략하실 땐 매너있게 세미콜론은 적어줍시다.  

---

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

 

여러분 함수를 쓸 때.. 함수가 쓰인 위치에 따라서 내부의 this값이 변한다고 저번시간에 배웠습니다. 

근데 arrow function은 어디서 쓰든간에 내부의 this 값을 변화시키지 않습니다. 

그러니까 바깥에 있던 this의 의미를 그대로 내부에서도 사용하는 함수가 바로 arrow function 이라는 함수입니다. 

(이게 장점 4이자 arrow function을 쓰는 핵심 이유입니다.) 

 

 

예시를 봅시다. 

var 오브젝트1 = {
  함수 : function(){ console.log(this) }
}

오브젝트1.함수()

위의 코드는 실행하면 무슨 결과가 나올까요? 

this값을 출력하라고 하네요. this가 뭘까요?

저번시간에 한 것이기 때문에 아시겠지요 (아마?)

함수()를 가지고 있는 오브젝트인 오브젝트1이 콘솔창에 출력될 것입니다. 

 

그럼 이건요? 

var 오브젝트1 = {
  함수 : () => { console.log(this) }
}

오브젝트1.함수()

위의 코드는 실행하면 무슨 결과가 나올까요? 

안알랴줌

window라는게 출력됩니다. 

여기선 this가 window네요. 

 

왜 함수의 주인인 오브젝트1이 출력되지 않냐면..

this값은 함수를 만나면 항상 변하는데 arrow function 안에서는 변하지 않고 밖에 있던 this를 그대로 씁니다.

(오브젝트 밖에 있던 this는 window입니다.)  

[collapse]

 

왜냐면 arrow function은 외부에 있던 this를 그대로 내부로 가져와서 사용하는 함수기 때문입니다. 

항상 장점은 아닙니다. 내가 예측하던 this값과 달라질 수도 있으니 단점이 될 수 있습니다.  

끝입니다. 더 알것도 없어요. 

이제 개발하실 때 심심하시면 arrow function 열심히 사용하시길 바랍니다. 

 

하지만 this의 뜻이 달라지는 것 처럼 일반 function과 용도가 완전 같지 않기 때문에

일반 function을 항상 대체할 수 있는 문법이 아닙니다. 그것만 주의합시다.