[JavaScript] Arrow function 화살표 함수

 

 

 

 

1. Arrow function 문법 

ES6 문법 이후 새롭게 등장한 함수를 만들 수 있는 문법

 

1) 자바스크립트에서 함수 만드는 기존 문법

(1)
function 예쁜함수(){
  //어쩌구
}

(2)
var 예쁜함수 = function(){
  //어쩌구
}

 

 

함수 사용법

예쁜함수();

 

 

 

2) ES6 신문법 Arrow function 으로 함수 만들기 

- function이라는 길고 복잡한 키워드 대신에 () => {} 의 형태로 만드는 함수

var 예쁜함수 = () => {
  //어쩌구
}

 

 

 

 

2. Arrow function의 장점

 

1) 함수 본연의 입출력 기능을 직관적으로 표현하는 문법

cf) function 문법을 사용하는 이유 1. 여러가지 기능을 하는 코드를 한 단어로 묶고 싶을 때 (그리고 나중에 재사용할 때) 2. 입출력기능을 만들 때

 

var 두배만들기 = (x) => { return x * 2 }

console.log( 두배만들기(4) );
console.log( 두배만들기(8) );

- 숫자를 넣으면 2배를 해주는 함수

- 함수 표현식 자체가 x가 x * 2를 직관적으로 보여주기 때문에 이해하기가 쉬워짐

 

 

2) 소괄호 생략 가능  

- 파라미터가 하나라면 소괄호 생략 가능

var 두배만들기 = x => { return x * 2 }

console.log( 두배만들기(4) );
console.log( 두배만들기(8) );

 

 

 

3) 중괄호 생략 가능

- 중괄호 안에 return 한줄 뿐이라면 중괄호와 return도 생략 가능

- {} 중괄호 끝날 땐 세미콜론 안쳐도 잘 되는데 생략하는 경우 코드 가독성을 위하여 세미콜론 적기!

var 두배만들기 = x => x * 2 ;

console.log( 두배만들기(4) );
console.log( 두배만들기(8) );

 

생략의 장점 -  x가 어떻게 변하는 함수인지 입출력기능이 직관적으로 보임

 

 

4) arrow function 내부의 this는 값을 변화시키지 않음

- arrow function 내부의 this 값은 밖에 있던 this값 그대로 사용(내부의 this 값을 변화시키지 않음)

- 항상 장점은 아님. 예측하던 this값과 달라질 수도 있어서 단점이 될 수 있음

 

<script>
    var 오브젝트1 = {
            함수 : () => { console.log(this) }
        }

        오브젝트1.함수();

</script>

 

 

=> this의 뜻이 달라지는 것 처럼 일반 function과 용도가 완전 같지 않기 때문에 일반 function을 항상 대체할 수 있는 문법이 아닌 것을 알고 있을 것