[ Javascript ] 함수, 익명함수, 선언적 함수

함수란 ?

코드를 묶고 이름을 붙여 쉽게 재사용 할 수 있게 만든 것을 함수라고 합니다.

 

용어

• 호출 : 함수 내부의 코드를 실행하는 것을 호출이라고 표현합니다.
• 매개변수 : 함수에 자료 값을 넘기기 위해 사용하는 것을 매개변수라고 합니다.
• 리턴 : 함수를 실행한 결과로 나오는 것을 리턴이라고 합니다.
• 콜백 함수 : 함수의 매개변수로 함수를 전달할 때, 해당 함수를 콜백 함수라고 합니다.

 

---

 

익명 함수

익명함수는 함수 리터럴 방식으로 만들어진 이름이 없는 함수 입니다.

:: 함수 리터럴 = 이름이 붙어 있지 않은 자료를 의미합니다.

 

익명 함수 형태

var 함수 = function() {};

함수가 코드의 집합이라 말하는 이유는 괄호 내부에 코드를 넣기 때문입니다.

 

함수 생성과 출력 예

var hello = function() {
    var output = prompt('숫자를 입력하시오.', '숫자');
    alert(output);
}

alert(hello);

위 함수는 아래처럼 출력됩니다. 문자열처럼 보일 수 있지만 함수 자료형입니다.

함수

 

alert(hello);부분을 typeof연산자를 사용해서 출력했을 경우

방금 만든 function() {}형태는 함수지만 이름이 없기 때문에 '익명 함수'라고 부릅니다. 이름이 없기 때문에 변수에 넣어서 사용해야 합니다.

 

자바스크립트에서 함수는 하나의 자료형이지만 여타, 자료형과 다르게 뒤에 괄호를 열고 닫음으로써 코드를 실행합니다.

이렇게 함수를 실행하는 것을 '함수를 호출한다'라고 표현합니다.

 

함수 호출 예

var hello = function() {
    var output = prompt('숫자를 입력하시오.', '숫자');
    alert(output);
}

hello();

 

---

 

선언적 함수

선언적 함수는 익명함수와는 반대로 이름이 있는 함수라고 생각하면 편합니다.

따로 변수에 넣어줄 필요가 없고 선언할 때 붙여준 이름으로 호출을 하면 됩니다.

 

선언적 함수 형태

function 함수() {}

조금의 차이는 있지만 익명함수의 형태와 같은 기능을 수행합니다.

 

선언적 함수의 재정의

function hello() { alert('함수 A'); }
function hello() { alert('함수 B'); }

hello(); // 함수 B

이런식으로 같은 이름으로 선언적 함수를 사용하게 되면 뒤에 위치하는 함수가 실행됩니다.

 

익명 함수의 재정의

var hello = function() { alert('함수 A'); }
var hello = function() { alert('함수 B'); }

hello(); // 함수 B

익명함수 또한 기존의 변수를 덮어씌우므로 뒤쪽에 있는 변수를 사용해서 '함수 B'가 출력됩니다.

 

위처럼 '선언적 함수'와 '익명 함수'를 보면 차이가 없어보입니다. 

 

 

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

 

선언적 함수의 재정의 2

hello(); // 함수 B

function hello() { alert('함수 A'); }
function hello() { alert('함수 B'); }

웹은 script태그 내부의 내용을 한 줄씩 읽기 전에 선언적 함수부터 읽습니다. 따라서 선언적 함수로 실행할 때는 3번째 줄 --> 4번째 줄 --> 첫번째줄 순서로 실행이 됩니다.

 

익명 함수의 재정의 2

hello();

var hello = function() { alert('함수 A'); }
var hello = function() { alert('함수 B'); }

반대로 익명 함수에서 변수를 먼저 사용하면 오류가 발생하여 실행되지 않습니다.

:: 변수를 선언하기 이전에 변수를 사용했기 때문입니다.

 

선언적 함수와 익명 함수의 순서

아래 코드를 실행하면 '함수 A'가 실행됩니다. 선언적 함수가 먼저 생성되고 익명 함수가 나중에 생성되었기 때문입니다.

 

선언적 함수와 익명 함수의 실행 순서 예

var hello = function() { alert('함수 A'); }
function hello() { alert('함수 B'); }

hello(); // 함수 A

실수하는 경우가 은근히 있기 때문에 잘 기억해 두어야 합니다.