Arrow Function (Es6)

기존 자바스크립트에서 함수 선언 방식은

function leeS(arg) { blabla~~~} 라는 형식으로 사용해왔다. 이함수는 변수로 선언해도 되고~ 함수명 없이도 선언이 된다. (오브젝트 안이라던지 여러 곳에서)

 

자 애로우 펑션은 뭘까 >  그냥 => 이거 추가된거다.

잠시 배열과 함수를 보자

배열을 하나 선언해주고~ hearts변수에 map함수를 써서 names의 각 배열 원소마다 아이콘을 더해줬다.

map()함수의 역할은 배열에서 각각의 아이템마다 함수를 호출하는 일을 한다.

foreach와 비슷한 역할이다.

다시 설명하자면 names에  모든 요소에 function을 각각 적용시켜주고 적용된 값들로 다시 배열을 만들어 hearts변수에 담아 줬다.

 

다시 풀어 쓰자면 이렇게 풀어 쓸수 있다. 적용시킬 함수를 선언하고 그 함수를 map함수에 넣어서 실행.

그런데 두번째 방식은 잘 쓰지 않는다. 함수가 많아지면 코드가 복잡해지고 가독성도 떨어지게 되니까.. 첫번째 방식을 선호한다

 

여기서 arrow function이 개선되어서 나온다.

이렇게~ 와우 글자가 줄었다.... =>이거 자체가 함수라는 뜻으로 보인다. item을 인자로 갖겠다. 그럼 아이템에 인자가 들어오면

스코프안의 리턴으로 받겠다~ 라는.. (참고할게 하나있는데 저 코드에서 item옆에 인자를 하나 더 넣으면 map 함수에서는 인덱스 값을 가져온다. 참고하자)

 

자 여기서 끝이 아니다... 스코프도 없애고 return도 없앨 수 있다....

😅😅😅😅😅😅😅😅😅😅😅😅😅😅😅😅😅😅😅😅😅

... 이제 자바스크립트를 입문하는 초보이지만.. 다른 언어를 조금이나마 겪었던 사람으로써.. 놀랍다..

기존 방식을 이렇게 무너뜨리고 간소화 했다는게... 참 대단하다...

일단 이런방식은  implicit return이라고 한다. expression에서 어떤 것을 적더라도 무조건 절대적으로 리턴한다는 의미이다.

만약 저상태에서 스코프로 감싸거나 expression에서 벗어나 넘어간다면 아무것도 리턴되지 않는다. 

오직 one expression & no bracket....

 

자 다음 포스팅에서~~