함수(Function)

함수란 뭘까요? 학교 수학시간에 배웠던 함수와 비슷합니다.

1  y = f(x)

x에 어떤 값을 넣으면 y가 f(x)에 상응하는 식에 의해 자동으로 나왔죠? 그것과 비슷합니다. 자바스크립트에서 함수는 다음과 같이 만듭(선언)니다.

1  function addOne(x) {
2    var y = x + 1;
3    return y;
4  }

또는 다음과 같이도 만들 수 있습니다. 아래처럼 변수를 선언하고 함수를 대입하는 방식을 함수 표현식이라고 부릅니다. 래와 위의 방식의 차이로는 호이스팅이라는 현상(위의 방식은 함수 선언이라고 부릅니다) 아이 있는데, 나중에 실행 컨텍스트 시간에 설명하겠습니다. 또 다른 차이점은 위의 방식으로 만들 때에는 끝에 ;를 붙이지 않습니다.

1  var addOne = function(x) {
2    var y = x + 1;
3    return y;
4  };

addOne이 함수의 이름(변수의 이름이기도 하고요)이고, x가 사용자가 넣고 싶은 것을 넣는 곳입니다. x를 매개변수라고 하고 영어로는 Parameter라 합니다. 함수 안에는 y라는 변수를 만든 뒤에 x값에 1을 더하라고 되어있습니다. return은 y값을 바깥으로 내보내고 함수를 종료하라는 겁니다. 즉 x값을 받아서 1을 더한 후 바깥으로 내보내라는 거죠. 이것을 반환한다고 표현합니다.
이 함수를 실행하려면 함수의 이름에다 소괄호(())를 붙이고, 괄호 안에 매개변수 x에 상응하는 인자를 넣어주면 됩니다. 이렇게 미리 만들어둔 함수를 실행하는 행위를 호출한다라고 표현합니다. 호출을 통해서 반환하는 값을 저장할 변수를 미리 만들어둡시다. 아래에서는 변수 i에 addOne함수의 반환 값을 저장합니다.

1  var i = addOne(1);
2  i; // 2

1을 넣으면 그 1이 매개변수 x로 전달됩니다. 이제 addOne 함수 내부 코드가 실행되죠. x가 1이니까 y는 2가 되고, return에 의해 y값이 반환(바깥으로 내보내져)되어 i에 y의 값인 2가 저장됩니다. 여기서의 1은 매개변수라고 부르지 않고 인자(Argument)라고 부릅니다. 함수를 선언할 때의 괄호 안의 값은 매개변수(Parameter), 함수를 호출할 때의 괄호 안의 값은 인자(Argument)입니다.

함수 중에는 return을 하지 않는 함수도 있습니다. 첫 시간, 첫 번째 예로 보여드렸던 날짜를 표시하는 프로그램이 바로 그렇습니다.

1  var dateChecker = function() {
2    var date = new Date();
3    alert(date);
4  };
5  dateChecker(); // undefined

와 같이 return이 없는 함수는 자동으로 undefined를 반환합니다. 알림이 뜨는 것은 return과 상관이 없습니다. 알림은 alert(date); 의 결과로써 뜨는 거지 dateChecker의 return에 의한 것이 아닙니다. 대신 알림이 뜬 후에 콘솔 창에 undefined가 표시되는 것을 볼 수 있습니다. 이게 바로 dateChecker 함수의 return 값입니다.
사실 모든 함수는 return을 입력하지 않으면 자동으로 return undefined;가 마지막 코드로써 동작하는 겁니다.
한 가지 더 알아둘 점은 return 이후에는 함수가 종료되기 때문에 실행되지 않습니다. 아래 코드에서는 alert('저는 실행되지 않습니다'); 이 부분이 return보다 뒤에 나오기 때문에 무시됩니다. 그러니까 return 뒤에 코드를 적는 실수를 하지 마세요!

1  var really = function() {
2    return;
3    alert('저는 실행되지 않습니다');
4  };
5  really(); // undefined

이전 시간에 객체나 배열의 값으로 함수도 들어갈 수 있다고 했습니다. 기억나시나요? 자바스크립트에서는 함수도 하나의 값입니다.

1  var a = {
2    b: function() {
3      return;
4    }
5  };

위의 경우에 속성 b의 값은 함수입니다. a.b(); 와 같이 하면 함수를 호출할 수 있습니다. 전 시간에 이렇게 속성의 값으로 사용되는 함수를 메소드라고 부른다고 살짝 알려드렸습니다.
조금 더 어려운 경우를 살펴보겠습니다.

1  var mother = function(func) {
2    func();
3  };
4  var children = function() {
5    alert('안녕하세요');
6  };
7  mother(children); // '안녕하세요'

mother과 children 함수를 만들었는데 mother 함수를 호출할 때 인자로 children 함수를 넣었습니다. 함수의 반환값이 아니라 함수 자체를 넣은거죠. 이렇게 넣은 children 함수는 func 매개변수로 전달되어 func();를 통해 호출됩니다. func();가 children();과 같습니다. 함수가 인자값과 매개변수로써 사용될 수 있는거죠.
이렇게 값으로 사용되는 함수를 프로그래밍에서는 1급 함수라고 부릅니다. 즉 자바스크립트는 1급 함수를 사용하는 언어인 것이죠.