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

 Arrow 함수

- 화살표 함수는 기존에 있던 function의 익명 선언 방식을 축약한 것이다.

 

- 화살표 함수는 익명 함수이며 사용할 경우는 두 가지 경우가 있는데 하나는

   단 한번만 사용하는 콜백함수에서 사용되거나 변수에 할당하여 사용할 경우 두가지 케이스가 존재한다.

 

- 화살표 함수를 축약하는 방식은 상황에 따라 여러가지 방법으로 축약이 가능하며 각 상황에 맞추어 축약하지

   않을 경우 에러가 발생한다.

 

1) 화살표 함수(Arrow function)으로 변환방법 및 법칙

 

1-0. 기본형

const funcA = function(one, two){
            return one + two;
        }
        console.log(funcA(2,3));

 

1-1. " function " 을 생략하고 " => " 로 간단하게 대체가능

 const funcA = (one, two) => {
            return one + two;
        }
        console.log(funcA(2,3));

 

 

1-2. 위와 같이 로직이 한줄이고 return이 들어간 라인이라면 중괄호{ }과 return이 생략이 가능하다.

const funcA = (one, two) => one + two;
        console.log(funcA(2,3));

 

 

---

 

2-0 기본형

const funcA = function(value){
            return value + 10;
        }

        const funcA = (value)=> value + 10;

 

2-1. 인자가 하나밖에 없을 경우 소괄호( )를 생략도 가능하다.

const funcA = value => value + 10;

 

 

---

3-0 기본형

const funcB = function(){
            return 3+4;
        }

3-1. 파라미터(인자)가 없을경우 반드시 ( )을 넣어줘야한다.

const funcB = () => 3+4;

 

 

 

---

2) Arrow 함수의 특성

 

-  Arrow 함수에서 object 형태를 반환하려면 { }양 옆에 소괄호( )로 묶어주어야 한다.

-> F12 console 창에서 Result 확인 가능

 

---

 

- Arrow 함수내에서는 arguments 객체를 불러올 수 없다.(arguments 자체를 지원을 안함)

 

 

* 불필요한 입력을 줄일 수 있고 간단하게 함수 들을 선언하고 사용할 수 있지만, 잘못 입력하게되면 에러 및 오작동 할수 있으니 제대로 알고 사용해보자