📌 Arrow Function
Arrow Function은 자바스크립트에서 함수의 모습을 개선한것이다. var 처럼 let과 const가 대체되는것은 아니고 단지 보기좋게 만든것이다.
기존 function을 만들려면
function nameOf(arg){...};이런 형식으로 만들거나, 이름을 빼고 익명함수 혹은
const hello = function(arg){...};처럼 상수 안에 넣을 수 있었다.
Arrow Function은 기본적으로 => 의 형태이며, 좀 더 보기 쉽게 만들었다. function 이라는 길고 복잡한 키워드 대신 => 라는 조금 더 보기좋은 화살표를 사용해서 함수를 만들어낸다.
nameOf(arg) => {...};
const hello = arg => {...};⭐️ Arrow Function의 용도
1. 함수 본연의 기능을 아주 잘 표현한다.
함수를 기본적으로 사용하려고 할때는
* '여러가지 기능을 하는 코드를 한 단어로 묶고싶을때 ( 추후 재사용할 때 )'
* '입출력기능을 만들 때'
사용한다.
Arrow Function을 사용하면 함수 본연의 입출력기능 을 아주 직관적으로 잘 표현할 수 있다. 숫자를 넣으면 2배를 만들어주는 함수를 2가지 예시로 들어보겠다
// 기존 방식
function multiplydouble(x){
return x * 2;
};
// Arrow Function
const multiplydouble = (x) => { return x * 2};
console.log(multiplydouble(4)); // 8함수의 표현식 자체가 x가 x * 2 가 된다고 말하는것처럼 쉽게 알아볼 수 있다. 코드를 볼때에 이해하기 쉬워지기 때문에 아주 큰 장점이라고 말할 수 있다.
2. 소괄호 생략이 가능하다.
파라미터가 하나라면 소괄호를 생략해서 구현할 수 있다.
const multiplydouble = x => { return x * 2};3. 중괄호 생략이 가능하다.
중괄호 안에 return이 한줄 뿐이라면 중괄호와 return도 생략이 가능하다. 이 부분은 추후에 나올 implicit return 이라고 한다.
const multiplydouble = x => x * 2;⭐️ Implicit Return
주로 function을 다루다보면 어떤것에 적용을 시키는데 그것들은 주로 복잡한 내용을 가지고 있지는 않다. 표현식 한 줄만 있을때라고 가정하면 return을 쓰거나 {}를 쓰기에는 좀 과하다고 생각이든다.
그래서 이 경우에 Arrow Function은 Implict Return을 한다.
뒷장에서 배울 map함수를 간단히 설명하면 function을 주는데 모든 item들을 가져와서 function을 실행시켜줄것이다.
map이 하는 일은 각각의 아이템마다 함수를 호출 하는 일을 한다.
이름을 가지고 있는 배열으로 예시를 들어보자.
const names = ['bibi', 'kkamzzu', 'barnes'];
// 기존방식
const heartz = names.map(function(item){
return item + "🤍";
});
// Implict Return 적용
const heartz = names.map(item => item + "🤍");
console.log(heartz); // (3) ['bibi🤍', 'kkamzzu🤍', 'barnes🤍']출력되는 배열 아이템에 '🤍'이 합쳐져서 출력이 된다.
이것은 item이라는 argument를 가진것을 리턴하는 함수이다. Arrow Function을 사용하며 괄호를 지우고, return function을 지우고 가장 중요한 부분만 남겼다.
Implicit Return의 뜻은 같은 줄에 무엇을 적던지 return이 된다는 의미이다.
⛑ 괄호를 추가하는 순간 Implicit Return은 사라진다.내용이 있고 함수가 좀 복잡해지면 function의 body를 만들게 되고 괄호가 추가되니 기능이 사라지게 되는것이다.
📌 this & Arrow Function
대부분의 경우에 Arrow Function을 사용할 수 있지만, this 키워드를 사용해야 하는 경우에는 조심해야한다.
JavaScript에서 this라는 키워드는 이미 예약되었다는 뜻으로 색이 다르게 표현이 된다. 이벤트리스너를 붙히고 이벤트리스너에 function이 있으면Javascript는 우리가 이벤트리스너에 등록한 대상을 this 키워드에 넣는다.
이것도 scope라고 부른다.
어떤 이론을 배워도 이해해야하는 것은 Javascript가 this를 내가 원하는 function에 넣는지 알아야한다.
이벤트리스너를 통해 예시를 알아보자.
// html
<button>Click me</button>
// script
const button = document.querySelector('button');
button.addEventListener('click', function(){
console.log(this)
})
// button클릭시 <button>Click me</button>출력하지만 Arrow Function은 다르다. Arrow Function은 규칙을 가지고 있다. 이 안에 있는 this를 참조하며 바깥의 bubble을 참조하게 되는것이다.this를 사용하고싶으면 Arrow Function 사용을 지양해야 한다. Arrow Function을 사용하는 순간 reference를 잃게된다
// html
<button>Click me</button>
// script
const button =document.querySelector('button');
const handleClick = () => {
console.log(this)
}
button.addEventListener('click', handleClick);
// button클릭시 전역객체인 window 출력
// Window {window: Window, self: Window, document: document, name: '', location: Location, …}또 한가지 예를들어보자
const bibi = {
name : 'bibiboy',
age : 24,
addYear : () => {
this.age++;
}
}
console.log(bibi); // {name: 'bibiboy', age: 24, addYear: ƒ}
bibi.addYear();
bibi.addYear();
console.log(bibi); // {name: 'bibiboy', age: 24, addYear: ƒ}Arrow Function은 this를 이벤트로부터 가지고 있지않고, window object로 가지고 있다.
객체를 넣어서 this로 ++ 해주게 했는데도 window를 가리키기 때문에 동작을 하지않게 되는것이다
🔥 요약정리
Arrow Function이 생기며 직관적으로 표현하는 점, 입출력기능이 표현이 잘되는점, 코드의 요약화 등등 좋은점이 있지만 this가 관련된것이나 scope관련해선 Arrow Function을 사용하지 않는것이 좋다.
Implicit Return을 사용하면 간결하고 직관적으로 표현하기 좋다.
this의 뜻이 달라지는 것처럼 일반 function과 용도가 완전히 같지는 않기 때문에 일반 function을 항상 대체할 수 있는 문법은 아니다.
📖 참고
https://nomadcoders.co/ - Nomad Coder
https://codingapple.com/unit/es6-3-arrow-function-why/ - coding apple
