[Javascript] 자바스크립트 함수 [함수 호이스팅 hoisting]

함수는 자바스크립트 뿐만 아니라 모든 프로그래밍 언어에서 자주 사용하는 개념입니다. 함수란 프로그램의 코드를 저장한 공간이라고 할 수 있습니다. 자바스크립트에서 데이터를 저장할 때 변수를 선언하여 저장하는데 변수에는 데이터만 저장할 수 있고 코드는 저장할 수 없습니다. 하지만 함수를 사용하면 코드를 메모리에 저장했다가 필요할 때마다 호출해서 사용할 수 있습니다.

 

변수	함수
- 1개의 데이터만 저장 - var라는 키워드를 이용하여 선언 - 문자형, 숫자형, 논리형 데이터를 보관 - 객체를 참조함	- 자바스크립트 코드를 저장 - function이라는 키워드를 이용하여 선언 - 출력문, 제어문 등의 코드를 저장하고 데이터를 반환

 

 

• 함수

1) 내장함수 - 만들어져 있는 명령어

2) 사용자 정의 함수 - 만들어서 사용하는 명령어

 

 

• 사용자 정의 함수

1. 사용자가 임의로 생성한 함수

2. 선언문 : function   ('브라우저야 이거 내가 만든 명령어야..!')

3. 기본형

function 함수명(매개변수, 매개변수 ...){
  실행문
  실행문
  .
  .
}

4. 호출 시에만 실행

5. 사용자 정의 함수 호출방법

 - 단독 실행 (명령어의 이름만 쓰는 것)

 - 변수에 의한 실행

 - 다른 함수에 의한 실행

 - 이벤트에 의한 실행 (사용자정의함수와 이벤트는 단짝. '사용자정의함수를 만든다=이벤트를 실행한다'일 정도로 단짝)

6. 함수명 규칙: 변수명 규칙과 동일

 

 

• 함수 정의문

함수를 사용하여 코드를 저장한 것을 '함수 정의문'이라고 합니다. 변수를 선언할 때 var키워드를 사용한 것처럼 함수에서는 function키워드를 사용해 변수를 선언합니다.

function 함수명( ){
  자바스크립트 코드;
}

다음과 같이 익명 함수(함수명이 없는 함수)를 선언하고 변수에 참조할 수도 있습니다.

참조 변수 = function( ){
  자바스크립트 코드;
}

 

함수 정의문({...})안에 작성된 코드는 즉시 실행되지 않습니다. 함수는 메모리에 할당되어 대기하고 있다가 함수가 호출되면 실행됩니다. 정의되어 있는 함수를 호출하는 방법은 다음과 같습니다.

함수명( );
또는 참조 변수( );

 

 

 

• 매개변수가 있는 함수 정의문

기본 함수 정의문은 함수 안에 있는 코드를 실행할 때 단순히 함수명으로 호출해서 코드를 실행했습니다. 즉, 함수를 호출할 때 값을 전달할 수 없었습니다. 하지만 매개변수가 있는 함수 정의문은 함수를 호출할 때 전달하고자 하는 값을 입력하여 호출할 수 있습니다. 이렇게 전달된 값은 매개변수가 받아 함수 정의문에서 사용할 수 있게 됩니다.

function 함수명(매개변수1, 매개변수2, ... 매개변수n) {
  자바스크립트 코드;
}

함수명(데이터1, 데이터2, ... 데이터n);

함수를 호출할 때 데이터1은 매개변수1에 저장되고, 데이터2는 매개변수2에 저장됩니다. 데이터n은 매개변수n에 저장됩니다.

 

*매개변수

매개변수라는 개념이 확 와닿지 않을 수 있습니다. 변수랑 매개변수는 무엇이 다른가? 

function testFunc(msg){
  alert(msg);
}

위에서 function에 있는 변수는 alert에 값을 전달만 해줄 뿐 직접적으로 사용되지 않습니다. 반면 alert안에 있는 변수는 직접적인 사용이 목적이기 때문에 값이 쓰이지요. function안에 있는 변수처럼 직접적인 사용의 목적이 아니라 연결이나 전달을 하는 매개체 역할을 해주는 변수를 '매개변수' 라고 합니다. function에 있는 변수가 대신 값을 받아다가 전달해주는 중간에서 매개체 역할을 하는 것이지요.

 

 

• 호이스팅

호이스팅의 사전적 의미는 '물건을 끌어올리다' 입니다. 
호이스팅(hoisting)이란, 변수가 선언되기 이전에 변수를 사용하면, 변수가 사용된 블럭 범위의 맨 위로 변수를 끌어올려서 undefined를 할당한다는 것입니다. 함수 호이스팅은 함수를 선언하기 전에 함수를 사용할 수 있도록 함수선언이 코드블럭 최상단으로 끌어올려지는 것입니다.

 

• 일반 함수 정의 방식과 익명 함수 선언 참조 방식의 차이점

일반 함수 정의는 함수 호출 시 호이스팅(hoisting) 기술을 지원합니다. 그러나 익명 함수 선언 참조 방식은 호이스팅을 지원하지 않습니다. 호이스팅을 적용하면 함수 정의문보다 호출문이 먼저 나와도 함수 정의문을 끌어올려 함수를 호출합니다.

일반 함수 정의 방식 (정상 작동)	익명 함수 선언 참조 방식 (오류 발생)
ⓐ testFnc( );               //호이스팅(hoisting) ⓑ function testFnc( ){   ⓒ 자바스크립트 코드; }	ⓓ testFnc( ); ⓔ var testFnc = function ( ) {   ⓕ 자바스크립트 코드; }