함수와 호이스팅

함수(Function)란?

• 자바스크립트에서 함수는 다른 객체처럼 속성 및 메서드를 가질 수 있기에 일급(first-class) 객체
• 값은 함수에 전달될 수 있고 함수는 값을 반환

일급 객체 First Class Object

일급객체는 조건이 필요하다.

• 변수(variable)에 저장할 수 있다.
• 인자(parameter)로 전달할 수 있다.
• 반환값(return value)으로 전달할 수 있다.
• 자료구조(data structure)에 저장할 수 있다.
• 런타임(runtime) 생성이 가능하다.
• 익명(anonymous)으로 생성이 가능하다.

함수의 형태

모든 언어에는 문법이 있고 쓰는 방법이 있다.
자바스크립트에서 함수는 아래와 같은 방식으로 쓰인다.

//함수선언식
function funcName(){}
//함수표현식
const func = function(){}

함수선언식과 함수표현식

함수선언식(Function Declaration)

• funtion 함수이름(매개변수){로직} 형태
• 함수를 선언하여서 쓰는 형태
• 자바스크립트 인터프리터가 스크립트가 불러오는 시점에 바로 함수를 저장한다.
• 스크립트가 불러오는 시점에 저장되므로 호이스팅이 발생한다.
• 함수이름(매개변수) 로 호출해주어야 실행이 된다.

함수표현식(Function Expressions)

• var 변수이름 = funtion 함수이름(매개변수){로직} 형태
• 함수를 변수에 답아서 표현한 형태
• Function Literal(함수 리터럴)로 실행가능한 코드로 해석되어지거나 데이터구조로 할당되어진다.
• 호출을 따로 하지않아도 바로 해석과 동시에 실행된다.(자가호출함수)
• 호이스팅이 불가능하다.

다른형태의 표현식

위의 두가지 경우 제외하고 다른 함수형식의 선언식과 표현식이 존재한다.

//익명 함수표현식(Anonymous Function Expression)
var func = function() {
    /* 함수안의 내용 */
};

//기명 함수표현식(Named Function Expression)
var func = function func() {
	/* 함수안의 내용 */
	/* 특이점 : func안의 function func() 내부에서만 쓰일 수 있다.(재귀함수) */
}

//익명 즉시실행함수(Immediately-invoked Function Expression)
(function(){
	/* 함수안의 내용 */
})

//익명 즉시실행함수(Immediately-invoked Function Expression)
//더글라스 클락포드가 권장하는 표기법
(function(){
	/* 함수안의 내용 */
}())

//기명 즉시실행함수(Named Immediately-invoked Function Expression)
(function func(){
	/* 함수안의 내용 */
})

호이스팅(Hoisting)이란?

• global에 선언된 변수 또는 함수를 최상의 Scope로 끌어올리는 것
• 함수선언으로 된 구문은 자바스크립트엔진이 바로 해석하여 최상위로 끌어올려진다.
• 함수표현으로 된 구문은 런타임과정을 가지기 때문에 hoisting되지 않는다.

함수선언식과 표현식 그리고 호이스팅

function func(){
	function inner(){
		console.log('hello')
	}
	return inner()
	function  inner(){
		console.log('bye')
	}
}

함수선언식으로만 구성되어진 이 소스에서는 return inner() 이 반환되면 항사 bye만 찍히는 모습을 볼 수가 있다.
그리고 return inner() 을 어디로 놔두어도 똑같이 bye만 찍히며 함수선언식의 특징인 호이스팅의 모습을 보여주고 있다.

function func(){
	var inner = function(){
		console.log('hello')
	}
	return inner()
	var inner = function (){
		console.log('bye')
	}
}

함수표현식으로 구성되어진 이 소스는 return inner() 이 반환되면 항사 hello만 찍히는 모습을 볼 수가 있다.
그리고 return inner() 을 var inner 위치에 따라서 다른 내용을 보여준다.

뒷이야기

함수와 호이스팅에 대해서 공부하면서 자바스크립트의 Statements와 Expressions에 대한 내용들을 많이 보게되었다. 호이스팅만 생각 할 수 있지만 함수와 호이스팅 그리고 변수는 뗄래야 뗄 수 없는 부분같다.