함수 선언방식에 따른 차이점💡

---

🧡함수의 종류

💛함수 선언식

• 일반적인 함수 선언방식
• 기명함수로 선언

  function myFn() {
    return 'function'
  }

💛함수 표현식

• 변수에 익명함수를 할당하는 방식

  const myFn = function() {
    return 'function'
  }

💛화살표 함수

• ES6부터 도입 된 방식
• 작성이 훨씬 간편해짐
• 때에따라 괄호(), 중괄호{}, return의 생략이 가능

  const myFn = () => {}

---

🧡호이스팅(Hoisting)

• 선언식 함수 vs 표현식 함수의 차이

• 호이스팅 : 코드 실행 전 작성된 함수 or 변수가 해당 스코프의 최상단으로 끌어올려지는 현상
  쉽게말해 함수의 호출이 함수선언부보다 상단에서 일어나도 문제없이 함수가 작동하는 현상이다

• 선언식함수에서는 호이스팅이 발생하나, 변수에 함수를 할당하는 표현식 함수에서는 호이스팅이 일어나지 않는다

fn1() //'f1' 정상출력
fn2() //Error

//함수 선언문
function fn1() {
  console.log('fn1')
}

//함수 표현식
const fn2 = function () {
  console.log('fn2')
}

🧡this의 정의

• 일반함수 vs 화살표함수의 차이

• 일반함수의 this는 호출된 시점에서 정의
  (함수를 호출하는 위치에 따라 this의 값이 달라 질 수 있음)

• 화살표함수의 this는 자신이 선언된 위치에서 정의
  (함수를 호출하는 위치와 상관없이 선언된 위치의 상단범위에서 this를 정의

  const user = {
    name: "user",

    normalFn: function () {
      console.log(this.name)
    },

    arrowFn: () => {
      console.log(this.name)
    }
  }

  user.normalFn(); //"user"
  user.arrowFn(); //undefined

---

마치며🙌

호이스팅은 확실히 이해가 되는데 사실..this는 이렇게 배운대로 정리를 해봐도....진짜 모르겠다... 나름대로 배운지식을 기반으로 요리조리 코드를 짜봐도 생각이랑 다르게 나오기도 하고... ㅜㅜ this를 제대로 이해하고 오면 이 글이 또 다르게 보일까... 흑흑 ...