Arrow Function
ES6 문법 이후부터는 자바스크립트에서 함수를 만들 수 있는
문법이 추가되었다.
바로 Arrow Function 이라는 것이다.
원래 function() {}을 쓰면 되는데 이건 왜 만들었냐고 하면
나도 모르겠다. 만든 이유가 있겠죠?
지금부터 Arrow Function이 만들어진 이유와 사용 방법 등을
알아보도록 해보자.
1. 함수의 존재 이유를 알아야 한다
(이게 뭔 X소리야)
이런 반응이 나올 수도 있다.
격한 반응이 나온 유저라면 흥분된 마음을 진정시킨 후
나의 포스팅을 봐주길 바란다.
1.1 함수를 왜 쓸까?
Arrow Function을 공부하며 처음으로 함수를 왜 쓸까에 대해 생각해봤다.
결론적으론 크게 2가지로 구분지을 수 있었다.
- 여러 코드들을 묶어 하나의 기능으로 쓰기 위해
- 입출력 기능을 만들기 위해
Arrow Function은 여기서 2번째, 입출력 기능과 관련이 있는데,
기존에 존재하던 function보다 Arrow Function이
입출력 단계를 직관적으로 보여준다.
-
기본 function의 입출력 단계
-
Arrow Function의 입출력 단계
어떤 입출력 단계가 더 쉽게 다가올 진 모르겠지만
나에겐 Arrow Function의 입출력 단계가 더 쉽게 이해되었다.
2. Arrow Function의 특징
2.1 소괄호, 중괄호 생략 가능
파라미터가 1개라면 소괄호를 생략할 수 있고,
함수의 코드가 1줄이라면 중괄호를 생략할 수 있다.
만약 파라미터가 2개 이상이라면 소괄호는 생략 불가,
함수의 코드가 2줄 이상이라면 중괄호는 생략 불가하다.
2.2 this에서 생기는 차이
함수의 위치에 따라 this값은 달라진다.
(저번에 this 공부하면서 호되게 배웠습죠)
하지만 arrow function은 위치에 상관없이
내부의 this 값을 변화시키지 않는다..?
(아주 지 멋대로인 녀석입니다)
함수 밖에 있는 this를 그대로 가져와서 arrow function에서도
사용한다고 보면 되겠습니다.
예시를 보여드리려 증명해보겠습니다.
객체 뿐만 아니라 이벤트 리스너, 메소드 등에서도 arrow function을
사용하게 되면 this는 window를 가리킵니다.
그러므로 이야~ 화살표 함수 짧으니까 개꿀~ 이라고 막 쓰면 안되겠쥬.
3. 마치며
Arrow function을 공부하기 전엔 기본 함수가
수행하는 기능과 같은 줄 알았습니다.
하지만 용도가 다르다는 것을 깨닫고선 모든 함수에 화살표 함수를
적용할 수 없다는 점.
하지만 간단한 입출력 코드는 이제 화살표 함수를 이용해 표시를
하려고 시도해 볼 수 있겠다는 점이 제가 오늘 배운 내용입니다.
