[Javascript] 함수 생성 방식과 호이스팅

1. 함수 리터럴

- 4가지 구성요소를 가진다.

1) function키워드 2) 함수명(선택사항) 3) 매개변수 리스트 4) 함수 몸체(함수 호출시 실행되는 부분)

function add(x,y){ return x+y; }

 

2. 함수 선언문 방식으로 함수 생성하기

- 함수명 정의 필수.

 

3. 함수 표현식 방식으로 함수 생성하기

1) 함수 리터럴로 하나의 함수를 만들고,

2) 생성된 함수를 변수에 할당하여 함수를 생성

var add = function(x,y){ return x+y; }

 

4. 함수 호이스팅

• 함수 안에 있는 변수 선언과 함수 선언을 함수 유효 범위 최상단으로 끌어 올리는 것
• 함수 선언문은 호이스팅에 영향을 받지만, 함수 표현식은 영향을 받지 않는다.
• 함수 선언문은 호이스팅에 의해 브라우저가 자바스크립트를 해석할 때 코드 상단으로 끌어올려진다.
• 특히 var로 선언한 변수의 경우 스코프가 {}이 아닌 function이므로 변수가 {} 밖에서도 변경되거나 덮어 써진다. 이로 인해 ES6이후 문법에서는 var보다 let, const를 사용해서 보다 명확한 코드를 만드는 것을 권장한다.

호이스팅 우선순위

• var변수 선언이 함수 선언보다 위로 끌어올려진다.
• 값이 할당되지 않은 변수의 경우, 함수선언문이 변수를 덮어쓴다.
• 값이 할당된 변수의 경우, 변수가 함수선언문을 덮어쓴다.

Reference

• 인사이드 자바스크립트 4장
• https://gmlwjd9405.github.io/2019/04/22/javascript-hoisting.html