JS중급_arrow function

▶️ Arrow function 문법

	var func = () => {
    	console.log('this')
    }

function 이라는 길고 복잡한 키워드 대신, 다음과 같이 예쁜 화살표를 이용해 함수를 만들어내는 신문법이다.

---

▶️ Arrow function을 쓰는 이유

	var make_double = (x) => {return x * 2}

	var make_double = x => {return x * 2}

	var make_double = x => x * 2

Arrow function은 함수 본연의 기능을 아주 잘 표현하는 문법이다. 위 세 개의 함수는 전부 같은 함수로, 파라미터가 한개면 소괄호를 생략가능하다.

• 중괄호 안에 return 한 줄만 있다면 중괄호와 return 생략도 가능하다. 하지만 중괄호를 붙인다면 지시자로 return을 사용해 반환값을 명기해줘야 한다.

---

▶️ Arrow function의 this 값

	var obj1 = {
    	func : function() {
        console.log(this) 
                        }
    }
    
    obj1.func();

	var obj1 = {
    	func : () => {
        console.log(this) 
                        }
    }
    obj1.func();

1. 위의 코드는 실행하면 func()를 소유하고 있는 obj1이 콘솔창에 출력된다.
2. 하지만 arrow function을 사용할 경우 밖에 있던 this를 그대로 사용한다. (밖에 있던 this는 window) this값은 함수를 만나면 항상 변하는데, arrow function 안에서는 변하지 않고 밖에 있던 this를 그대로 가져다 쓰기 때문이다.(= 즉 this가 없다고 보면 이해하기 쉽다.)

---

더 많은 내용은 모던 자바스크립트 튜토리얼의 화살표 함수 더 알아보기 파트를 참조해보자.

https://ko.javascript.info/arrow-functions