⚡️ Arrow function 문법
자바스크립트에선 함수를 이런 식으로 만들어서 사용한다.
(1)
function 예쁜함수() {
//생략
}
(2)
var 예쁜함수 = function() {
//생략
}함수는 (1) 또는 (2)처럼 만들고
예쁜함수(); 이렇게 함수를 사용한다.
(function 키워드로 시작하는것 말고도 (2)번처럼 변수에다가 함수를 등호=로 집어넣어서 함수를 만들 수 있다.)
근데 ES6 신문법을 사용하면 함수를 이렇게 만들 수도 있다.
var 예쁜함수 = () => {
//생략
}function이라는 길고 복잡한 키워드 대신에
=> 이런 화살표를 사용해서 함수를 만들어내는 신문법이다.
arrow fucntion을 사용하는이유는?
1. 함수 본연의 기능을 아주 잘 표현하는 문법이다.
일단 fucnton 문법은 왜 사용할까?
1. 여러가지 기능을 하는 코드를 한 단어로 묶고 싶을 때 (그리고 나중에 재사용할 때)
2. 입출력기능을 만들 때
이럴 때 함수를 사용해야한다.
그리고 arrow function을 사용하면 함수 본연의 입출력기능을 아주 직관적으로 잘 표현해준다
입출력기능?
함수는 수학에서 온 개념이다.
원래 함수는 뭐 숫자를 집어넣으면 뭔가 다른 숫자를 배출하는 블랙박스 같은 역할을 한다.
위 그림처럼 input을 집어넣으면 output을 출력해주는 박스가 바로 함수다.
2를 집어넣으면 x + 2를 출력해주는 함수를 어떻게 만들까?function 더해주세요(x){ return x + 2 }함수의 소괄호안에는 input역할을 하는 파라미터가 있고
함수내에 return이라는 것은 output역할을 하는 키워드이다.
그럼 이제 더해주세요(2); 이렇게 사용하면 4가 이 자리에 남게 되는 것이다.
소괄호에 뭔가 집어넣으면 return을 이용해 뭔가를 뱉어내는 것
이게 바로 함수의 입출력 기능이다.
그래서 arrow fucntion을 사용하면 입출력기능이 쉽게 표현된다.
var 두배만들기 = (x) => { return x * 2 }
console.log( 두배만들기(4) );
console.log( 두배만들기(8) );숫자를 넣으면 2배를 해주는 함수를 하나 만들었다.
함수 표현식 자체가 x가 x*2가 됩니다~라고 말하는 것 같아
매우 이해하기 쉬워진다. 이게 장점1이다.
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가 어떻게 변하는 함수인지 입출력기능이 한눈에 보이는걸 확인할 수 있다.
arrow function을 쓰면 내부에서 this값을 쓸 때 밖에 있던 this값을 그대로 사용
함수가 쓰인 위치에 따라서 내부의 this값이 변한다고 했다.
근데 arrow function은 어디서 쓰던간에 내부의 this 값을 변화시키지 않는다.
그러니까 바깥에 있던 this의 의미를 그대로 내부에서도 사용하는 함수가 바로 arrow function이라는 함수이다.
(이게 장점 4이자 Arrow function을 쓰는 핵심 이유이다.)
예시 1.
var 오브젝트1 = {
함수 : function() { console.log(this) }
}
오브젝트1.함수()
// 함수()를 가지고 있는 오브젝트인 오브젝트1이 콘솔창에 출력된다.예시 2.
var 오브젝트1= {
함수 : () => { console.log(this) }
}
오브젝트1.함수()여기선 this가 window로 출력된다.
왜 함수의 주인인 오브젝트 1이 출력되지 않냐면
this값은 함수를 만나면 항상 변하는데 arrow function 안에서는 변하지 않고 밖에 있던 this를 그대로 쓴다.
(오브젝트 밖에 있던 this는 window이다.)
왜냐면 arrow function은 외부에 있던 this를 그대로 내부로 가져와서 사용하는 함수기 때문이다.
항상 장점은 아니다. 내가 예측하던 this값과 달라질 수도 있으니 단점이 될 수 있다.
주의할 점은 this의 뜻이 달라지는 것 처럼 일반 function과 용도가 완전 같지 않기 때문에
일반 function을 항상 대체할 수 있는 문법이 아니다.
