[TIL] 화살표 함수(arrow function)

⭐︎ What I learned today

• arrow function (화살표 함수) 📌
• this
• call
• apply
• bind

---

📌 arrow function (화살표 함수)

화살표 함수란,
보통 함수 표현식을 화살표로 축약한 형태로 표시되는 함수를 말한다.
ES6에서 새로 도입이 되었으며 arrow function이라고 불리기도 한다.

화살표 함수의 큰 특징은 'return'을 생략할 수 있다.
단, return이 생략이 되면 {}도 같이 생략이 되어야 한다.

아래 순서와 예제를 보면서 어떻게 달라졌는지 눈으로 먼저 확인해보자.

[순서]
 ☆ function 생략
 
 ☆ 만약 매개변수가 1개만 존재한다면 `()`생략 가능 
   (아예 존재x라면 `()`라도 넣어줘야 함)
   
 ☆ 가장 안쪽의 return 생략 -> `{}` 생략은 필수! 
   (화살표 함수의 유일한 문장이 'return' 일 때) 
    but `()`는 사용 가능

틀린 그림 찾기 스따뜨!!

[표현식 함수]

let apple = function (x, y) {
  return x + y 
}

[화살표 함수]

let apple = (x, y) => {    // return 을 생략 안했을 때의 구현
  return x + y;
}

let apple = (x, y) => x + y;   // return 을 생략했을 때의 구현

let apple = (x, y) => (x + y); // {}는 사용x지만, ()는 가능; 괄호치기

매개변수만 빼고 싹 다 축약이 가능함을 볼 수 있다.

또한 위에서 말했듯이 화살표 함수에서는 'return'을 생략할 수 있다고 했다.
다만,

let apple = (x) => {
  let str = '';
  
  for(let i = 0; i < x.length; i++) {
  	str = str + i;
  } 
  return str;

위의 구현처럼 함수 내용이 길어질 경우,
{}가 사용가능해지며, 동시에 반드시 'return'을 기재해주어야 한다.

한가지 더!
매개변수가 존재하지 않을 땐(빈괄호일때) ()라도 표시하여야 한다.
아래의 예제를 보겠다.

let apple = function() {
 // 내용 생략
}				// 아래와 같이 화살표 함수로 구현 가능

let apple = () => // 내용 생략

화살표 함수는 클로저를 표현할 때 더욱 가치가 있다.

let myName = [
'potter',
'Lee',
'John',
'LJH'
];

[함수 표현식]

let myName= function (x) {
return x.map(function(y) {
  return y;
})			// ["potter", "Lee", "John", "LJH"]
};

[화살표 함수]

let apple = (x) => x.map((y) => y); // ["potter", "Lee", "John", "LJH"]

let apple = x => x.map(y => y);  // 추가 tip! 파라미터가 1개라면, ()를 생략할 수 있다!
				// ["potter", "Lee", "John", "LJH"]
  

위의 예시처럼 '클로저'는 여러개의 화살표 함수를 사용한 점에서 유용하다고 한 것이다.

화살표 함수의 특징

화살표 함수는 다음과 같은 특징이 있습니다.

• call, apply, bind를 사용할 수 없습니다.
• 화살표 함수의 실행은 this를 결정짓지 않습니다.

---

이하 내용은 포스트의 가독성을 높이기 위해 다음 포스트에서 작성하도록 하겠다.

⭐︎ this

다음 포스트

⭐︎ call, apply

다음 포스트

⭐︎ bind

다음 포스트