출처 : Outsider's Dev Story https://blog.outsider.ne.kr/
자바스크립트는 상당히 유연한 스크립트이다. 이건 어떻게 보면 상당히 편리하지만 다른 면에서는 아주 헷갈리는 부분이기도 하다. 어찌되었든 내가 보기에는(약간 소심모드.. ㅡ..ㅡ) 자바스크립트의 기본은 Function인것 같다. 일반적으로 메서드나 함수등으로 부르기도 하는 이 Function은 초급 자바스크립트 단계에서는 함수정도의 기능으로 사용하지만 이걸로 객체도 생성하고 모든지 다 할 수 있다.
function ex() {
........
}
흔히 보곤 하는 자바스크립트의 기본적인 모습이다. 전에는 솔직히 이게 다인줄 알았다. 위의 형식으로 선언을 하고 ex();로 호출을 한다.
function example1() {
alert("test");
this.load = function() {
alert("test2");
}
}
이 function은 이런 형태로도 가능하다. example1에 load라는 함수를 더 만들어 넣은 형태이다.
이렇게 했을 경우
example1(); // test 출력
var run = new example1(); // test 출력
run.load(); // test2 출력
위의 3가지 형태가 모두 가능하다. 물론 마지막 줄은 2번째 줄에서 run이라는 객체를 생성한 후에야 가능한 것이다. load는 example1을 통해서 객체를 생성했을 때만 사용이 가능하다. this를 통해 해당 객체에 메서드나 변수를 추가해 줄 수 있다. function()이라고 써주는 것은 선언부의 역할을 하므로 위 예제에서 alert("test"); 는 생성자의 역할을 하게 되어 객체를 생성할 때 동작하게 된다.
물론 형태가 function의 형태이기 때문에 example1();으로 객체 생성없이 바로 사용도 가능하고 이럴때는 생성자 역할을 하는 부분만이 실행이 되고 load()는 실행할 수 없다.
이번에는 약간 다른 형태로 정의하는 것을 보자.
var ex2 = function() {
alert("test");
this.load = function() {
alert("test2");
}
}
위에서 본것과 거의 동일하게 생겼지만 아주 약간 다르다. 초급때 자바스크립트를 접했을때 사용하던 일반적인 패턴과는 약간 다르게 되어 있는데 구조를 보면 ex2라는 변수를 만들고 거기에다가 function()을 할당했다. (처음에 이렇게 정의하는 방식을 보았을때 익숙치 않아서 많이 당황을 했었다.) 이렇게 할경우 약간은 다르게 보이더라도 실제로는 위에선 본 형식과 동일하게 동작을 한다.
ex2(); //test 출력
var run = new ex2(); //test 출력
run.load(); //test2 출력
정의형식만 약간 다를 뿐 사용할 때는 완전히 동일하게 사용할 수 있다.
요즘에는 이런식으로 사용하는 것을 훨씬 많이 보게 된다. 내 생각으로는 좀더 명시적으로 나타내기 위해서 굳이 동작은 같으면서도 모양은 다른 이런 형식을 사용하는 것 같다.
자바스크립트에는 따로 클래스라는 개념을 가지고 있지 않기 때문에 객체를 생성해서 사용할 것과 단순히 호출만 해서 사용할 function()을 구분해 주는 것 같다. 사용은 똑같이 할 수 있지만 명시적으로 나타내어주는 목적으로 사용하는 듯 하다.(누구랑 의논해 본게 아니기 때문에 확실치 않다. 다시금 급 소심모드.. ㅡ..ㅡ)
2번 예제를 약간 확장에서 이런식으로 사용하는 것도 가능하다.
var ex3 = function() {
this.id = "outsider";
this.url = "outsider.ne.kr";
}
ex3.prototype = {
init: function() {
alert("test");
},
load: function() {
alert("test2");
}
}
아마 이런 형식을 가장 처음 본 것은
prototype 프레임워크를 사용하면서 인듯 하다. 그뒤로 여러번 눈에 익으면서 나도 몇번 써보면서 왜 이런식으로 선언을 할까 하는 생각을 했었는데 이게 JSON[JavaScript Object Notation (
http://www.json.org/)] 이란 것을 눈치챈 것은 불과 몇일 되지 않았다.
{ 키:값, 키:값 } 의 형식을 쓰고 있는 JSON을 ex3라는 변수에다가 할당한 것이다. (:와 , 를 에디터에서 체크해 줄때는 더 신기했었다. ㅡ..ㅡ) 자바스크립트와 JSON의 특성을 제대로 이용한 형태이다. JSON은 이런식으로 값이 펑션이더라 하더라도 그대로 먹는다.
ex3();
var run = new ex3();
run.init(); // test 출력
run.load(); // test2 출력
alert(run.id); // outsider 출력
위의 형태가 모두 사용이 가능하다. 물론 시작은 2번 예제와 동일하게 작성했으므로 ex3(); 같은 형식으로 호출이 가능하고 객체를 만든후에는 메스드나 변수를 사용할 수 있다. (나중에 또 포스팅을 할듯하지만 이런식으로 이용해서 클래스를 만들어 쓴다. ex3부분이 생성자가 되고 prototype메서드를 통해서 추가메서드를 확장해 주는 것이다.)
유연한 만큼 어떻게 사용하는 지는 본인 맘이지만 난 대부분이 하는 스타일에 어느정도 맞춰주는 것이 좋다고 생각하기에.... 요즘 보는 자바스크립트 라이브러리등의 소스를 볼때도 도움이 되고 좀 더 명시적이라서 도움이 되는 것 같다. (나도 좀 헷갈려서 이 기회에 테스트 하면서 좀 정리를.. ㅋㅋ)
갑자기 가게 된 위젯컨퍼런스에 다녀왔다. 위젯컨퍼런스에 다녀왔다. 위젯이라는거 자체를 그렇게 주의깊게 보고 있지는 않았기 때문에 세션을 보았을때도 그닥 관심이 가지는 않았고 지금 해야할 일이 좀 있었기 때문에 이 바쁠때 여기를 꼭 가야하나 하는 생각도 약간 있었고 위젯을 가지고 하루종일 얘기할 만한게 머 있을까 하는 생각도 좀 있었다.
