#04. JavaScript의 함수

자바개발자의 마음속 깊은 곳에는 자바스크립트를 무시하는 경향이 있다.

나또한 처음 자바스크립트를 공부한다고 했을때 주위에 많은 선배들이 그거 할시간에 자바공부를 더하고 스프링공부를 더해라. 그거 그냥 쓰면되지 뭘 따로 공부까지 하고있냐. 라는 말을 참 많이 들었었다. 그리고 같이 공부하는 분들도 주변에서 그런말을 참 많이 듣는다고 하셨다.

그러다 자바스크립트를 어느정도 공부하고 뭐가뭔지좀 알것같다고 생각될 무렵 스크립트단에서 발생하는 예상치못한 에러에 선배들이 짧게는 몇분에서 길게는 몇시간, 며칠을 고생하는걸 보면서 배우길 잘 했다고 생각이 든다.

그분들을 폄하할 생각은 없지만 한두명도 아니고 수백 수천명의 자바개발자가 왜 그런생각을 갖게되는지부터 살펴보자.

 

일단 자바스크립트를 화면단에서 값체크하고 더하기빼기하는 정도로밖에 사용하고 있지 않으며, 그나마도 jQuery같은 라이브러리를 사용하다보니 순수 자바스크립트는 배울필요가 없다고 생각하게되는것 같다. 실제로 많은 인터넷글들도 이렇게 말하는 경우가 많다. 자바스크립트는 쉬우니까 대충 배우고 jQuery를 집중적으로 공부하라는 식의 말들말이다.

하지만 사실 돌려서 생각하면 이는 참 웃긴말이다.

그렇게 말하는 자바개발자들 앞에서 '자바는 대충하고 스프링 공부해' 라고하면 욕먹이 십상이다. 하지만 같은 개념인것이다. jQuery가 어떻게 돌아가고 원리를 이해하기위해서는 자바스크립트의 기초개념이 대단히 중요하며 단순 값 체크하는데 이상으로 angularjs, Nodejs, Reactjs 등등 자바스크립트라는 언어가 폭넓게 사용되고있는 지금 더이상 무시할수는 없다.

 

그럼 지금부터 자바스크립트의 함수에 대해서 포스팅을 해보겠다.

단순히 jsp에서 값체크 하는정도로만 자바스크립트를 사용하는경우엔 그냥 자바변수 선언하듯이 var 변수를 선언하고 자바 메서드 선언하듯이 function을 선언하면 된다.

앞선 포스팅으로인해 var 변수명과 function 이름은 당연히 겹치지않게 만들것이라본다.

(이런 변수관리 매커니즘이 아니라도 자바에서도 변수명과 메서드명이 똑같게 코딩하는건 극히 지양하지만...)

 

그러다보니 대충 눈으로 결과만 확인했을땐 자바랑 자바스크립트랑 크게 차이가 없는듯 싶고 그러니 자바스크립트를 무시하게되는것이다.

하지만 단순한 자바의 메서드라고만 생각하는 자바스크립트의 function은 사실 메서드보다 훨씬 방대한 역할을 맡고있다.

 

우리는 이미 함수가 변수와 같이 관리되고있다는걸 알고있다. 그럼 '아..변수랑 이름겹치면 안되는구나'로 끝나는걸까?

메서드(함수)가 변수로 관리된다는시점에서부터 자바의 메서드는 상상도 못할일을 할 수 있다는 암시가 된다.

가령 이런 소스가 가능하다.

 

function getNickName(){

return "LichKing";

}

 

var name = getNickName();

console.log(name);

 

var getName = getNickName;

console.log(getName());

 

첫번째는 자바와 유사하고 우리에게 매우 친숙한 메서드로서의 함수다. 미리 정의되어있던 getNickName이라는 함수를 호출하여 그 반환값은 name에 저장하고 name을 출력한다.

두번째는 getName이라는 변수에 getNickName을 대입하고있다. 많은 초입자들이 어려워하고 헷갈려하는게 있는데 바로 ()(괄호)의 여부이다. 괄호가 있고없고는 매우 큰 차이이며 괄호가 있으면 함수를 호출한다는것이다. 그런데 잘보면 getName에는 괄호가 없는 함수를 대입하고있다.

이렇게 되면 getNickName은 함수의 반환값인 return문을 반환하는게 아니고 자신이 참조하고있는 함수의 참조값을 getName에 저장하게된다.

그리고 getName은 그때부터 함수로 사용될수있다. 저런식의 표현은 헷갈릴수있겠으나 함수표현식이라고 생각하면 이해하기 쉽다.

 

var getName = function(){ return "LichKing"; }

 

둘다 함수의 참조공간을 생성해서 그 값을 getName에 저장시키게된다.

그리고 이것이 바로 자바스크립트에서 툭하면 나오는 CallBack의 근간이 된다.

callback이란 모듈화된 함수를 이용할때 주로 사용되는데 이런식이다.

 

function callback(){ alert(10); }

$("#id").show(callback);

 

숫자 10을 alert() 창으로 띄우는 함수를 정의하고 jQuery의 show() 함수에 인자로 보냈다.

show()함수는 dom 태그의 값을 바꿔 감춰져있던 태그를 보여주는 함수다.

show()함수가 어떤식으로 구성되어있고 어떤식으로 흘러가는지는 모르겠지만 show() 함수가 실행되면서 인자로 받은 callback 함수를 실행하도록 할수있는것이다. 아마 show()함수는 내부적으로 이렇게 돼있을것이다.

 

function show(callback){

if(callback){

callback();

}

}

 

콜백 설명을 위해 매우 간략하게 표현한것이고 실제 show함수는 받는 인자도 더 여러개이다.

 

함수가 값으로서 이리저리 전달될수있기에 이런식의 사용이 가능한것이다.

지금까지 함수의 2가지 역할에 대해 알아봤다. 뭔지 모르겠다고?

일단 메서드로서의 역할과 값으로서 변수적인 역할 2가지에 대해 알아봤다.

 

함수는 이외에도 한가지의 역할을 더하는데 그것은 바로 생성자의 역할이다.

자바개발자라면 생성자에 대해 기본적으로는 알고있을것이고 또한 생성자가 return문이 없는 사실 메서드라고 해도 무리가없다는것을 이해하고있을것이다.

그렇기에 자바스크립트에서도 함수가 생성자역할까지 한다고해도 그렇게 큰 무리는 아니다.

 

생성자역할의 자세한 설명은 추후 객체에 대해 설명할때 하겠다.

지금은 함수가 생성자 역할까지 한다는것만 알고 넘어가자.

 

이정도까지만 알면 이제 더이상 자바스크립트를 만만하게 보긴 힘들다.

무심코 별생각없이 정해진 규칙에따라 ajax코드가 왜이렇게 인자를 보내야하는지도 모르는채로 구글에서 검색했더니 이렇게 써야된다고 나왔다고 그거보고 치고 별생각없이 만들었던 함수가 사실은 이런원리를 통해 구현이 되어있던 것이다.