React 부록 async, await, arrow function(2편)

이무진을 닮은 최민규를 닮은 이무진

 

오늘은 arrow function에 대해서 이해해보려 한다. 대학생활을 하며 c, c++, python 등 여러 프로그래밍 언어들을 배우면서

함수 선언은 function 민규() ~~ 이런식으로 선언하다가 강의를 들으면서 arrow function을 애용하는 것을 많이 봤다.

실제로 지금은 arrow function을 쓰는 것이 더 간단하고, 가독성도 좋게 느껴질 정도로 익숙해졌지만, 

구조라던가 왜 여기선 이게 쓰이는지 저기선 저게 쓰이는지  정확히 알 필요가 있음을 느껴 정리를 한다.

 

Arrow function = () = >  { }

기존의 함수와는 다른 방법으로 함수를 선언한다. 따라오는 장점들, 단점들, 제한사항에 대하여 알아보자.

 

1. 보통 함수 선언 방법 - 이거 말고도 다양한 방법이 있다.

function 민규함수(){
	console.log('반가워')
    }
    
    //또는
    
var 민규함수 = function(){
	console.log('반가워')
    }

 

2.arrow function 사용시

var 민규함수 = () =>{
	console.log("놀고싶어")
    }

보통 함수 선언 방식에서 2번째 방식과 유사한 모습을 볼 수 있다.

 

구조를 보기 전 왜 굳이 arrow function을 쓰는가에 대하여 알아보자.

 

1. function의 순기능 작동원리를 잘 보여주고 있다.

function, 함수는 특정 기능을 하는 코드를 function으로 묶어 나중에 재사용을 하기 위해, 그리고사용자에게 값을 입력받아 함수 내에서 처리해서 결괏값을 출력해줄 때 사용한다. 이 기능을 arrow function에서는 직관적으로  보여주고 있다. 위의 예시보다 함수 같은 함수를 하나 들고 와 보자.

 

const magicBox = (x) =>{
	return x * 5
    }
    
console.log(magicBox(4));
console.log(magicBox(20));

넣은 값을 5배로 만들어주는 magicBox가 있다. const뒤부터 코드를 처음 보는 입장에서 본다 생각하면,

magicBox는, x를 가져와서,  x*5한 값을 반환해요(return을 설명해준다 치고ㅎㅎ) 이해도가 높다는 장점이 있다.

 

 

2. 소괄호 생략 가능 === 코드 단축 가능

 

매개변수가 하나라면 소괄호는 생략 가능하다. 위의 magicBox의 함수에서 (x)가 아닌 x로 표현 가능하다는 이야기다.아, 반대로 매개변수가 없을 시에는 괄호는 필수이다.

const magicBox = x => x * 5  
console.log(magicBox(4));
console.log(magicBox(20));

 

짠~ 무지 간단해졌다. 다만 이런 장점에도 arrowfunction에는 단점이 존재한다.

 

1.this, super에 대한 바인딩이 없음 + method로 사용 불가

ㄴ> this에 대한 설명 이해 안 감ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 역시 갈길이 멀다. 또르르...

 

2. new연산자, prototype속성 불가 등등

 

이러한 이유들로 완전한 함수 function 기능 자체를 대체 100%라고 생각하지 말고가능한 범주 내에서 유용하게 사용하도록 하자.