자꾸 헷갈리는 arrow function

임채현·2022년 1월 4일
0

배경

arrow function에 대해 알아보기 전에 arrow function이 나오게 된 배경부터 알아보자
JavaScript의 역사가 길어지다보니 문법의 보완을 위해 문법을 확장시키고 브라우저는 특정 버전의 기능별로 지원할 수 있도록 ES(ECMA Script)가 꾸준히 업데이트되고 있다.
여기서 ECMA란 European Computer Manufacturers Association으로 자바스크립트를 표준화하기 위해 ES를 만든 단체이다.
여기서 중요한 것은 자바스크립트는 언어이고 ES는 스펙이다.
ES는 갤럭시S2에서 S2를 담당하는 느낌이라 생각하면 쉽다. ES를 언어와 혼동하지 말자.
ES10 버전까지 나왔지만 현재 가장 많이 쓰이는 것은 ES6이다.

ES6가 나오면서 다음과 같은 문제점이 해결되었다는데..

  • 호이스팅이 사라진 것 같은 효과
  • 함수 단위 스코프에서 블록 단위 스코프로 변경
  • this를 동적으로 바인딩하지 않는 애로우 펑션
  • 모듈화 지원
  • 콜백 지옥의 구원자, Promise
  • (ES6) ajax 위주의 promise 실습
  • (ES6) Promise에 파라미터를 넘겨서 사용해보자
  • Default, Rest 파라미터
  • 해체 할당, Spread 연산자
  • 템플릿 리터럴
  • 클래스

몇개는 배우고 코드도 적어봤지만 아직 못 다뤄본것도 많다.
언젠가는 다 다룰거라 생각하며 일단 넘어가자!

arrow function

오늘 다뤄볼 arrow function도 위에서 보다시피 ES6에서 새로 생긴 문법이다.

호출할 때는 둘 다 같지만 ES6는 getName이라는 변수에 저장했다.
사실 ES5일때도 변수에 저장이 가능하다. 변수를 선언하고 function() {}을 할당하면 그만이다.

arrow function의 핵심은 function 키워드를 없앴고 그대신 파라미터를 넣는 () 옆에 화살표가 function의 기능을 대신한다는 것이다.

  • 인자가 하나일 때는 소괄호도 생략이 가능하다. 두개 이상부터는 불가능하다.

  • 함수가 실행내용이 없이 return만 한다면 return키워드와 중괄호가 생략이 가능하다.

    근데 이런 단순한 함수를 적는 경우는 솔직히 코드를 쓰면서 거의 없을 경우라 쓸 일이 많이 없을것 같다.

나의 생각

arrow function이 헷갈리는 이유는 내가 js를 배우기전에 python을 배우고 와서 그런것 같다. python같은 경우 반드시 def이라는 키워드를 써서 함수를 생성해야하기 때문에 나도 ES5의 방식인 function을 앞에 명시하여 함수를 생성하려다보니 => 가 익숙해지기 어렵다.
또한 매개변수가 하나이면 괄호가 생략되어 갑자기 뭔가 헷갈리는 것도 있는거 같고....(근데 괄호는 붙여도 전혀 상관이 없어서 나는 그냥 붙인다.)

사실 ES5의 function() {}을 써서 사용하는것도 문제가 없는거 같지만 =>가 생략성이나 간결성이 더 좋은건 사실이라 ES6에 적응된 개발자들은 상당히 많이 쓰실거 같다. 그들과의 코드 협업에 있어 유지보수성을 위해 arrow function을 자주 써 더 익숙해질 필요가 있는거 같다.

profile
열심히 살고 싶은 임채현입니다.

0개의 댓글