[JavaScript] 함수(Function) / 선언함수와 익명함수 / 화살표함수

함수(Function) 

 

함수는 매개변수로 값을 전달받아 가공처리하여 결과값을 반환하는 기능을 제공한다.
자바스크립트에서는 함수를 선언해야지만 함수를 호출하여 함수에 작성된 명령을 실행해 결과값을 반환받아 사용할 수 있다.

자바스크립트에서는 함수 선언방법에 따라 선언함수와 익명함수로 구분할 수 있다. 

선언함수는 함수명을 명시하여 선언하는 함수이고, 익명함수는 함수명을 명시하지 않고 선언하는 함수이다.

 

---

선언함수

함수명을 명시하여 함수를 선언한다. 여기서 함수명은 함수를 구분하기 위한 식별자를 뜻한다.

형식) function 함수명(매개변수, 매개변수, ...) { 명령; 명령; ... }

 

→ 함수명은 내부적으로 변수로 처리되어 선언함수를 값으로 저장한다. (함수명에 함수가 저장된다.) 

 

function display() {
		alert("선언함수의 명령 실행");
	}

 

 

함수명을 이용하여 선언함수를 호출할 수 있다.
이 때 선언함수는 한번만 호출할 수 있는것이 아니라, 필요할 때 마다 반복 호출이 가능하다.

형식) 함수명(값, 값, ...)

 

display(); //함수 호출 - 함수에 작성된 명령 실행 
display(); //반복 호출 가능

 

typeof를 이용해 함수의 자료형 출력할 수 있다.

alert(typeof(display)); //function - 함수형

 

아래의 경우 함수명에 저장된 선언함수가 출력된다. 

alert(display); //함수명 출력

---

익명함수

함수명을 명시하지 않고 함수를 선언한다.

형식) (function(매개변수,매개변수,...) { 명령; 명령; ... })(값, 값, ...);

→ 익명함수는 함수를 선언하고 바로 함수를 호출하여 사용한다. 익명함수는 한번만 호출할 수 있다.

 

익명함수는 선언하자마자 호출을 해야한다.

(function() {
	alert("익명함수의 명령 실행");
})(); //익명함수의 명령 실행

 

함수는 내부적으로 값으로 처리되기 때문에 변수에 저장이 가능하다. 

이에 따라 변수에 익명함수를 저장해 사용할 수 있는데 이를 함수변수라고 한다.

var display=function() {
	alert("익명함수의 명령 실행");
}

 

함수변수는 선언함수의 함수명과 동일한 역할을 수행할 수 있다.  따라서 함수변수를 이용하면 익명함수를 반복 호출할 수 있다.

형식) 함수변수명(값, 값,...);

 

display();//함수호출 
display();//반복호출 가능

alert(typeof(display)); //function - 함수형 
alert(display); //함수변수값 출력 - 함수변수에 저장된 익명함수 출력

---

선언함수와 익명함수의 차이점?

 

선언함수는 자바스크립트 명령 실행전에 선언된다. 따라서 함수 선언 명령 전에 함수를 호출하는 것이 가능하다.

display();//함수 선언 전 함수 호출 - 가능 
	
function display() {
	alert("선언함수의 명령 실행");
}
	
display();//함수 선언 후 함수 호출 - 가능

 

익명함수를 선언하여 변수에 저장하게 되면 명령으로 처리되어 함수 선언 전 호출이 불가능하다. 

display(); //함수 선언 전 함수 호출 - 불가능 : 에러발생 
	
var display=function() {
	alert("익명함수의 명령 실행");
}
	
display(); //함수 선언 후 함수 호출 - 가능

 

선언함수도 익명함수와 마찬가지로 변수에 저장하는 것은 가능하지만, 함수명으로 함수 호출하는 것이 불가능하기 때문에 함수변수를 이용하여 함수를 호출해야 한다. 

var display=function printf() {
	alert("선언함수의 명령 실행");
}

printf();//에러 발생
display();

 

---

화살표함수

ES6에서는 람다 표현식을 이용한 화살표함수가 추가되었다. 
화살표함수를 사용하면 코드를 간결하게 표현할 수 있어 가독성이 증가된다.

 

형식) (매개변수, 매개변수) => { 명령; 명령; ... }

 

함수에 작성된 명령이 하나인 경우 { } 기호를 생략할 수 있다.
변수에 화살표 함수를 저장하고 변수를 이용하여 함수를 호출한다. 
매개변수가 여러 개인 경우 소괄호를 묶어주는데, 한 개인 경우엔 생략이 가능하다. 단, 매개변수가 없는 경우에는 생략이 불가능하다.

 

const display = () => { alert("화살표함수의 명령 실행"); }
	
display(); //함수호출

 

명령이 하나일 때는 { } 생략이 가능하다.

const display = () => alert("화살표함수의 명령 실행");

 

화살표 함수의 의의

화살표 함수는 일반 함수와 달리 프로토타입 객체를 생성하지 않으므로, 메모리 관점에서 더 유리하다. 
프로토타입 객체를 생성하지 않는다는 것은, 화살표 함수로 정의한 함수는 오직 함수로만 호출해야 한다는 의미이다.
이는 사용자로 하여금 실수와 혼란을 방지할 수 있도록 만든다는 점에서 의의가 있다.

출처: https://velog.io/@dosomething/%ED%99%94%EC%82%B4%ED%91%9C-%ED%95%A8%EC%88%98