화살표 함수(arrow function) & 함수와 메서드

JIEUN YANG·2022년 8월 30일

ES5문법에서 소개된 화살표 함수(arrow function)는 기존 함수 표현식의 대안으로 함수와 동일하지만 몇 가지 차이점과 제한사항이 존재한다.

먼저 기존 함수 표현식은 아래와 같이 함수 선언 후 변수(또는 상수)에 할당하는데, 화살표 함수는 이 표현식을 간편하게 바꾸어 사용할 수 있도록 한다.

const test = function(a, b){

return a * b;

}

화살표 함수

test = (a, b) ⇒ {
	return a+b
}

더 간단하게,

test = (a,b) ⇒ a * b

“function” 을 지우고 인자와 중괄호 사이에 “⇒” 를 사용한다.
만약 중괄호 이후 return 문만 존재한다면 return + {} 를 생략할 수 있다.
달리 말해, 중괄호 이후 여러개의 로직이 존재할 때에는 “return” 문을 사용하여야 한다.

화살표 함수의 특징

기존함수 표현식과 동일하게, Rest parameters와 Default parameters, Destructuring이 지원된다.

하지만 이와 다르게 화살표 함수는

1) this 키워드로 접근할 수 없으며, 메서드로 사용될 수 없다.

→ this는 동일한 객체 내 변수나 함수를 호출할 때 사용하는데, 화살표 함수는 this 바인딩을 제공하지 않기 때문에 lexical context 안의 this의 값을 유지한다. (이 개념에 대해서는 추후에 깊게 조사해봐야겠다.)

메서드로 사용할 수 없다는 의미를 이해하려면 먼저 함수와 메서드의 차이가 무엇인지 알아야 한다.

2) 생성자로 사용할 수 없고, new 키워드에 접근할 수 없다.

→ 생성자는 인스턴스화 된 클래스에서 의미 있는 개념이기 떄문에 인스턴스 객체를 생성할 수 없다면 생성자도 존재할 수 없고 생성자 생성 사용하는 new 연산자 또한 의미가 없기 떄문에 접근이 불가능하다.

3) Prototype도 가지고 있지 않다.

→ 객체를 상속할 때 프로토타입이라는 방식을 사용하나 화살표 함수는 객체 상속 즉, 메서드로 사용할 수 없기 때문에 프로토타입을 지니고 있지 않다.

메서드와 함수

메서드란?

객체나 클래스에 종속되어 어떠한 로직을 처리하는 코드들의 집합으로 객체나 클래스에 종속되어 있기 때문에 객체 혹은 클래스의 프로퍼티에 접근이 가능하다.

const Auth = {
  namespaced: true,
  state: {
    jwtToken: '',
    refreshToken: '',
  },
  mutations: {
    logIn: (state, { jwtToken, refreshToken }) => {
      state.jwtToken = jwtToken
      state.refreshToken = refreshToken
      localStorage.setItem('jwtToken', jwtToken)
      localStorage.setItem('refreshToken', refreshToken)
    },
  },
  actions: {},
  getters: {},
}

logIn() 메서드는 Auth라는 클래스에 종속되어 토큰값을 localStorage에 저장하는 로직을 처리한다.
클래스에 종속되어 있기 떄문에 Auth 객체의 state 프로퍼티에 접근이 가능하다.
logIn() 메서드를 호출하기 위해서는 먼저 Auth 클래스에 접근한 뒤에 실행해야 한다. vuex를 기준으로 작성하자면

store.commit('Auth/logIn')

commit문을 실행할 때에 'logIn' 이 아닌 'Auth/logIn' 가 되는 이유이다.

함수?

독립적으로 존재하여 어떠한 로직을 처리하는 코드들의 집합으로 매개변수와 결과값은 선택적으로 선언할 수 있다.

const moveOptions = event => {
  switch (event.key) {
    case 'Enter':
      pressEnter(event)
      break
    case 'ArrowDown':
      pressArrowDown()
      break
    case 'ArrowUp':
      pressArrowUp()
      break
    case 'Escape':
      pressArrowUp()
      break
  }
}