allow function은 ES6에서 나온 문법이다.
ES6가 무엇인지 잠깐 짚고 넘어가자면,
ES는 ECMA Script의 줄임말로, ECMA Script는 JavaScript를 표준화 시키려고 탄생한 것이다.
현재는, ES10버전까지 나왔고 주로 쓰이는 것은 ES6인데 6은 버전이름이고 ES 2015라고도 불린다 (2015년에 ES6 버전이 최종으로 나왔기 때문이다.)
Allow Function
ES6에서는 함수를 표현하는 방법이 달라졌는데 그것이 Allow function이다.
//ES5
function () {}
//ES6
() =>{}이름이 없는 함수의 기본적인 표현이다. ES6에서는 funcion 키워드가 빠지고 소괄호만 남았다. 그리고 =>(allow)가 추가되었다.
이름이 있는 함수의 형태는 다음과 같다.
//ES5
function getName() {}
//ES5에서 함수를 변수에 저장할 때
const getName = funcion () {}
//ES6
const getName = () => {}
//호출방식은 둘 다 같다.
name();인자를 받을때는 다음과 같다.
//ES5
const getName = function (name) {}
//ES6
const getName = (name) => {}
const getName = name => {}ES6 에선 인자가 하나일 때 소괄호 생략이 가능하다. 인자가 두개일 때는 생략할 수 없다.
인자를 return 할 때 (별표 두개!!)
//ES5
function getName(name) {
return name;
}
//ES6
const getName = (name) => {return name};
const getname = (name) => name;만약 함수가 실행내용이 딱히 없이 return만 한다면 키워드와 중괄호가 생략이 가능하다.
!!그러나!!
중괄호와 return문이 생략될 경우, 화살표 오른쪽에는 리턴 될 '값'만 쓰여야 한다.
마지막 부분을 특히 강조하고 싶은 건, 내가 이 부분을 간과해버려서 1시간 동안 삽질을 했기 때문이다.
내가 마주한 에러는 다음과 같다.
에러가 발생한 원인과 해결방법
에러의 발생 원인은 map method 때문이였다.
map(() => {})과 같은 형태로 arrow function을 사용할 때는 앞서 배운 것 처럼 {} 중괄호 안에 return이 존재해야 한다
또는, 그냥 map method를 사용할 때 map(() => ()) 형태로 함수의 내용을 소괄호에 담아 바로 return되도록 하면 되는 것이다.
나는 이 문제 해결을 위해 한시간 동안 코드를 고치고 고치고 고쳤지만, 결국 해결하지 못했고
결국은 에러메세지 자체를 검색한 끝에 (ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ) 나보다 앞서 이 길을 걸었던 선구자의 도움으로 이 문제를 해결할 수 있었다.
더불어 이 에러를 통해 다시 한 번 arrow function을 확실하게 정리하게 되었는 그런.. 눈물 젖은 이야기.....
