개요
저번 글은 전체적으로 어떻게 코드를 짤 지에 대한 고민과 정리에 관한 글이었다.
이번엔 실제로 코드를 짜려다보니 드는 생각들을 작성해보려고 한다.
arrow function vs function
나는 코드를 짤 때 arrow function을 더 즐겨쓴다. 그런데 이번엔 내 취향대로 작성하는 게 아니라 어떤 게 더 좋은 코드인가를 생각하면서 짜야하기 때문에 함수를 만드는 방법부터 고민이 되기 시작했다...
평소에 생각 좀 해보지
아무튼 그래서 이참에 두 개의 차이점이 무엇인지, 무엇을 사용하는 게 현재 나에게 더 좋은 코드일지에 대해서 적어보려고 한다.
작성 방식
우선 둘의 작성 방식은 다음과 같다.
1. function
// 1번 방식
function hi(){
~~~
}
// 2번 방식
var hi = function(){
~~~
}2. arrow function
var hi = () => {
~~~
}function이 기존에 있던 방식이라면 arrow function은 ES6 문법 이후부터 자바스크립트에서 함수를 만들 수 있는 문법이다.
언뜻 보기엔 arrow function이 읽기 편한 것 같기도 하고, 기존의 function 방식이 명확하게 함수라고 나타내고 있기 때문에 처음 보는 사람이 더 편할 수도 있을 것 같다는 생각도 든다.
arrow function이 기존에 비해 가지는 장점, 단점이 무엇이 있는지 더 자세히 알아보자.
arrow function (화살표 함수)
장점
- 함수 본연의 입출력 기능을 잘 나타낸다.
짧은 함수의 경우 더 직관적으로 잘 나타난다. 다음 예시를 보자
//1
function say_hi(){
return "hi"
}
//2
var say_hi = () => {return "hi"}식이 훨씬 간결해보이고 보기 쉽다.
- 소괄호와 중괄호의 생략이 가능하다.
파라미터가 하나인 경우 소괄호의 생략이 가능하다.
또한 return이 한줄이라면 중괄호와 return 도 생략이 가능하다.
//example
var say_hi = name => name :+ " hi";
- this의 차이
this에서 기존의 function과 arrow function의 차이가 크다고 한다.
기존 함수의 this는 어디서 호출하느냐에 따라 바인딩할 객체가 동적으로 할당된다.
즉, 함수 안에서 선언할 때 정적으로 바인딩할 객체가 할당되는 것이 아니라 함수가 호출되는 위치에 따라 this에 바인딩할 객체가 동적으로 할당된다는 것이다.
반면,
arrow 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정된다. 동적으로 결정되는 일반 함수와는 달리 화살표 함수의 this 언제나 상위 스코프의 this를 가리킨다.
단점
- arrow function으로 메소드를 정의하는 것은 좋지 않다.
만약 메소드 내부에서 this를 사용한다면 그때 메소드를 선언한 객체가 아니라 상위 스코프를 가리키기 때문에 사용하지 않는 것이 좋다.
- 익명 함수로만 사용 가능
arrow function은 익명함수로만 사용이 가능하기 때문에 호이스팅이 적용되지 않는다.
익명함수란?
+추가
에어비앤비의 코드컨벤션을 읽어보던 중, 다음과 같은 파트를 발견했다.
나는 호이스팅이 적용되지 않는다는 점을 단점으로 뽑았지만, 위의 사진을 봤을 때 큰 파일에서는 function이 호이스팅이 된다는 점이 오히려 독이 될 수 있다는 것이다.
생각 못한 점이었는데 깨닫게 되었다 ... 코드컨벤션 파일이 너무 길어서 대충 읽을까 생각했는데 하나하나 읽어보길 잘한 것 같다!
정리
지금까지 정리한 걸로 봤을 때 arrow function은 작성이 간결하다는 것이 큰 장점인 것 같다. 그리고 나는 어차피 파일 분리를 하고 import해서 사용할 예정이고 this를 사용하진 않을 것 같기 때문에 단점들이 느껴지지 않는다.
내가 지금까지 arrow function을 사용한 이유도 코드가 더 간결하고 깔끔해보이기 때문이었는데 장점, 단점을 다 살펴본 뒤에도 arrow function을 사용해도 될 것 같다는 생각이 든다.
사실 지금까지 파일 분리를 할 때는 function을, main 파일 안에서 함수를 만들 때는 arrow function을 쓰는 습관이 있었는데 한 번 다른 선배가 함수마다 다른 방식을 사용하는 이유가 뭐냐고 물은 적이 있다.
일관적이게 사용하는 것이 좋다고 추천을 해줬기 때문에 ... 이번에는 arrow function으로 계속 사용을 해보도록 하겠다 !!
추가
아니 진짜 바보같은 글이었다 !!!!!!!!!!
컨벤션에 언제 arrow function을 쓰는지, 언제 그냥 함수를 쓰는지 나와있었다 ㅠㅠㅠㅠㅠㅠ
그래도 언젠가는 꼭 공부했어야하는 내용이기 때문에 ... 그냥 공부했다고 생각하자 흑흑
