scarf@127.0.0.1


자바스크립트 화살표 함수 => 쓰기


화살표 함수가 모지

function myFunc(a, b) { return a + b }
const myArrowFunc = (a, b) => a + b

const a = 3, b = 4
console.log(myFunc(a, b))
console.log(myArrowFunc(a, b))

> 7
> 7

어떻게 쓰지

mdn 한글 레퍼런스

인자 0개

고급 사용법

const noArg = () => 3

noArg()
> 3

const oneLine = () => console.log("한 줄이면 괄호 필요 없음")

oneLine()
> 한 줄이면 괄호 필요 없음

인자 1개

const oneArg = num => num * 4

oneArg(10)
> 40

인자 n개

const manyArg = (a, b) => a + b

manyArg(3, 4)
> 7

여러 줄 함수

const manyLine = (a, b) => {
  console.log(`첫째 인수는 ${a}`)
  console.log(`둘째 인수는 ${b}`)
  return `이거는 반환값`
}

manyLine(3, 4)
> 첫째 인수는 3
> 둘째 인수는 4
> '이거는 반환값'

화살표 함수와 this

화살표 함수를 메소드로 쓸 수 있을까?

  • 자기만의 this 가 없다
  • 자기 바로 바깥 구문의 this를 가진다

언제 쓸까

메소드 체이닝할때 보기 예쁘다

const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
arr
  .filter(e => e % 2 === 0)
  .map(e => e ** 2)
> (5) [0, 4, 16, 36, 64]
const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
arr
  .filter(function(e) {return e % 2 === 0 })
  .map(function(e) { return e ** 2 })
>(5) [0, 4, 16, 36, 64]
  • 쓸 수 있는 경우에 많이 쓰자

비동기 함수를 써야 할때

참고

class Person {
  constructor(name) {
    this.name = name
  }

  hi() {
    console.log(`안녕, 나는 ${this.name}`)
  }

  hiDelayed() {
    setTimeout(function() {
      console.log(`안녕, 나는 ${this.name}`), 1000
    })
  }

  hiDelayedTradFix() {
    const that = this
    setTimeout(function() {
      console.log(`안녕, 나는 ${that.name}`), 1000
    })
  }

  hiDelayedArrow() {
    setTimeout(() => {
      console.log(`안녕, 나는 ${this.name}`), 1000
    })
  }
}

mary = new Person('메리')
mary.hi()
> 안녕, 나는 메리
mary.hiDelayed()
> 안녕, 나는
mary.hiDelayedTradFix()
> 안녕, 나는 메리
mary.hiDelayedArrow()
> 안녕, 나는 메리

언제 쓰지 말까