함수란 무엇인가?

함수는 본래 수학적인 의미에서는 두 변수 x와 y에 대하여 x가 정해졌을때, 그에 따라 y의 값이 오직 하나로 결정되는 수를 함수라 한다.
프로그래밍에서 함수라 하는 요소는, 특정 동작을 수행하는 코드의 구문을 이야기한다.
특히 자바스크립트에서는 브라우저를 조작하거나, 연산을 하는등 구문을 실행시킬때 대부분 함수를 사용한다.

때문에 자바스크립트에서 함수를 빼놓고 이야기 할 수는 없을것이다.

그렇다면 함수는 구체적으로 어떤 역할을 하게 될까?
우리가 보는 웹사이트에서 자바스크립트로 이루어진 웹 사이트의 동적인 부분, 즉 상호작용이 가능한 부분에 모두 함수가 사용 된다 생각하면 될것이다.
다만 여기도 하나의 룰이 있는데

함수를 사용할땐 한가지의 역할만 하도록 만들자

가 그것이다.

또한 함수명은 가능하면 동사로 설정해서, 자신이나 다른 사람이 봤을때 이 함수가 무슨 역할을 하는지 알 수 있게 만드는것이 좋다.
여러 역할을 하는 함수는 만들기도 쉽지 않고, 단문으로 이루어지는 함수명으로 설명하기가 쉽지 않을뿐더러, 후에 수정을 하기에도 힘들기때문이다.

그렇다면 함수를 어떻게 표현해야 할까?

function printX(x) {
  if(x < 10) {
    console.log(x);
  } else {
    console.log("Too big!");
  }
}

위의 함수는 x를 인자로 받아서, 그 인수가 10보다 낮으면 x를 출력하고, 10이상일 경우엔 "Too big"이라는 문구를 출력하는 함수다.

인수란 함수에 전달되는 수, 혹은 값을 의미한다. 즉 ()안에서 x에 넣을 숫자를 받고, 그 숫자를 if구문 안으로 전달하는것이다.
함수는 이 값을 255개까지 가질 수 있다..라고 MDN에서 말하고 있지만, 가능하면 3개이상의 인수를 받는것은 자제하도록 하자.

위의 함수를 호출하기 위해서는 특별한 선언을 해야하는데,

let number = 9

printX(number);

와 같이 함수를 호출하고, 인수가 필요할 경우 ()안에 매개변수라 하는 값을 넣어야 한다. 이 변수가 함수에서 인수로 바뀌게 되고,
함수 안으로 전달 되게 된다.
매개변수와 인자가 꼭 필요한건 아니지만, 함수 내부로 전해지는 값이 필요할 경우엔 반드시 작성을 해야 함수 내부로 값을 전할 수 있다.

반면에 함수명이 존재하지 않는 익명함수라는 함수도 있다.
이 함수는 이름이 존재하지 않고, 표기방법은

function(param){logic}();

과 같이 나타낸다. 함수명을 없애고, 선언과 동시에 호출을 하는 함수이다.
위와 같은 함수는 선언과 호출을 동시에 행할 수 있지만, 함수명이 없기에 불러 올 수 없으므로 재사용을 할 수 없다.

위와 비슷한 함수로 화살표 함수(arrow function)이란 함수가 있는데,
위의 익명함수를 더욱더 줄여

(param) => (logic);

과 같이 매우 간단하게 나타낼 수 있는것이다.

return에 대해서

함수를 사용하다보면 자주 볼 수 있는 구문이 바로 return이라는 구문이다.
앞선 포스트에도 몇번 나온 반환한다라는 말이 바로 이 return이라는 뜻이 된다.
return은 호출 된 그 시점에서 함수를 종료하고, 그 값을 함수 호출부분으로 넘기는 구문이다.

function mulX(x){
  return x*x;
}

let result = mul(3);
//result = 9;

와 같이, 함수 mulX의 값은 x*x로 return 되었기때문에, 3을 매개변수로 갖고 있는 mulX 함수 자체의 값은 9가 되는것이다.

함수 안에서 변수를 선언하는것도 물론 가능하다.
단, 함수안에서 선언된 변수는 일반적인 경우, 외부로 전달 되지 않고 함수내부에서만 사용이 가능하다.

이를 이해하기 위해선 scope라는 개념이 등장하는데, 이는 추후에 다시 알아보도록 하자.