함수(Function)

함수(Function)

function addOne(x) {
	var y = x + 1;
	return y;
}  // -> 함수 선언은 끝에 ;를 붙이지 않습니다.

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

또는 아래처럼 변수를 선언하고 함수를 대입하는 방식을 함수 표현식이라고 부릅니다.

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; // 2

1을 넣으면 그 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;
}

여기는 이전과 다르게 매개변수(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)); // 15

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가 표시되는 것을 볼 수 있습니다. 이게 바로 dateCheck 함수의 return 값입니다. 사실 모든 함수는 return을 입력하지 않으면 자동으로 return undefined;가 마지막 코드로써 동작하는 겁니다.

한 가지 더 알아둘 점은 return 이후에는 함수가 종료되기 때문에 실행되지 않습니다. 아래 코드에서는 alert('저는 실행되지 않습니다'); 이 부분이 return보다 뒤에 나오기 때문에 무시됩니다. 그러니까 return 뒤에 코드를 적는 실수를 하지 마세요!

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

이전 블로그에서 객체나 배열의 값으로 함수도 들어갈 수 있다고 했습니다. js에서 함수도 하나의 값입니다.

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();과 같습니다. 함수가 인자값과 매개변수로써 사용될 수 있는 거죠.