자바스크립트의 꽃은 함수입니다. 자바스크립트는 모든 것을 함수를 통해 할 수 있습니다. 따라서 함수의 기본부터 확실히 익혀 놓는 게 좋겠죠?
함수(Function)
함수란 뭘까요? 학교 수학시간에 배웠던 함수와 비슷합니다.
y = f(x)x에 어떤 값을 넣으면 y가 f(x)에 상응하는 식에 의해 자동으로 나왔죠? 그것과 비슷합니다. 자바스크립트에서 함수는 다음과 같이 만듭(선언)니다.
function addOne(x) {
var y = x + 1;
return y;
}또는 다음과 같이도 만들 수 있습니다. 아래처럼 변수를 선언하고 함수를 대입하는 방식을 함수 표현식이라고 부릅니다. (위의 방식은 함수 선언이라고 부릅니다) 아래와 위의 방식의 차이로는 호이스팅이라는 현상이 있는데, 나중에 실행 컨텍스트 시간에 설명하겠습니다. 또 다른 차이점은 위의 방식으로 만들 때에는 끝에 ;를 붙이지 않습니다.
var addOne = function(x) {
var y = x + 1;
return y;
};addOne이 함수의 이름(변수의 이름이기도 하고요)이고, x가 사용자가 넣고 싶은 것을 넣는 곳입니다. x를 매개변수라고 하고 영어로는 Parameter라 합니다. 함수 안에는 y라는 변수를 만든 뒤에 x값에 1을 더하라고 되어있습니다. return은 y값을 바깥으로 내보내고 함수를 종료하라는 겁니다. 즉 x값을 받아서 1을 더한 후 바깥으로 내보내라는 거죠. 이것을 반환한다고 표현합니다.
이 함수를 실행하려면 함수의 이름에다 소괄호(())를 붙이고, 괄호 안에 매개변수 x에 상응하는 인자를 넣어주면 됩니다. 이렇게 미리 만들어둔 함수를 실행하는 행위를 호출한다라고 표현합니다. 호출을 통해서 반환하는 값을 저장할 변수를 미리 만들어둡시다. 아래에서는 변수 i에 addOne함수의 반환 값을 저장합니다.
var i = addOne(1);
i; // 21을 넣으면 그 1이 매개변수 x로 전달됩니다. 이제 addOne 함수 내부 코드가 실행되죠. x가 1이니까 y는 2가 되고, return에 의해 y값이 반환(바깥으로 내보내져)되어 i에 y의 값인 2가 저장됩니다. 여기서의 1은 매개변수라고 부르지 않고 인자(Argument)라고 부릅니다. 함수를 선언할 때의 괄호 안의 값은 매개변수(Parameter), 함수를 호출할 때의 괄호 안의 값은 인자(Argument)입니다.
var j = addOne(2);
var k = addOne(100);각각 j와 k의 값은 무엇일까요? 쉽죠? 3, 101입니다. 이번에는 곱하기 함수도 한 번 만들어봅시다.
function multiply(x, y) {
return x * y; // 곱하기 표시(x)가 프로그래밍에서는 *
}여기는 이전과는 다르게 매개변수(Parameter)가 x, y 두 개네요? 상관 없습니다. 그냥 함수를 호출할 때 두 개를 넣어주면 됩니다.
var l = multiply(5, 6); // 30
var m = multiply(10, 0); // 0위의 경우에는 5가 x, 6이 y로 전달됩니다. 그리고 5 * 6의 결과값이 반환(return)되는 거죠. 매개변수의 개수는 원하는 대로 만들 수 있습니다. 하지만 너무 많으면 사용할 때 헷갈립니다. 그래서 매개변수가 많아질 것 같으면 객체를 주로 사용합니다.
var n = function(object) {
return object.a + object.b + object.c + object.d;
};
n({ a: 1, b: 2, c: 3, d: 4 }); // 10매개변수도 하나고, 인자도 객체 하나입니다. n에 인자로 넣은 객체가 object 매개변수로 전달되어 함수 안에서 활용됩니다. 좀 어려운 문제를 내볼까요. 아까 만든 더하기와 곱하기 함수를 사용한 겁니다.
var a = multiply(addOne(2), addOne(4));이걸 맞추셨다면 하나를 알면 열을 아는 분이시거나, 이미 자바스크립트에 익숙하면서 글을 읽으시는 분이겠죠? 차근차근 본다면,
multiply(addOne(2), addOne(4));에서 addOne(2)==3이고, addOne(4)==5니까 위의 함수는 var a = multiply(3, 5); 와 같습니다. 따라서 답은 15죠. 이렇게 함수를 여러 개 조합해서 사용할 수도 있습니다.
함수 중에는 return을 하지 않는 함수도 있습니다. 첫 시간, 첫 번째 예로 보여드렸던 날짜를 표시하는 프로그램이 바로 그렇습니다.
var dateChecker = function() {
var date = new Date();
alert(date);
};
dateChecker(); // undefined위와 같이 return이 없는 함수는 자동으로 undefined를 반환합니다. 알림이 뜨는 것은 return과 상관이 없습니다. 알림은 alert(date); 의 결과로써 뜨는 거지 dateChecker의 return에 의한 것이 아닙니다. 대신 알림이 뜬 후에 콘솔 창에 undefined가 표시되는 것을 볼 수 있습니다. 이게 바로 dateChecker 함수의 return 값입니다. 사실 모든 함수는 return을 입력하지 않으면 자동으로 return undefined;가 마지막 코드로써 동작하는 겁니다.
한 가지 더 알아둘 점은 return 이후에는 함수가 종료되기 때문에 실행되지 않습니다. 아래 코드에서는 alert('저는 실행되지 않습니다'); 이 부분이 return보다 뒤에 나오기 때문에 무시됩니다. 그러니까 return 뒤에 코드를 적는 실수를 하지 마세요!
var really = function() {
return;
alert('저는 실행되지 않습니다');
};
really(); // undefined이전 시간에 객체나 배열의 값으로 함수도 들어갈 수 있다고 했습니다. 기억나시나요? 자바스크립트에서는 함수도 하나의 값입니다.
var a = {
b: function() {
return;
}
};위의 경우에 속성 b의 값은 함수입니다. a.b(); 와 같이 하면 함수를 호출할 수 있습니다. 전 시간에 이렇게 속성의 값으로 사용되는 함수를 메소드라고 부른다고 살짝 알려드렸습니다.
조금 더 어려운 경우를 살펴보겠습니다.
var mother = function(func) {
func();
};
var children = function() {
alert('안녕하세요');
};
mother(children); // '안녕하세요'mother과 children 함수를 만들었는데 mother 함수를 호출할 때 인자로 children 함수를 넣었습니다. 함수의 반환값이 아니라 함수 자체를 넣은거죠. 이렇게 넣은 children 함수는 func 매개변수로 전달되어 func();를 통해 호출됩니다. func();가 children();과 같습니다. 함수가 인자값과 매개변수로써 사용될 수 있는거죠.
이렇게 값으로 사용되는 함수를 프로그래밍에서는 1급 함수라고 부릅니다. 즉 자바스크립트는 1급 함수를 사용하는 언어인 것이죠. 함수를 값으로써 자유자재로 다룰 수 있어야 자바스크립트의 고수가 될 수 있습니다. 아직은 초보 강좌이니까 그 방법에 대해서는 포스팅하지 않겠습니다. 나중에 고급 강좌에서 한 번 다뤄보겠습니다.
일단 기본적인 함수의 개념은 잡았고, 다음 시간에는 연산자에 대해서 배워보겠습니다.
익명
