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

화살표 함수 를 쉽게 설명하면,

function  키워드와 식별자를 빼주고 소괄호와 중괄호 사이에 => (화살표)를 넣는것.

 

 

 

식별자가 없기 때문에 호출을 할 수가 없다.

 

 

함수표현식을 사용하여 변수에 화살표 함수를 할당해주면 다른곳에서 호출해여 쓸 수 있다.

 

 

화살표함수의 특징 1

함수의 중괄호 안에 return 식만 포함이 된다면, 중괄호와 return을 지우고 표현해도 정상적으로 작동된다.

console값이 40으로 찍힌다.

 

화살표함수의 특징 2

매개변수가 하나라면 소괄호를 생략가능하다.

console값이 100으로 찍힌다.

 

 

화살표함수의 특징 3

매개변수가 없다면 소괄호만 작성한다.

console값이 3.14로 찍힌다.

 

 

 

화살표함수의 특징 4

 

 return 값이 객체일때 + return 식만 존재할 때 주의해야한다.

중괄호와  return 을 지우면 객체를 반환하는 것이 아니라 함수식자체로 ( 화살표 함수의 가장 겉의 중괄호로 ) 혼동할 수 있으므로 객체 바깥에 소괄호를 적어준다.

 

 

 

 

 

 

내부 함수를 화살표 함수로 바꾸기

 

1. function outer 를지우고 소괄호와 중괄호 사이에 화살표를 쓴다.

2. 함수표현식을 사용하여  const  outer에 함수를 선언한다.

3. outer함수 중괄호 안에 바로  return 식만 있으므로  겉의 중괄호와 return을 삭제한다.

⬇️

 

3.outer 함수 안의 함수도 중괄호 안에 return 식만 존재하므로 화살표 함수로 표현이 가능하다.

 function inner 를 지우고 소괄호 중괄호 사이에 화살표를 쓰고 중괄호와  return을 지운다.

⬇️

 

 

 

 

 

https://www.youtube.com/watch?v=5kRgzyGRPrU