Javascript - 함수(Function)의 다양한 정의방법

서론

Javascript에서는 다양한 방법으로 함수를 정의하고 사용할 수 있습니다. 

Javascript문법에 익숙하지 않다면, 워낙 다양한 방법으로 함수를 정의할 수 있기 때문에 혼동되는 부분이 많습니다.

본문에서는 이런 다양한 함수를 정의하는 방법에 대해서 구분하고 알아보도록 하겠습니다.

 

함수(Function)란 무엇인가?

프로그래밍을 배우면 함수, 메서드 등의 다양한 이름으로 이 함수라는 녀석을 듣고, 사용하게 됩니다.

그렇다면 이 함수는 무엇일까? 

 

함수의 개념을 간단히 정의하자면, 특별한 기능을 제공하는 하나의 묶음입니다. 

 

이 함수의 개념이 Javascript안에 적용되면서 Javascript의 함수는 아래와 같은 기능과 특징을 가지게 됩니다.

• 블록단위의 개념이 적용되어, 특정 기능을 수행한다.
• 특정 기능을 수행한 후 반환되는 값이 있을 수 있다.
• 특정 기능을 수행하기 위해 인자값이 있을 수 있다.
• 정의된 함수는 필요한 시점에 호출하여 반복적으로 사용할 수 있다.

이런 기능을 가진 함수를 만들고 사용하려면 다음의 과정이 필요합니다.

• 함수를 정의해야됩니다.
  • 함수의 이름
  • 인자 값(매개 변수) 
  • 반환 값
• 원하는 시점에 함수의 호출 형식에 맞게 함수를 호출해야 됩니다.

소스코드상에서 함수의 형태를 설계(정의)하고, 필요한 부분에서 설계된 함수를 사용(호출)해서 원하는 기능을 동작시키게 됩니다. 

 

함수의 형태

Javascript에서 함수를 정의하는 방법은 다양하지만 기본적인 함수의 형태는 다음과 같습니다.

function 함수이름(인자1,인자2,인자,3){
	
    //기능 수행을 위한 소스코드
    
    return 반환 값
}

function 함수이름2(){
	//기능 수행을 위한 소스코드
}

인자는 없거나 여러 개가 존재할 수 있습니다.

반환 값은 하나만 존재할 수 있습니다.

 

 

다양한 함수의 정의 방법

Javascript에서 함수가 무엇인지, 그리고 대략 어떻게 생겼는지 알았다면, 실제로 함수를 정의하는 방법에 대해 알아보겠습니다. 

Javascript에서는 다양한 방법으로 함수를 정의할 수 있고 각각의 방법마다 특징이 존재합니다.

크게 2가지 방법이 있습니다.

 

• 함수 선언방식 (Function declaration)
• 함수 표현방식 (Function expression)

함수를 정의하는 방식은 크게 선언, 표현 2가지 방법으로 정의할 수 있습니다. 

 

함수 선언방식(Function declaration)

함수 선언 방식은 위의 예제처럼 사용하는 방식입니다.

가장 간단하게 함수를 정의하는 방법이며, 이렇게 정의된 함수는 호이 스팅 됩니다.

 

호이 스팅이 뭔지 모른다면 클릭!

 

• 함수 선언 방식의 예제

//함수의 정의 (선언방식)
function funcA(number){
	console.log(number);
}

//함수 사용
 funcA(10); // 출력 : 10
 
 //호이스팅 확인
 console.log(funcB()); // 출력 : 100  (함수의 정의가 호이스팅으로 사용가능)
 
 //함수의 정의 (선언방식)
 function funcB(){
 	return 100;
 }

예제 소스코드처럼 funcB의 경우 소스코드상 정의되기 전에 funcB를 호출하였지만 호이 스팅이 발생함에 따라 사용 가능합니다.

 

함수 표현방식 (Function expression)

함수 표현방식(이하 표현식)은 함수를 객체의 형태로 정의합니다.

객체로 취급한다는 말은 변수 형태의 표현 방식을 사용할 수 있다는 것입니다.

예제 코드를 몇 개 살펴보죠.

• 함수 표현식 1 - 이름 없는 함수

const funcA = function(){ return 100;};

console.log(funcA.name); // 출력 : funcA (함수의 이름이 자동 생성된다)
console.log(funcA()); // 출력 100

const로 선언한 funA에 아무 이름을 정하지 않은 함수를 정의한다면 funA는 속성으로 이름과 함수를 가지게 됩니다. 

• 함수 표현식 2 - 이름 있는 함수

const funcB = function Int100(){ return 100;};

console.log(funcB.name); // 출력 : Int100 (함수의 이름이 자동 생성된다)
console.log(funcB()); // 출력 100

함수의 이름이 있다면 funB 객체에 저장된 이름 속성은 Int100이며 Int100 함수의 기능을 수행합니다.

• 호이 스팅을 지원하지 않는다

console.log(funcB.name); // Error
console.log(funcB()); // Error

const funcB = function Int100(){ return 100;};

함수 표현식으로 함수를 정의하면 호이스팅을 하지 않습니다.

 

별다른 특징이 없는데?

함수 표현식으로 만드는 함수 객체는 Javascript상에서 일급 객체라고도 불리며 다양한 기능을 지원합니다.

• 변수나 배열의 요소 또는 객체의 속성에 할당이 가능하다.
• 함수의 인자로 전달할 수 있다.
• 함수의 리턴 값이 될 수 있다.

등의 다양한 특징이 있습니다. 이 부분은 다른 포스트에서 조금 더 자세히 다루겠습니다.