일반 함수와 화살표 함수

함수

• JavaScript에서 기본적인 구성 블록 중 하나
• 작업을 수행하거나 값을 계산하는 자바스크립트 절차
• 재사용 가능한 영역을 정의하고 정보영역을 캡슐화하는 데 사용하는 구문 => 여러 번 호출 가능
• 모든 함수는 객체이다
• 일반적으로 하나 또는 0개의 값을 반환한다
• 함수가 원하는 값을 반환하도록 하려면 return문으로 반환할 값을 지정해주어야 한다.
• 반환문 없는 함수는 기본값을 반환하며 기본 반환값은 new키워드로 호출하는 생성자의 경우에는 함수가 가르키는 this 그 외의 모든 함수는 undefined

일반 함수(Traditional function)

• function키워드로 시작
• function키워드 뒤에 함수의 이름과 매개변수를 ()내부에 선언한다
• 호출 시 선언한 함수의 이름과 전달인자를 넘겨 실행한다

  function regularFunc(a, b) { // a, b ==> parameter (매개변수)
    const c = a + b
    return c
  }        
  regularFunc(1, 10) // 1, 10 ==> argument (전달인자)

화살표 함수(Arrow function)

• ES6 (ECMAScript2015)에 추가된 함수 표현식
• 기존의 함수 표현식에서

function키워드를 삭제하고 인자를 받는 매개변수의()와 {}사이에 화살표=>를 넣어준다

  const arrowFunc = (a,b) => {
    const c = a + b
    return c
  }
  arrowFunc(1, 10)

• 함수 내부에 반환값만 있다면 중괄호와 return을 생략할 수 있다
• 인자를 하나만 받는다면 괄호도 생략 가능()
• 객체의 경우에는 괄호를 감싸주어 해당 반환값이 객체임을 알려주어야 한다

    const func = () => 'string' // 반환값만 존재하기 때문에 중괄호와 `return` 생략
    const func2 = a => 'string' // 매개변수가 하나이기 때문에 괄호 생략
    const func3 = () => ({key: 'value', key2: 1000}) // 객체의 경우 괄호로 감싸주어야함

차이점

• 문법 : 예시에서 볼 수 있듯 화살표 함수는 함수를 정의하는데 더 짧은 문법을 사용함
• 생성자 함수 : 일반 함수는 new 키워드를 사용하여 사용될 수 있지만 화살표함수는 생성자 함수로 사용될 수 없다.
  • 화살표 함수가 자체적으로 this를 바인딩하지 않기 때문
• 메서드 : 객체의 메서드로서 사용될 때 일반 함수는 그 객체의 this를 바인딩하지만 화살표 함수는 그렇지 않기 때문에 메서드로 사용할 때는 일반함수가 더 적합할 수 있다
• this 키워드의 바인딩 방식 : 일반 함수에서 this는 함수가 호출된 방식에 따라 다르게 바인딩되지만 화살표 함수에서는 항상 그 함수를 둘러싸고 있는 범위에서 상속된다

this의 차이

일반 함수

• 함수 실행 시에는 전역객체를 가리킨다(window)
• 메소드를 실행 시에는 메서드를 소유하고 있는 객체를 가리킨다
• 생성자 실행시에는 새롭게 만들어진 객체를 가리킨다

  const test = {
  name: '이름',
      func: function() {
        return this.name // 일반 함수는 메소드를 소유하고 있는 객체를 가리키기 때문에 '이름'이라는 문자열을 가지고 있음
      }
  }
  console.log(test.func()) // => '이름' 출력

화살표 함수

• 렉시컬 스코프(스코프가 함수의 호출 위치가 아닌 선언 위치에 따라 결정되는것)과 유사하게 화살표 함수가 선언된 상위 스코프의 this를 가리킨다
• 메서드로 정의한 화살표 함수 내부의 this는 메서드를 소유한 객체를 가리키지 않고 상위의 window객체를 가리키게 되기 때문에 화살표 함수로 메서드를 정의하는 것은 지양해야 한다

const test = {
  name: '이름',
  func: () => {
    return this.name // 상위 스코프를 바라보고 있기 때문에 '이름'을 가리키지 않음
  }
}
console.log(test.func()) // test2의 상위인 전역객체를 바라보고 있기 때문에 undefined를 출력

---

참고

• https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Functions
• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions
• https://hanamon.kr/javascript-%ED%95%A8%EC%88%98-%EA%B8%B0%EC%B4%88/
• https://webclub.tistory.com/649
• https://poiemaweb.com/es6-arrow-function
• https://hhyemi.github.io/2021/06/09/arrow.html