[JS] 화살표 함수(Arrow Function)

화살표 함수(arrow function)

특별한 형태의 함수 표현으로 더 짧고, 더 빠르게 사용 가능

---

//arrow function
birthYear => 2037 - birthYear;

나이를 계산해야 함으로 birthYear이 필요하다. 

birthYear을 작성 후 => 화살표를 작성한다. 그래서 화살표함수인거다 ㅋㅋ!

그다음 반환하고 싶은걸 적으면 된다. 2037 - birthYear 을 작성했다. 이러면 끝이다. 근데 막상 혼자서 해보면 어렵다.

 

이 함수를 사용하고 싶다. 그러면 어떻게 해야하는가?

변.수.저.장을 해야한다.

//arrow function
const calcAge3 = birthYear => 2037 - birthYear;

const calcAge3로 이 함수에 해당 변수를 설정했다.

이건 함수식의 특별한 상태이다. birthYear => 2037 - birthYear 이 값들은  calcAge3 변수에 할당되는 값이다.

 birthYear => 2037 - birthYear (← 이게 함수다.)

 

왜??? 함수 선언, 함수 표현식보다 빠르게 사용할 수 있는가?

1. 중괄호가 필요없다.

2. 반환이 암.묵.적으로 일어난다.

 

2037-birthYear ← 이 값들은 자동으로 반환된다. 그래서 반환키워드가 필요없다. 

● 간단한 한줄 정도의 코드를 작성할때 아주 적합하다.

● arrow function 함수도 다른 모든 함수와 같은 방식으로 작동한다. 

 

변수도 설정했고 반환도 암묵적으로 이뤄졌다. 그러면 무엇을 해야할까?

호.출을 해야한다. 마치 다른 calcAge 함수를 호출한거처럼!

 

<호출하는 과정>

//arrow function
const calcAge3 = birthYear => 2037 - birthYear;
calcAge3(1991)

먼저 calcAge3(1991)를 적고

//arrow function
const calcAge3 = birthYear => 2037 - birthYear;
const age3 = calcAge3(1991);

다시 반환된 값을 변수에 저장한다. 

 

큰솔에 age3변수를 입력하면?

//arrow function
const calcAge3 = birthYear => 2037 - birthYear;
const age3 = calcAge3(1991);
console.log(age3);

46이 나.온.다.

---

한 사람이 은퇴할 때까지 몇 년이 남았는지 계산하는 프로그램

● 매개 변수(birthYear)이 하나있고 코드(birthYear)이 하나 이상인 경우의 시나리오.

   ↑ 위의 상황과 같은 경우일때는 반환 값이 필요하다. 

const yearsUltRetirement = birthYear => {
  const age = 2037 - birthYear;
  const retirement = 65 - age;
  return retirement;
};

console.log(yearsUltRetirement(1991));

1. const yearsUltRetirement = (bithYear) =>

yearsUiRetirement 함수를 만든다. 그 다음 bithYear과 동일하게 설정한다음 화살표 함수를 이용한다.

출생만 보고 은퇴할 때까지의 횟수를 계산하려면 먼저 나이를 계산하고 은퇴 연령을 계산해 현재 나이를 빼야함으로 코드 줄이 더 필요하다. 

2.  중괄호를 작성해 코드 블록을 정의해 준다. 

3.   const age = 2037 - bithYear; 

출생년도를 기준으로 나이를 계산해준다. 

4.   const retirement = 65 - age;

은퇴 나이가 65로 가정하면 은퇴나이에서 현재 나이를 빼준다. 

5.  return retirement;

은퇴를 반환하려면 반환 키워드를 이용해 명시적으로 작성해야 한다. 짧은 코드면 반환은 생략할 수 있다. 많은 코드를 작성하려면 반환 키워드가 있어야한다.  

6. console.log(yearsUltRetirement(1991));

그 다음 함수를 실행하면 된다. 그래서 결과 값이 19가 나왔다.

---

● 여러가지 변수가 있을땐 어떻게 할까?에 대한 시나리오

   ↑ 매개 변수를 괄호 안에 넣어야 한다.

const yearsUltRetirement = (bithYear, firstname) => {
  const age = 2037 - bithYear;
  const retirement = 65 - age;
  // return retirement;
  return `${firstname} retires in ${retirement} years`;
};

console.log(yearsUltRetirement(1991, "Jonas"));
console.log(yearsUltRetirement(1980, "Bob"));

1. const yearsUltRetirement = (bithYear, firstname) => {

bithYear, firstname 양쪽에 괄호를 넣었다. 문장같은걸 리턴할 수 있도록 말이다. 
2.   const age = 2037 - bithYear; 

출생년도를 기준으로 나이를 계산해준다. 

3.   const retirement = 65 - age;

은퇴 나이가 65로 가정하면 은퇴나이에서 현재 나이를 빼준다. 

4.  return `${firstname} retires in ${retirement} years`;

문자열을 반환시킬 것이다. 또한 문자열을 만들기 위해 템플릿 리터럴을 사용했다. return 키워드를 저장하고 이제 호출을 할것이다. 
};
5. console.log(yearsUltRetirement(1991, "Jonas"));
    console.log(yearsUltRetirement(1980, "Bob"));

그다음 호출을 했다. 

---

다른 함수들과 달리 화살표 함수에는 this 키워드가 없다. ?