[Javascript] 함수선언식, 함수표현식

Javascript 함수란?

• 어떤 목적을 가진 작업들을 수행하기 위해 모인 코드들의 블럭
• 입력 -> 연산 -> return -> 출력 형태를 갖는다.
• 함수는 실제로는 또 하나의 객체(Object)로 변수나 배열에 할당시킬 수 있다.

 

함수를 변수에 할당 시킬 수 있다는 말은 무엇일까?

 

자바스크립트에서 함수를 선언하는 방법에 대해서 알아보자

 

---

함수 선언식

function hello() {
	return "안녕하세요"
}

hello(); // "안녕하세요"

• function 키워드를 사용해 함수를 선언한다
• function 함수명 (파라미터) { return };
• return이 불필요할 땐 생략 가능
• 함수 선언식으로 선언한 함수는 호이스팅이 발생한다. (호이스팅에 대한 설명은 관련 글이 아니기 때문에 생략)

hello(); // "안녕하세요"

function hello() {
	return "안녕하세요"
}

• 호이스팅이 발생한 함수는 함수가 선언된 라인보다 앞에서 해당 함수를 참조해도 에러가 발생하지 않는다.
• 호이스팅 발생 시 함수가 문서의 최상단으로 끌어올려지기 때문이다.
• 따라서, 함수선언식은 코드의 밑바닥에 함수를 모아두어야 할 때 많이 사용한다.

 

 

함수 표현식

let hello = function() {
	return "안녕하세요";
}

hello() // "안녕하세요"

• 함수는 자바스크립트의 비원시적 자료형으로 또하나의 객체(Object)라고 말할 수 있다.
• 함수표현식은 함수를 변수에 할당시켜 선언한 방식이다.
• let/const/var + 변수명(=함수명) = function (파라미터) { return };
• 선언식과 마찬가지로 return은 생략될 수 있다.
• 선언식에서 함수를 선언할 때 function 뒤 함수명이 왔던것과 달리 표현식은 변수명으로 함수명을 대체하고 function 뒤 바로 괄호가 나온다.
• 함수 표현식으로 선언한 함수는 호이스팅이 발생하지 않는다.

hello(); // error

let hello = function() {
	return "안녕하세요";
}

• 호이스팅이 발생하지 않기 때문에 함수가 문서의 최상단으로 끌어올려지지도 않는다.
• 따라서 선언문처럼 함수 선언 전에 참조를 하면 아직 해당 함수가 선언+초기화+할당되지 않은 상태임으로 오류가 난다.

 

함수표현식을 간편하게 쓸 수 있도록 ES6부터 화살표 함수가 도입되었다.

다음 포스팅은 화살표 함수에 대해서 다뤄볼 예정이다.