[JavaScript] 함수

자바와 비교했을 때 리턴 타입, 매개변수, 사용 부분이 다르다.

 

함수의 역할

 

1. 일반적인 호출 가능한 형식으로서의 함수(일반적인 함수 역할)

    

2. 값으로서의 함수(함수객체): 변수에 할당 가능
                                       다른 함수의 인자로 전달 가능
                                       다른 함수의 반환값(return)으로 사용 가능
   
   

3. 다른 객체(인스턴스)를 생성할 수 있는 함수: 생성자 함수라고 함, new 이용

 

---

함수를 정의하는 방법 3가지

 

1. 선언적 정의 방법(이름 있는 함수)

function 함수명(매개변수1, 매개변수2,..){
	문장;
	return 리턴값;
}

함수는 프로그램의 파싱(컴파일) 단계에서 생성되므로, 함수 정의 전에 호출이 가능하다.

 

 

2. 함수 리터럴(익명 함수)

var 변수명 = function(매개변수1, 매개변수2,...){
	문장;
	return 리턴값;
}

 

변수명이 함수명이 된다.

함수가 프로그램 실행 단계에서 생성되므로, 함수 정의 전에 호출 불가능하다.

 

예)

func(); // 함수 정의 전에 호출했으므로 에러
var func = function(){
	...
}

 

 

 

3. Function 생성자 이용

var 변수명 = new Function(인자1, 인자2,.. 함수본체코드);

인자를 여러 개 설정할 수 있다. 마지막 인자의 위치에는 함수에서 실핼될 실행코드를 적는다.

함수가 프로그램 실행 단계에서 생성되므로, 함수 정의 전에 호출 불가능하다.

예)

var result = func(1, 2); //에러(함수 정의 전에 호출 불가능)

var func = new Function("x", "y", "return x + y"); //Function 뒤에서 문자열로 인자 전달

---

 

함수의 매개변수와 인자

• 함수를 호출할 때 전달하는 인자의 개수가 함수에서 정의된 매개변수의 개수와 달라도 호출 가능하다.
  (자바스크립트는 메소드 호출 시 파라미터의 개수를 체크하지 않음)
  
  

  

        위 캡처 화면에서 printWebTech() 함수의 매개변수를 하나로 지정했지만,
        넘겨주는 인자값을 작성하지 않거나 여러 개로 작성해도 모두 호출 가능하다.(line10~12)

        다만 인자값을 주지 않으면 undefined가 출력되고, 인자를 여러 개 넘기면 가장 처음 값만 출력된다.(line 12)

 

• 함수를 쓸 때, 괄호를 붙여 "함수명();"으로 쓰면 함수를 호출해 함수의 리턴값을 가져 온다. (line 13)
  괄호 없이 "함수명"만 쓰면 함수 자체를 변수나 인자 등에 저장한다. (line 12)
  
  

 

 

• 내장변수 arguments
  함수 호출 시 전달되는 파라미터를 모두 출력할 때, arguments 함수 내에서 자동 생성되는 내장변수를 사용할 수 있다.
  arguments 내장변수는 넘어오는 파라미터를 배열로 관리한다.
  파라미터의 개수는 arguments.length 로 얻을 수 있으며, 요소 접근은 arguments[index]로 접근 가능하다.
  
  

 

• arguments.callee는 현재 실행되고 있는 함수를 나타낸다.
  재귀 호출 시 사용 가능하다.
  
  
  - 일반적인 함수를 사용한 예
  
  
  
  
  - arguments.callee를 사용해 재귀 호출하는 예
  
  

---

 

고급 함수 형태 2가지

중첩 함수

 

1) 익명함수 형태

 

 

2) 선언적 함수 형태

 

 

중첩함수의 특징은 외부에서 내부에 정의된 변수에 접근 가능하다는 것이다.

내부 함수는 외부에서 접근 불가한 내부 변수에 접근할 수 있다는 점을 이용해 객체지향의 은닉화(encapsulation) 기법을 적용할 수 있다.

---

콜백 함수

특정 함수를 호출할 때 트리거(trigger) 형태로, 자동으로 다른 함수를 호출하는 형태의 함수이다.

 

콜백 함수는 함수 호출 시, 콜백함수값을 인자로 같이 전송하여 구현할 수 있다.

콜백함수 구조는 이벤트 처리 시 자주 사용된다.

---

 

유틸리티 함수

• alert 함수: 화면에 경고창을 보여줄 때 사용
  
  

  

• prompt 함수: 화면에서 문자 입력 시 사용

• setTimeout 함수: 일정 시간에 함수를 단 한번 실행한다.

setTimeout(function(){
	console.log("3초 후 출력");
}, 3000);

• setInterval 함수: 일정시간마다 반복해서 함수를 실행한다.
  
  

  

• 문자열 -> 숫자, 실수로 변환

var num = parseInt("123"); //문자를 숫자로 변환
var f = parseFloat("3.14"); //문자를 실수로 변환

---

 

이벤트 처리

 

1. 어떤 이벤트가 발생했는가? click, keyboard 등

2. 이벤트 발생 시 어떤 동작을 할 것인가? 함수 구현 or 함수 호출

'click' 버튼을 누르면(click 이벤트 발생) xxx()함수가 호출된다.

이벤트 처리 화면1

화면에 "document Hello", 콘솔창에 "Hello"가 출력된다.

이벤트 처리 화면2