TIL.14) Arrow function_JavaScript

🚨 Caution 🚨

해당 내용은 wecode에서 학습하며 정리한 내용입니다.
필자가 이해한 부분을 바탕으로 작성한 글이기 때문에 실제 내용들과 다소 차이가 있을 수 있습니다.
이 점 유의해서 읽어 주시면 감사하겠습니다.

내용에 대한 친절한 피드백은 언제나 감사합니다.

💡 function

그동안 공부를 하면서 function()의 기능을 구현하는 방법으로는

function getNum(a,b) {
	return a + b;
}

이런 식으로 구현한다고 배워왔다 (ES5 기준)
물론 이 방법이 틀린 방법이라고 할 수 없지만,
최근 ES6 에서 사용하는 방식은 지금 방식과는 조금 다른 점이 있다.

그 방법의 이름은 Arrow function 인데,
많은 사람들이 이용하는 만큼 이 방법에 대해 잘 알고 익숙해져야
나중에 다른 사람들이 사용한 코드를 볼 때, 당황하지 않고 버벅이지 않을 수 있겠다.

💡 Arrow function

arrow 라는 이름에 맞게 화살표 모양 (=>)의 기호가 추가가 된 형식이다.
기존 방법과 비교를 해서 확인해 보자면

// 기존 function
function() {}

// arrow function
() => {}

눈으로 보기만 해도 굉장히 간소화되었다는 것을 볼 수 있다.
function 이라는 글자가 없어진 대신 => 로 대체가 되어있는 것을 볼 수 있다.

▪️ 이름이 있는 function

// 기존 function
function abc() {}

// arrow function
const abc = () => {}

이름이 있는 function 에서는 더 큰 변화를 보여줍니다.
일단 const를 통해서 기능의 이름을 정해주고
arrow function 을 구현해 주는 방식입니다.

▪️ 인자가 있는 function

// 기존 function
function abc(x) {}

// arrow function
const abc = (x) => {}
const abc = x => {}

const abc = (x,y) => {}

기능에 인자가 들어가 있는 상황에서는 소괄호를 생략해 줄수도 있다.
물론 인자가 하나만 있는 상황에서만 생략이 가능하다.
두개 이상의 인자가 있다면 반드시 소괄호를 사용해줘야 하는 부분 알아둬야겠다.

▪️ function 에서 return 값을 낼 때

// 기존 function
function abc(x) {
	return x+1
}

// arrow function
const abc = x => x+1

이번에는 기능 내부에서 return값만 받았을 때 변화를 보면,
별다른 수식 없이 return 값을 받을 때,
중괄호 ({})도 생략해 줄 수 있다고 한다.
극한의 생략이 가능한 arrow function 이다...

그렇다면 두 방법에 출력값이 문제없이 잘 노출이 되는지
한번 확인해 보도록 하겠다.

기존 방법과 arrow function 모두 동일한 결과를 낸 것을 볼 수 있다.
각 방법이 어떤게 옳고 그르다는 건 아니지만
많은 개발자들이 사용하는 방법인 만큼 해당 방법에 익숙해질수 있어야 겠다.

요약하자면..

1. () => {}
2. const a = () => {}
3. const a = data => {}
4. const a = data => data