[javascript] 함수 정의 방법 ( 자바스크립트 함수 생성 )

 

자바스크립트에서 제일 중요한 개념은 함수라고 생각합니다. 

자바스크립트에서 함수를 잘 다루고 활용을 잘한다면 고급 개발자라고 생각합니다.

함수의 기초적인 부분을 이해하지 못한다면, 결코 자바스크립트를 잘 사용할 수 없습니다.

 

 

함수란?

자바스크립트에서 함수는 반복된 코드 실행을 줄여주는 역할을 하고, 재사용성이 좋습니다.

 

함수 정의 방법

1. 함수 리터럴 방식

 

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

 

function : 자바스크립트 함수 리터럴은 function으로 시작합니다.

example : 함수명을 정의합니다.

(x, y) : 매개변수

return x+y; : example 함수가 호출 됐을 때 실행되는 코드 부분입니다.

 

2. 함수 표현식

 

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

var plus = example;

console.log(plus(1,2))	// 3 (출력)

// es6 표현

const example = (x, y) => {
	return x+y;
}

 

plus 변수를 보면 example 함수의 참조값을 가지므로 plus에 그대로 값이 출력되는 것을 알 수 있습니다.

add 함수 변수와 plus 함수 변수가 동일한 익명 함수를 참조합니다.

그래서 결과 값은 example() 함수와 같은 결과 값을 얻을 수 있습니다.

 

3. Function() 생성자 함수

 

var example = new Function('x', 'y', 'return x+y');

console.log(example(3,5) // 8 (출력)

 

 

위와 같은 함수 정의는 자주 사용하진 않습니다.

하지만 함수를 정의하는 방법을 여러가지 알고 있다면 상황에 맞게 사용하실 수 있습니다.

 

함수 호이스팅

예제를 통해서 함수 호이 스팅에 대해서 알아보겠습니다.

 

example(4,4)	// 8 (출력)

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

example(5,5)	// 10 (출력)

 

첫 줄을 보시면 example 함수가 먼저 정의되지 않았음에도

example 함수가 실행되어서 8이 출력이 된 것을 확인할 수 있습니다.

 

그것을 보고 함수 선언문 형태로 정의한 함수의 유효 범위는

코드의 맨 처음부터 시작한다는 것을 확인 할 수 있습니다.

 

그리고 이것을 함수 호이 스팅이라고 부릅니다.

하지만 함수 표현식으로 똑같이 출력한다면 어떤 결과가 나올까요?

 

example(5,5)	// uncaught type error


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

example(4,4)	// 8 (출력)

 

함수 표현식 형태로 정의되어 있는 형태는

함수 호이스팅이 일어나지 않아 타입 에러가 발생하는 것을 알 수 있습니다.

 

이로써 함수 표현식으로 함수 정의가 된 경우에는 함수가 먼저 정의되고 나서

호출이 되어야 정상적으로 값을 출력한다는 것을 알 수 있습니다.

 

이러한 함수 호이 스팅이 발생하는 원인은

자바스크립트의 변수 생성과 초기화의 작업이 분리돼서 진행되기 때문입니다.