자바스크립트: 함수 선언, 표현, 콜백

 

함수의 기본

 

- 정의: 프로그램을 구성하는 주요 구성 요소로, 유사한 동작을 하는 코드를 중복 코드 없이 간편하게 호출하기 위한 장치

 

- 함수 선언(function declaration) 문법: function 키워드, 함수 이름, (매개변수parameter) { 함수 본문 } 

 

- 호출: 함수 선언 이후 함수 이름 옆에 괄호 ()를 붙여 호출

 

- 변수: 함수 내에서 선언한 변수는 지역 변수(local variable)로, 외부 변수(outer variable)과 달리 함수 밖에서 접근 불가능. 외부 변수는 전역 변수(global variable)로 더 흔히 불리는데, 모든 함수에서 접근 가능하다. 전역 변수는 최소한으로 사용하는 것이 좋다.

 

- 함수 내에서 외부 변수와 동일한 이름의 지역 변수를 선언할 경우, 지역 변수 > 외부 변수. 

 

- 매개변수를 사용할 경우, 함수를 호출할 때 ( ) 안에 인자를 삽입하면 이 인자는 지역변수parameter에 복사 -> 함수에 의해 사용됨

이 때, 함수는 복사된 값을 사용하기 때문에 변수를 변경해도 원 변수에 반영되지 않는다.

 

- 매개변수가 있는 함수에 인수를 설정하지 않으면 (기본값 default value 없을 시) undefined가 호출, 에러가 발생하지 않음.

기본값은 매개변수에 = " " 를 덧붙여서 설정할 수 있다. 기본값에 함수를 설정할 수도 있다.

function showMessage(from, text = "no text given") {
  alert ( from + ": " + text);
}

showMessage("Ann"); // Ann: no text given

- 기본값은 if 문, | | , ?? 를 사용하여 함수 실행 도중 설정할 수도 있다. (매개변수가 비어있을 경우 실행되게 설정)

 

- Return 디렉티브는 함수를 중지하고 값을 반환한다. 

 

- 자바스크립트는 return 이후 자동으로 세미콜론을 넣기 때문에 return 후 줄을 띄어쓰면 안 된다.

 

 

 

함수 선언식과 표현식

 

- 함수 표현식: 자바스크립트는 함수를 동작이 아닌 값으로 취급하므로, 일반 변수를 선언하며 변수에 할당하는 방식으로 함수 생성 가능. (표현식 Function Expression)

 

- 선언식으로 함수 생성 후, 타 변수에 할당 = 복사하여 그 변수에 () 붙이면 함수 호출. 복사이므로 원 함수도 그대로 사용 가능하다.

 

- 변수 = 함수 ()를 할당하면 함수 실행 후 결과값이 저장된다.

 

- 선언식 vs 표현식:

 

1) 선언식은 별도 구문, 표현식은 구문 내부 (= 할당자 옆 우측)에 생성. 따라서 그 구문을 끝내기 위해 ;를 붙인다.

 

2) 선언식은 스크립트 실행 전 초기화 단계에서 생성, 함수 표현식은 스크립트가 실행되면서 그 구문 ( = 우측 ) 차례까지 도착하면 생성. 자바스크립트 내부 알고리즘에 의해 스크립트 실행 전 선언된 함수를 찾아 생성하기 때문. 따라서 함수 선언식 전에도 해당 함수를 호출하여 생성할 수 있다.

 

3) 코드 블록 내에 (ex. if 구문 안) 함수가 위치할 경우, 코드 블록 밖에서 함수를 호출하려면 구문 밖에서 전역 변수를 생성, 함수 표현식으로 함수를 할당해주면 된다.

 

 

 

콜백 함수

 

- 별도 함수이지만 한 함수의 파라미터로 처리되어, 그 함수 내에서 Call back 하여 쓰이는 함수. 

function ask(question, yes, no) {
  if (confirm(question)) yes()
  else no();
}

function showOk() {
  alert( "동의하셨습니다." );
}

function showCancel() {
  alert( "취소 버튼을 누르셨습니다." );
}

// 사용법: 함수 showOk와 showCancel가 ask 함수의 인수로 전달됨
ask("동의하십니까?", showOk, showCancel);

vs 익명 함수 (anonymous function): 함수 내에서 그 함수를 위해 만들어진 이름 없는 함수로, 그 함수 바깥에서 쓰일 수 없다.

function ask(question, yes, no) {
  if (confirm(question)) yes()
  else no();
}

ask(
  "동의하십니까?",
  function() { alert("동의하셨습니다."); },
  function() { alert("취소 버튼을 누르셨습니다."); }
);