[JS] 자바스크립트 함수 : 화살표 함수

이전 포스팅에서 함수 선언식과 표현식에 대해 알아봤다!

함수 표현식을 이용해서 함수를 보다 가독성 있게 표현할 수 있었다.

하지만, 화살표 함수를 사용하면 표현식을 좀 더 간결하게 표현할 수 있다. 🤔

(그럼 선언식은 ?????)

 

---

이전 포스팅에서 알아본 함수 표현식을 다시 한번 확인해보자.

함수 선언식과 비교해보면 음 나름 가독성 있는 ? 코드처럼 보인다.

 

//함수 선언식
//function 키워드로 단독으로 함수를 선언한 것!
function sum (a, b) { 
    return a + b;
}; 

//함수 표현식
//변수를 함수에 할당한 것
const sum = function(a, b) { 
    return a + b;
};

 

 

화살표 함수 ? 익명  함수 ? 

 

화살표 함수는 ES6에 새로 추가된 유용한 기능으로

function 키워드 없이도 함수를 만들 수 있다! (기능은 동일!)

 

함수 선언식과 표현식을 하나씩 화살표 함수로 바꿔보자.

 

//화살표 함수로 바꿈!
//함수 선언식
(a, b) => { 
    return a + b;
}; 

//함수 표현식
const sum = (a, b) => { 
    return a + b;
};

 

뭔가 이상하지 않은가?!!

바로 일반 함수 선언식의 함수 이름

즉, 식별자가 사라졌다 ㅎㅎㅎㅎ

이름이 없으면 우리가 함수를 어떻게 호출할 수 있을까...!!!

 

화살표 함수는 익명 함수로만 사용이 가능하다.

그렇기 때문에 호출하기 위해서는 함수 표현식으로 화살표 함수를 작성해야 한다 ⭐️⭐️⭐️

 

조금 더 생략해보자.

화살표 함수에서는 중괄호나 return 도 조건에 따라 생략할 수 있다.

(오늘은 가볍게 알아보기 위해 조건은 생략하겠다!!!!!! 🤓)

 

//함수 표현식 
const sum = function(a, b) { 
    return a + b;
};

//중괄호 + 리턴 생략
const sum = (a, b) => a + b;

 

처음의 함수 표현식과 비교하면 훨씬 간결하고 가독성이 좋아졌다!

여기서 인자를 하나만 받게되면 괄호까지도 생략할 수 있다.

정말이지 화살표 함수는 노동력을 덜어주는 기능이다!!!!!

 

//함수 표현식 
const double = function(a) { 
    return a * 2;
};

//괄호 + 중괄호 + 리턴 생략
const double = a => a * 2;

//매개 변수가 없으면 ? 그냥 이렇게!
const nothing = () => console.log("Is there no one,,,?");

 

 

+)

리턴문의 생략 이야기가 나와서 최근에 러닝 리액트에서 알게 된

화살표 함수의 객체 리턴에 대해 잠깐 기록하자면,

 

만약 이름과 성을 받아서 객체로 반환하는 함수를 작성하고 싶다고 가정하자.

이때 위의 코드처럼 리턴문을 생략하고 작성하면 되는 것일까??????

 

객체 리턴 ?

 

객체를 반환하기 위한 함수 표현식의 화살표 함수는 아래와 같이 작성한다.

(만약 저기서 리턴문 뒤의 중괄호가 없다면 SyntaxError가 발생할 테니 주의하자! 객체이니까)

//이름과 성을 받아 객체로 반환하는 함수
const person = (fName, lName) => {
  return {
    first: fName,
    last: lName
  };
};

 

 

리턴만 생략해보자.

const person = (fName, lName) => {{ ... }};

얜 딱 봐도 에러를 부르는 외모같다.

 

const person = (fName, lName) => {
  {
    first: fName,
    last: lName
  };
};

 

그렇다면 어떻게 표현할까?

조금 다르게 객체를 반환하려는 함수는 리턴을 생략하게 되면 꼭 괄호로 둘러싸야한다. 

이렇게 !! 👇🏻 언젠가 활용할 일이 있을 것이다,,,! 

 

const person = (fName, lName) => ({
  first: fName,
  last: lName
});

 

---

⚠️ 아래 내용은 모두 개인적인 참고 / 기록을 위한 용도입니다. 참고해주시고 편안하게 봐주세요 :)  ⚠️
***    혹시라도 잘못된 정보가 있다면  언제든지 알려주시면 감사하겠습니다  !    ***