[JS] 함수 생성 방법: 함수 표현식, 함수 선언, Hoisting

인사이드 자바스크립트 책을 보고 정리한 내용입니다.

📎 함수 생성 방법

• 함수 표현식 (Function Expressions)
• 함수 선언식 (Function Statement)
• Function 생성자를 이용한 방법

자바스크립트에서 함수를 만드는 방법은 크게 함수 표현식을 이용하는 방법, 함수 선언 방법이 있다.
두 방법은 함수의 이름과 호이스팅의 관점에서 차이가 있다. Function 생성자를 이용한 방법은 거의 사용되지 않는다.

함수 선언문 Function Statements

greet();
// 함수 선언
function greet(){
	console.log('hi');
}

• 함수 선언 방식은 함수 리터럴 형식과 같다.
• 함수 선언문은 반드시 함수 이름이 명시되어 있어야 한다.
• 함수 이름으로 함수를 호출한다. ex) greet();

함수 표현식 : Function Expressions

자바스크립트에서 표현식이란, 값을 반환하는 식 또는 코드이다.

const sayHello = function(){ console.log('hello') };

• 함수 리터럴로 생성한 함수를 변수에 할당하는 방법을 함수 표현식이라고 한다. 함수의 참조값이 sayHello라는 변수로 저장된다.
• 위의 예에서 sayHello는 함수의 이름이 아니다. function은 익명함수이고 함수 변수인 sayHello를 통해 호출할 수 있다 ex) sayHello();

함수 표현식과 함수 선언의 차이점 : 호이스팅

sayHi(); // 'hi'
sayHello() ; // what?? 그런 함수 없어

var hi ='hi';
function sayHi(){ console.log('hi') }
var sayHello = function(){ console.log('hello') };

결론, 함수 표현식은 호이스팅이 되지 않고 함수 선언으로 선언된 함수는 호이스팅 된다. 즉 함수가 정의되기 전에 함수를 호출할 수 있다.

Hoisting의 개념: 자바스크립트 엔진이 script 태그를 만나면 자바스크립트 파일을 먼저 쭉 읽으면서 선언된 변수와 함수를 메모리에 저장한다. 위의 코드를 예로 들면 먼저 변수 hi와 sayHi 함수(전체), sayHello 변수가 메모리에 저장되는 것이다. 이 과정이 끝나면 코드가 위에서 부터 차례대로 실행되는데 sayHi() 함수의 경우 메모리에 저장되어 있기 때문에 문제없이 실행되지만 sayHello의 경우 아직 값이 할당되기 전이기 때문에 에러가 발생한다.

때문에, 함수 선언으로 생성된 함수는 함수가 정의되기 전에 실행이 가능하며 함수 표현식은 그렇지 않다.

이러한 함수 호이스팅은 함수를 사용하기 전에 반드시 함수를 선언해야한다는 규칙을 무시하므로 코드 구조를 엉성하게 만들 수 도 있으므로 함수 표현식을 권장한다고 한다. 이러한 내용은 구글에서 만든 자바스크립트 스타일 가이드에도 나와있는데 여기는 함수 표현식도 bad이며 함수 이름이 있는 함수 표현식을 권장한다.

🙇🏻‍♀️ 참고 : Function declaration hoisting

함수 관련

함수의 Parameter , Argument

function greet(name){
	console.log('Hello' + name);
}
greet('John');

• function greet(name){..} 에서 name은 parameter
• greet('John')에서 'John'은 argument

parameter는 함수를 선언할 때 쓰는 것이고, argument는 해당 parameter에 들어가는 실제 값을 의미한다.

• 자바스크립트에서 변수의 defalut 값은 undefined 이다.

함수 표현식과 선언에서 세미콜론

함수 표현식에서는 세미콜론 사용, 선언에서는 ; 사용하지 않는다.

참고 자료

• 자바스크립트 함수 (1) - 함수 객체, 함수 객체 생성
• Function Declarations(함수선언) vs Function Expressions(함수표현)