arrow function에 대해서 한번 정리하긴 했는데.....
아무래도 평소 사용하는 function과 너무 다르다 보니😭 딱히 사용하지도 않게 되고 사용하더라도 error와 한바탕 싸우다가 손절하게 된다.
정리만 하고 이해는 못하고 넘어갔구나 싶어서 wecode repl.it 과제로 나온 김에 다시 한번 정리해본다!
➡ arrow function
ES 2015 부터 등장한 화살표 함수!
함수를 간결하고 짧게 표현할 수 있으나 이 전에 배웠던 function 표현식과 완전히 달라서 선뜻 활용하기가 힘들다...
이번 기회에 제대로 뽀개고 가자!!!!
//ES5
function() { }
//ES6
() => { }arrow function은 항상 이름이 없는 Anonymous function 이다.
ES5 에서는 익명 함수여도 function 은 붙여줘야 했는데, ES6에서는 그마저도 빼버렸다.
그냥 소괄호를 열고 닫고 ( ) arrow => 만 추가하면 function이 완성된다! (쩔어!)
//ES5
function getName() { }
//ES6
const getName = () => { }이름이 있는 함수를 만들때는 이렇게 표현한다.
arrow function은 항상 익명 함수라며? 무슨 이름? 하셨다면 매우 예리하시군요😁👍
이름이 있는 arrow function은 만들 수 없다 😅
대신 function(함수)는 변수에 저장할 수 있는 하나의 식이라는 점을 이용하여, arrow function을 변수에 저장해서 이름이 있는 함수처럼 사용할 수 있다.
//ES5
function getName(name, age) { }
const getName = function(name) { }
//ES6
const getName = (name, age) => { }
const getName = name => { } // 인자가 하나일때는 소괄호 생략인자는 이렇게 받을 수 있다!
받는 인자가 여러개라면 생략할 수 없지만, 하나일 때는 소괄호 생략이 가능하다.
//ES5
function hi(text) {
text += '하세요';
return text;
}
//ES6
const hi = text => {
text += '하세요';
return text
};return 할땐 딱히 차이가 없어보이네?
그런데 만약 함수가 실행 내용이 없고 단순히 return 만 한다면...
이런식으로 return 과 중괄호를 생략할 수 있다.
//ES5
function getName(name) {
return name;
}
//ES6
const hi = name => { return name }; // 이거나
const hi = name => name; // 이거나 결과가 같다.이렇게 return 과 중괄호를 생략할 경우, 화살표 오른쪽에는 리턴될 "값"만 들어와야 한다.
📞 callback 함수로 역할
arrow function을 가장 많이 사용할 때는 callback 함수로 사용할 때 이다.
// ES5
const numArr = [1, 2, 4, 7];
let oddArr = numbers.filter(function (x) { return x % 2 !== 0;});
console.log(oddArr); // [1, 9]// ES6
const numArr = [1, 2, 4, 7];
let oddArr = numbers.filter( x => (x % 2) !== 0 );
console.log(oddArr); // [1, 7]callback function을 arrow function으로 작성해주면 훨씬 직관적이고 간결하게 코딩할 수 있다.
✨ arrow function 에서의 this
"는 작성중!"
