함수는 프로그램의 특정 동작을 수행하는 코드를 말합니다. 다른 말로는 메소드(method)라고 불리우는데, 오브젝트 안에 있는 속성들 중, 값이 primitive data types가 아니고 함수인 경우를 해당 오브젝트의 속성이 아닌 메소드라는 식으로 표현합니다.

var obj = {
    name: "John",
    age: 20,
    say_hello: function () {
        console.log("Hello");
    }
}

obj.say_hello();
// 결과 -> Hello

위와 같이 obj라는 자바스크립트 오브젝트가 있는 경우, name과 age는 obj의 속성이라 부르고, say_hello는 obj가 가지고 있는 메소드라고 부릅니다.

"obj에 어떤 메소드가 있어?"

라고 누군가가 질문했을 때, 이는 obj 라는 오브젝트 안에서 실행할 수 있는 함수는 어떤 것들이 있어? 라는 뜻이 됩니다.

#함수를 생성하는 법

함수를 생성하는 방법은 크게 두가지가 있습니다.

function test() {
    console.log("Hello");
}

test();
// 결과 -> Hello

첫번째는 위와 같이 function 다음에 함수의 이름을 정의해주는 방법입니다.

var test = function () {
    console.log("Bye");
}

test();
// 결과 -> Bye

두번째는 변수를 만들어서 그 안에 함수를 지정해주는 방법입니다.

어느쪽 방법을 사용하던 동일합니다. 본인이 읽기 편한 쪽을 사용하면 됩니다. 자신이 만든 함수를 실행할 땐 항상 마지막에 "()"를 붙여줘야합니다. 자바스크립트에서 "()"는 코드를 바로 실행한다는 뜻을 의미합니다.

함수를 만들 땐 인풋(parameters)을 받아 그 인풋을 토대로 한 동작을 수행할 수 있습니다.

function shout(name) {
    console.log(name);
}

shout();
// 결과 -> undefined

shout("홍길동");
// 결과 -> 홍길동

위의 예제를 보면 shout라는 함수에 name이라는 일종의 임시적 변수에 인풋을 입력 받아 저장하도록 설정했습니다. 이름은 본인이 아무거나 임의로 지정할 수 있습니다. 여기서 지정한 이름을 함수 코드 안에서 참조하여 사용하면 됩니다.

shout 함수는 name 이라는 인풋을 콘솔에 뿌려지는 코드를 실행하는 함수입니다. 그렇기 때문에 shout()처럼 인풋 없이 실행하였을 경우 결과가 undefined로 나오게 된 것입니다.

#콜백에 대해 알아보자

콜백은 간단히 말하면 함수 안에서 실행하는 또 다른 함수 입니다. 함수를 만들 때 인풋(parameters)을 함수로 받아서 사용할 수 있는데, 이 때 인풋으로 사용되는 함수를 콜백 함수라고 합니다.

function introduce (lastName, firstName, callback) {
    var fullName = lastName + firstName;
    
    callback(fullName);
}

introduce("홍", "길동", function(name) {
    console.log(name);
});
// 결과 -> 홍길동

위의 예제 코드를 보면 우선 introduce 라는 함수를 생성했습니다. 인풋으로는 lastName, firstName, callback을 받습니다. lastName과 firstName은 함수 안의 로컬 변수인 fullName에 쓰였고, callback은 또다른 함수로서 fullName을 인풋으로 받아 실행됩니다.

introduce 함수를 실행할 때, 첫번째와 두번째 인풋으로는 "홍"과 "길동"을 넣어주고, 마지막 세번째 인풋으로는 새로운 함수를 지정해주었습니다. 여기서 지정되는 함수가 introduce 함수 안에서 callback(fullName)으로 실행되는 함수가 됩니다.

이 콜백이 유용한 이유는, 콜백 함수만을 바꿔줌으로서 하나의 함수를 여러가지로 응용할 수 있기 때문입니다.

function introduce (lastName, firstName, callback) {
    var fullName = lastName + firstName;
    
    callback(fullName);
}

function say_hello (name) {
    console.log("안녕하세요 제 이름은 " + name + "입니다");
}

function say_bye (name) {
    console.log("지금까지 " + name + "이었습니다. 안녕히계세요");
}

introduce("홍", "길동", say_hello);
// 결과 -> 안녕하세요 제 이름은 홍길동입니다

introduce("홍", "길동", say_bye);
// 결과 -> 지금까지 홍길동이었습니다. 안녕히계세요

위와 같이 다른 동작을 수행하는 함수 say_hello와 say_bye를 정의해두고 introduce 함수에 인풋으로 사용해주면, introduce라는 함수에서 받아들이는 같은 인풋들을 가지고 다른 동작을 수행하는 것이 가능해집니다. 함수를 나눠줌으로써 코드를 재활용 할 수 있고, 관리도 더 쉬워지게 되는거죠.

이 콜백은 앱을 개발할 때, 특히 서버와 통신할 때 많이 사용되는 방법입니다.

콜백 자체는 코드를 더 읽기 편하게 해주지만, 너무 많이 콜백을 연결하면 오히려 나중에 디버깅 하기가 힘들어지기 때문에, 적당하게 나누어서 사용하는 것이 좋습니다.