사실 이번주 초에 배웠던 내용인데 .. 블로그 작성을 소홀히 해서 작성하지 못했다.
주말동안 작성하지 못했던 내용을 복습하면서 작성해보아야지 😙
어제 객체지향 프로그래밍을 배운뒤에 다시한번 화살표 함수를 보니 뭔가 EZ한 느낌
역시 어려운거 한번 하고 나면 앞에 했던 내용이 쉬워보인다.

---

1. 화살표 함수

화살표 함수 표현(arrow function expression)은 function 표현에 비해 구문이 짧고 자신의 this, arguments, super 또는 new.target을 바인딩 하지 않습니다. 화살표 함수는 항상 익명입니다. 이 함수 표현은 메소드 함수가 아닌 곳에 가장 적합합니다. 그래서 생성자로서 사용할 수 없습니다. - MDN 화살표함수

인용한 설명은 이해하기 어려우니 아래 작성된 코드를 보면서 이해보는게 빠를 것 같다 .

함수표현식

const add = function (x, y) {
  return x + y
}

화살표 함수

const add = (x, y) => {
  return x + y
}

함수표현식의 fuction을 생략하고 간편하게 화살표 => 모양으로 함수를 작성 할 수 있다.

그리고 함수 본문에 return만 있는 경우는 return도 생략이 가능하다고 한다.
{}중괄호 도 생략이 가능!!

const add = (x, y) => x + y // O, 정상 작동
const add = (x, y) => { x + y } // X, undefined 리턴

() 소괄호를 사용하는것 가능! 일반적인 수식에서의 "괄호 치기"와 같음

const add = (x, y) => (x + y)   // O, 정상 작동

하지만 함수 내에 표현식이 두줄 이상일 경우에는 생략을 하는것보다는 retun,중괄호를 사용해주는것이 보기 좋다.
(맞구맞구 .. 생략된 함수를 보니깐 사실 한번에 눈에 잘안들어왔다. 😅)

// bad 삐삐.. 알아보기 힘들다 ...
const getStudentAvg = arr => arr.filter(person => person.job === 'student').reduce((sum, person) => (sum + person.grade), 0)

// good
const getStudentAvg = arr => {
  return arr
    .filter(person => person.job === 'student')
    .reduce((sum, person) => (sum + person.grade), 0)
}

---

2. 화살표 함수 (클로저)

화살표 함수는 클로저를 표현할때 매우 좋다고한다!!

함수표현식

const adder = function(x) {
  return function(y) {
    return x + y
  }
}
adder(5)(7) // 12

화살표함수

function 생략하기

const adder = (x) => {
  return (y) => {
    return x + y
  }
}

return 생략하기 (가장 안쪽부터 해보기)
return 생략시에는 중괄호 사용하지 않는다는 점!!!

const adder = x => {
  return y => x + y
}

마지막 남은 부분도 모두 생략 해보기!!

const adder = x => y => x + y

한줄로 깔끔!!

---

3. 화살표 함수의 this

(사실 이부분은 아직도 이해가 안되는 부분)

• 화살표 함수에는 this가 없다.

• 화살표 함수는 생성자 함수로 사용할수 없다. (new와 함께 사용X)

• arguments를 지원하지 않음

---

마무리

간단하고 보기 명료한 함수식을 작성하기에는 정말 화살표 함수가 편리한 문법인것 같다.
하지만 복잡한 코드에서 화살표 함수만으로 모든것을 생략해서 표현한다면 빠르게 코드를 이해하는것이 힘들것같다. 사실 위에 표현된 함수만봐도 사실 나는 한눈에 이해하기가 힘들었다..
어찌되었든 새로운 문법을 배웠으니 습관적으로 자주 사용해서 익숙해지도록 노력해야겠다.

마지막 화살표함수 this는 좀 더 공부해봐야겠다. (아직 이해가 잘안됨 😭😭😭)