[Javascript/자바스크립트] 함수 선언식 vs 함수 표현식 vs 화살표함수 (+ 그외)

 

함수정의방법은 크게 3가지로 구분할 수 있다.

함수 선언식 vs  함수 표현식 vs 화살표함수

오늘은 각각의 함수정의방법에 대해 알아볼 예정.

---

함수선언식

• 일반적인 프로그래밍 언어에서의 함수 선언과 비슷한 방식.
• 변수 선언을 let / const 등으로 시작해야하는 것 처럼 함수 선언은 function으로 시작.
• 선언 된 함수는 나중에 사용될 것을 위해 저장되며 call 될 때마다 실행된다.
• 함수 실행시 함수의 이름을 호출하면 된다.

function test(){
  alert("함수선언식입니다.");
}

 test();// 함수실행

 

• 함수 호이스팅 발생.
• 런타임 이전에 함수 객체가 생성이 되므로 함수가 정의되기 전에 함수를 호출할 수 있다.

test(); 
// 선언 전에 호출되도 정상 동작

function test() { 
	return 1; 
}

• 함수 호이스팅은 함수를 사용하기 전에 반드시 함수를 선언해야한다는 규칙을 무시하므로 함수 표현식을 권장.

 

---

 

함수표현식

• 유연한 자바스크립트 언어의 특징을 활용한 선언 방식.
• 함수 표현식이 변수에 저장이 되면, 변수는 함수처럼 사용이 가능하다.
• 변수에 저장된 함수는 함수명이 따로 필요 없으며, 변수 이름을 통해서 호출한다.
• 변수를 선언하고 해당 변수에 함수를 할당하는 형태. 

var test = function (){
  alert("함수표현식입니다.");
}

• 함수 호이스팅 X, 변수 호이스팅 발생. (인터프리터가 해당 코드 줄에 도달할 때만 로드)

---

[※ 함수 호이스팅의 예]

작성한 코드 ↓

test();

var test = function() { 
	alert("test"); 
}

 

실제 자바스크립트가 실행하는 코드↓

var test; //함수 표현식의 변수 선언부

test(); // error.

  test = function() { //함수 표현식의 할당부분은 원래 자리로
  alert("test"); 
}

 

• 함수선언식보다 깔끔하고 가독성이 높은 코딩을 하게 함.
• 클로져로 사용될 수 있다.
• 콜백으로 사용될 수 있다. (다른 함수의 인자로 넘길 수 있음)
• 즉시 실행함수(IIFE)로 사용될 수 있다.

 

※ 클로저(closure)란?

• 내부함수가 외부함수의 맥락에 접근할 수 있는 것. 
• 선언된 환경이 아닌 곳에서 호출되었을 때 선언된 환경에 접근할 수 있는 함수.

---

 

화살표함수

 

---

 

그외, 생성자로 호출하기

• 문자열로 함수body를 작성해야 하기 때문에 불편하여 거의 사용하지 않음.

var test = new Function("str", "console.log('test')");

 

 

 

---

출처 및 참고 

• https://ojava.tistory.com/145
• https://dc2348.tistory.com/18
• https://chlolisher.tistory.com/117
• https://velog.io/@seeh_h/%ED%95%A8%EC%88%98-%EC%84%A0%EC%96%B8%EC%8B%9D-vs-%ED%95%A8%EC%88%98-%ED%91%9C%ED%98%84%EC%8B%9D
• https://velog.io/@bisu8018/%ED%95%A8%EC%88%98-%ED%91%9C%ED%98%84%EC%8B%9D-VS-%ED%95%A8%EC%88%98-%EC%84%A0%EC%96%B8%EC%8B%9D
• https://joshua1988.github.io/web-development/javascript/function-expressions-vs-declarations/#%EC%9D%B4%ED%95%B4%EA%B0%80-%EC%9E%98-%EC%95%88%EB%90%98%EC%8B%9C%EB%82%98%EC%9A%94-%EB%B0%A9%EC%86%A1%EC%97%90%EC%84%9C-%EC%A7%81%EC%A0%91-%EB%AC%BC%EC%96%B4%EB%B3%B4%EC%84%B8%EC%9A%94-