JavaScript _tip / 화살표 함수 두려워하지 말자!

화살표 함수

화살표 함수는 코딩을 이제 막 시작한 사람들에게 매우 난해하고 어렵게 생각 할 수 있습니다.

저 또한 너무 어려웠습니다... 하지만 개념을 알고 조금만 익숙해지면 엄청 편리한 기능이라는 것을 알수 있습니다.

 

이번 블로깅은 화살표 함수에 겁이 많은 사람들을 위해 기본 개념을 정리해보도록 하겠습니다.

 

화살표 함수는 왜 사용하나요 ?

화살표함수는 일반함수와 달리 기본적인 로직을 축약형으로 나타낼수 있어 직관적입니다. 또한 간단한 코드라면 불필요한 코드를 줄여 가독성도 좋습니다.

 

일반함수와 화살표함수의 구조 차이는 ?

// 일반함수
const addNum = function (x) {
  return x + 5
}
console.log(addNum(5)) // 10
 
// 화살표 함수
const addNumArrow = (x) => {
return x+5
}
console.log(addNumArrow(5)) // 10
 

 

위에 있는 예시와 같이 funciton을 생략하고 매개변수 옆에 => 만 붙여주면 됩니다.  여기서 더 줄일수 있습니다. 천천히!!

 

// 일반함수
const addNum = function (x) {
  return x + 5
}
console.log(addNum(5)) // 10
 
// 화살표 함수
const addNumArrow = x => x+5
 
console.log(addNumArrow(5)) // 10
 

 

차이점이 보이나요 ?

Point.1 매개변수가 하나일때는 소괄호() 생략이 가능합니다. 하지만 2개 이상이면 소괄호를 씁시다!

Point.2 실행문(블록문) {}을 생략하면 return을 쓸 필요가 없습니다. 

 

화살표함수를 사용할때 주의 할점!

// 화살표 함수
const addNumArrow = x => x+5
console.log(addNumArrow(5)) // 10
 
const strArrow = x => 'joyCoding'
console.log(strArrow())
 
const numArrow = x => 123
console.log(numArrow()) // 123
 
const arrArrow = (x,y) => [1,2,3]
console.log(arrArrow()) // [1,2,3]
 
// 주의 할점 (객체를 사용할때)
 
//잘못된 예시
const objArrow = x => {joy:'coding'}
console.log(objArrow()) // undefined
 
//올바른 예시
const objArrow = x => ({joy:'coding'})
console.log(objArrow()) // {joy: "coding"}

 

Point.1 화살표 함수를 사용하려면 무조건 함수 표현식으로 사용해야 됩니다.

Point.2 객체를 사용하려면 소괄호() 사용해야 됩니다.

 

 

그외 화살표 함수를 사용하는 용도가 더 있습니다!!! 하지만 위와 같은 개념을 이해하고 화살표 함수에 익숙해 지면 고차함수나 구조분해 할당 등 다양하게 활용해보시길 바라겠습니다!