[Javascript] 함수 선언식 & 함수 표현식 & 화살표 함수

 

 

함수 선언식: function helloA() {}

함수 표현식: let helloB = function() {}

화살표 함수: let hello = () ⇒ {}

 

 

---

 

함수 선언식

함수 이름을 선언해서 표현하는 방식

💡 호이스팅이 일어난다.

 

// 호이스팅이 일어나 에러가 발생하지 않음
console.log(helloA()) // '안녕하세요.'

function helloA () {
	return '안녕하세요.'
}

 

 

---

 

함수 표현식

함수를 변수에 담아서 표현하는 방식, 호이스팅이 일어나지 않는다.

// 호이스팅이 일어나지 않아 에러 발생
console.log(helloB()) // Error

let helloB = function () {
	return '안녕하세요.';
}

 

---

 

화살표 함수

함수 표현식에서 function 텍스트를 생략하고 화살표로 대신하는 방식

 

- 화살표 함수는 익명 함수로만 만들 수 있다.

- 생성자로 사용할 수 없다.

- 스스로의 this, argument를 가지지 않는다.

- 화살표 함수가 어떻게 사용되거나 호출되어도 this는 바뀌지 않는다.

- return 하지 않아도 값이 반환된다.

 

💡 화살표 함수는 스스로의 this 를 가지지 않는다.

화살표 함수에서의 this는 Lexical this 로, 렉시컬 컨텍스트 안의 this값을 가리킨다.

즉, 자신이 정의된 스코프 안에 존재하는 this를 가리킨다.

그러므로 우리는 객체의 메소드를 화살표 함수로 정의하면 안된다.

// 호이스팅이 일어나지 않아 에러 발생
console.log(hello ()) // Error

let hello = () => {
	return '안녕하세요.'
};

// return 이 하나만 있다면 아래처럼 중괄호{} 생략 가능
let hello = () => '안녕하세요';

let hello = {
  text : '안녕하세요.',
  helloFunc: function(){
    console.log(this.text); // '안녕하세요.'
    
    setTimeout(() => {
      console.log(this.text); // '안녕하세요.' ==> 여기서의 this는 상위 스코프(hello) 안에 존재하는 this를 가리킨다.
    }, 1000)
  }
}

hello.helloFunc();