JavaScript 특징의 이해 - JS의 중심 Function 살펴보기(1)

2011. 2. 14. 00:43
JavaScript(이하 JS)라는 언어는 다른 언어와 달리 몇가지 특징을 가지고 있습니다. 그런 특징들은 사실 UI를 개발하는데 매우큰 걸림돌이 되지는 않는것 같습니다. 이는 언어적인 자유도가 상대적으로 높은 JS에서 잘못된 패턴을 허용하기 때문이기도 합니다.
몇가지 언어적인 특징을 이해하기 앞서 가장 중요하다고 생각되는 Function , Object , Scope등을 앞으로 단계적으로 작성해보려고 합니다. 저도 이기회에 몇가지 참고할 수 있는 책과 웹을 탐독한 후 머리속에 정리되는 내용을 적어보려고 합니다. 어쩌면 짜집기식의 내용취합일 수 도 있지만 그래도 몇가지 책에서 이해하기 어려운 부분을 쉽게 작성해보려고 노력해 보겠습니다 ^^

Function - 삼형제
Function의 그 종류부터 알아보겠습니다. 정확히 딱 3가지뿐입니다.
첫번째 --> var fc = new Function();
두번째 --> function fd(){/* ...*/}
세번째 --> var fl = function(){/* ...*/}

어떻습니까? 간단하지 않습니까? 아닌가요? 사실은 비슷하기도 합니다. 당연히 사용하려는 목적(function은 기능이라는 뜻이자나요)은 동일합니다.

첫번째 var fc = new Function();
이것은 Function Class라고합니다.(어렵죠?) 생성자 함수라고도 합니다. 바로 말씀드리면 잘 사용하지 말아야할 방법입니다. (그러니 전문가도 아니고 잘 모르겠다면 안쓰면 됩니다).
심지어 Function() 안에 prameter와 함수내용을 콤마로 구분해서 (문자열의 경우 escape처리까지) 작성해야 하니 보기도 상당히 난감할 것 입니다.
몇가지 특징을 추가로 나열하면 다음과 같습니다(특징이 모두 단점이군요)
- 메모리 사용이 매우 좋지 않음
- Dynamic하게 실행될때마다 매번 생성된다(비효율)
- OOP개념의 프로그램이라고 볼 수는 있다
- 재귀호출을 지원할 수 없다(아래 두번째 방법도 이건 마찬가지 입니다)
- Scope 가 애매모호 할 수 있다(실제 실행되는 장소에 따라서 local,global등이 결정됩니다)


두번째 function fd(){/*.....*/}
이것은 가장 전형적인 함수의 모습 그 자체 입니다. Function Declarations라고 합니다. 쉬운 한국말로는 함수문장 이라고 합니다. 함수문장이라.. 말그래도 함수라는 이야기겠죠?
우리는 이런 것을 가장 흔하기 사용합니다.
사실 이것은 아래의 것과 같다고 볼 수 있습니다
같다 ==> var fd = function fd();

JS의 함수는 모든 것이 value라는 개념이라고 보시면 됩니다.(함수는 객체라고도 합니다. 이것도 분명히 맞다고 봅니다) 아무튼 우리는 이것을 가장 많이 별 걱정없이 사용하면 됩니다.

세번째 var fl = function(){/* ...*/}
이놈은 가장 골치아픈 놈이기도 합니다. (함수에 이름도 없군요). Function literal 한국말로는 함수리터럴(그렇게 그냥 읽습니다)이라고 합니다. 또는 Function Expression 이라고도 합니다.(함수표현식이라고 할 수 도 있군요)
전 함수리터럴 이라고 부릅니다. 이놈의 특징은 무엇보다 변수 fl에 함수를 저장하고 있다는 것입니다.
앞서 이야기 했지만 사실 모든 함수는 value('값')임으로 이표현은 당연하기도 합니다. 이처럼 함수는 변수에 저장할 수도 있고, 다른함수에 전달인자로 사용 할 수도 있습니다. 아 다른 함수의 리턴으로 사용할 수 도 있습니다.
함수리터럴을 설명하다보면 함수의 특징이 모두 다 나오게 됩니다. 일단 종류 설명에서는 여기까지 하고 나머지는 뒤로 미루겠습니다.
한가지 함수리터럴에서 함수의 이름을 붙일 수는 있습니다. 하지만 이것은 좋은 방법이 아닙니다. 왜냐면 함수의 Hoisting 이라는 특징이 있는데(IE에서는 이런 부분에서 오류가 발생 할 수 있다고 합니다) Hoisting이라는 것은 간략히 말해서 함수문장(Function Declarations)종류만 함수정의를 실행영역 뒤에 두어도, scope상단으로 이동하는 특징으로 인해 오류가 생기지 않는 다는 것입니다.(아 이해 가십니까? 차후 자세한 설명을 하겠습니다)
아무튼 함수리터럴에서 함수이름을 사용하는 것을 자제하면 됩니다.
var fl = function funName(){}   (x)
var fl = function(){}   (o)



Function - 객체입니다
JS에서 함수는 객체(Object)입니다.
객체는 무엇인가요? 프로퍼티(Properties)와 메소드(Method)가 있습니다. 정말 함수도 프로퍼티와 메소드가 있을까요? 그렇습니다. 존재합니다.
length, prototype, arguments 라는 프로퍼터가 있습니다.(몇개 안되는 함수의 프로퍼티(속성)임으로 꽤 중요한 특징을 담고 있겠습니다)
apply() , call(), length() 는 함수가 가지고 있는 메소드 입니다. 메소드라는 용어는 객체상에서 호출되는 함수라고 생각하면 됩니다.

몇가지 간단히 추가로 알아보겠습니다
전달인자의 개수를 판단하는 arguments.length()와 다릅니다. 함수의 length()는 argument.callee.length()로 접근하고 원래 함수가 정의된 인자의 개수를 판단할 때 사용합니다.

call()과 apply()는 함수가 실행되는 시점의 Scope을 특정 객체의 영역안으로 지정하는 효과를 얻을 수 있습니다
예를 들어 아래와 같은 식입니다.
var objectEx = {
  var funInObj : function(){},
}

objectEx.funInObj()로 호출하는 것은 objectEx객체의 메소드로 호출되는 것입니다. 그런에 이런 경우 this의 scope는 Global입니다.
this Scope를 객체로 제한하려면 아래와 같이 해야 합니다.
funInObj.apply(objectEx , ["arg"]);

이와 같은 경우 함수의 몸체안에서의 scope는 objectEx객체를 가르킵니다. call과 apply의 차이는 두번째 인자를 배열로 처리가 가능한지 아닌지의 차이만 존재 합니다.
그리고 apply의 첫번째 인자를 null로 주는 경우 this Scope는 Global을 가르킴으로 주의 해야 합니다.

함수는 객체라고 하는데요, First Class Object라는 용어로도 쓰입니다(Javascript Patterns라는 책에서 정의되었더군요) 위에서 이야기 했지만 몇가지 함수의 특징을 다시 정리하면 아래와 같습니다.
- 런타임과정에서 생성될 수 있다
- 다른 함수의 인자로 사용이 가능, 다른 함수의 리턴값으로 사용이 가능하다
- 변수로 지정할 수 있다.
- 배열의 프로퍼티로 지정 가능하다(a[0] = function(){ })
- 객체(object)의 프로퍼티로 지정 가능하다

이런 특징만으로 여러가지 형태의 패턴을 가진 함수가 존재 합니다. 이런 패턴은 여러가지 장점을 가질 수 있으면, 잘 알려진 방법도 있지만 매우 특이한 방법도 존재 합니다.
이점은 다음편에 작성해보도록 하겠습니다.


함수의 Scope
함수의 Scope는 간략히 아래와 같은 특징이 있는것 같습니다.
함수의 이름은 함수가 정의되는 순간에 Global scope가 됩니다. 하지만 함수안의 인자,변수등은 모두 지역변수로 지정됩니다.
다시말해, 자바스크립트에서 함수는 실행되는 영역이 아니고, 정의되는 영역에서 수행이 됩니다.
중첩된 함수에서 함수의 Scope는 복잡하고 재미있는 상황이 발생 합니다.
중첩된 함수라는 것은 함수안에 함수가 존재하는 형태인데요. 중첩된 함수(inner Function)가 자신의 부모함수의 변수를 사용하는 경우(중첩된 함수는 부모의 모든 지역변수를 사용할 수 있습니다)에 이를 리턴하는 경우에 부모의 변수가 함수가 종료되어도 계속 사용이 됩니다. 
이것을  closure라고 합니다(클로저)
일반적인 함수의 종료후에 그 변수가 scope chain에서 사라지는 것이여야 하는데, 이런것에 대한 약간의 예외 상황이 발생하는 것입니다.
scope chain에 대해서는 추가적으로 아래의 url에서 더 자세한 정보를 다루고 있습니다.
http://dev.naver.com/tech/ajaxui/ajaxui_2.php#a_2_2 <정말 정리가 잘되어 있습니다>
함수의 scope에 대해서 제가 더 추가적인 이해를 통해 설명을 드릴 수 있기를 기대해 봅니다 ^^


함수의 몇가지 추가사항
전달인자
전달인자는 정의된 함수의 그 개수보다 더 많아도 되고, 적어도 됩니다. 어떤 경우에도 오류를 발생 하지 않습니다. 많다면 무시되고, 적다면 undefined입니다.

name 프로퍼티
함수는 name이라는 프로퍼티가 있습니다.
function funName(){}
funName.name // funName 이 리턴

이것은 디버깅하는 경우 유용할 수 있으니 참고하시기 바랍니다.


다음에는 함수의 나머지 특징(여러가지 사용 예)에 대해서 작성해보도록 하겠습니다. 아마도 이런것이 될 것 같습니다.
  • callback()
  • hoisting
  • 즉시실행함수
  • 커링
  • 자기호출함수
<얼마나 깊이 있게 작성 하게 될지는 모르겠네요 ㅎㅎ>

마지막으로 블로그 작성이 꾸준하지 않으면 얼마나 어려운지 알게 되네요 ㅎㅎ

참고한 내용
http://rx4ajax-jscore.com
책 - JavaScript Patterns
책 - 자바스크립트 핵심가이드(The Good Parts)
책 - Javascript Definitive Guide
기타 웹상의 내용들과 어딘지 모르는 머리속 기억들..


비회원 HTML5_JS_CSS AJAX, Function, javascript 특징, patterns, 자바스크립트, 자바스크립트 함수, 패턴

[Book Review] JavaScript Patterns

2011. 1. 13. 09:41
수많은  JavaScript책중에 최근에 살펴보았던 책 한권을 리뷰할까 합니다. 최근에 몇몇 개발자분과 스터디를 하고 있어서 이런 부분을 일부 공유 하고자 합니다.
JavaScriptPatterns(Paperback)
카테고리 과학/기술 > 컴퓨터 > 프로그래밍
지은이 Stoyan Stefanov (O'Reilly, 2010년)
상세보기
<티스토리 정보첨부 -책 에는 이책의 이미지가 없네요 ^^>

 처음에는 자바스크립트 패턴이라고 해서 디자인패턴을 자바스크립트에 맞게 표현한 책인줄 알았습니다.(실제 이런 책이 있긴 합니다)
하지만 그런책은 아니더군요. 오히려 책제목 그대로의 내용을 담고 있습니다.
아쉽게도 번역서가 없어서 원서 뿐 이지만, 코드위주로 보면 좀 볼만합니다^^
자바스크립트에서 언어적인 특징만을 설명한 책은 많지 않습니다. 이런 특징을 이해하는 것은 상당히 어렵고 곤혹스럽습니다. 많은 개발자들이 이런 부분의 원리를 이해하지 못하고 개발에 임하고 있습니다(이런것은 복잡한 상황에서 더욱 개발자를 어렵게 합니다)
오늘 소개하는 책은 이런부분의 일부분을 해결해 줄 수 있는 책이 확실한것 같습니다.

또한 이책을 읽은 후에 더글라스크랙포드 아저씨의 책을 같이 읽는 것을 권장합니다
자바스크립트핵심가이드
카테고리 미분류
지은이 더글라스 크락포드 (한빛미디어, 2008년)
상세보기
비슷한 내용을 담고 있으면서, 보다 언어적인 특징을 이해하는데 많은 도움이 될것 입니다.


어떤내용이 있는지 줄거리를 말씀해 드릴까 합니다<아래 굵은 글씨는 이책의 몇몇 목차 그대로 입니다>

패턴?
위에서 썻듯이 이책은 디자인패턴뿐만을 담고 있지는 않습니다. 이책의 뒷부분에 디자인패턴도 나오긴 합니다만. 메인내용은 아닙니다.
코딩패턴이 소개되고 있습니다.
구현방식이 비교적 자유로운 언어인 자바스크립트에서는 여러가지 형태의 코딩이 가능합니다. 동일한 동작을 구현하는데 중급개발자 이상의 코드를 보면 모두 다른 코드의 형태로 유지합니다. 이러한 유형중 어떤것이 어떤상황에서 어울리는지에 대한 설명을 코딩패턴이라는 부분에서 다루고 있습니다.
컨벤션은 코딩 규칙입니다. 네이밍설정 하는 것부터  brace( 괄호)를 어떤 위치에 둘지, 공백은 어떻게 처리할지 등 으 방법이 포함되어 있습니다. 하지만 컨벤션이 이책의 메인줄거리는 아닙니다.

 Essentials
자바스크립트 문법을 사용하는 경우 어떤방법이 좋은지, 반대로 어떤패턴이 좋지 않은지 설명합니다.자바스크립트 문법과 함수중에는 쓰는 것을 삼가해야할(사실은 실패했지만 없앨수 없는 현실적인 문제가 있죠)것들이 있습니다. 
 For loops 와  For in loops 에서 주위해야 할점, 변수의 사용(전역/지역)에대한 이야기.그리고 코딩컨벤션,
eval() 함수의 사용에 대한 이야기 등. 자바스크립의 잘못 만들어진 문법의 일부분을 설명해주고 있습니다. 우리는 이러한 패턴을 사용하지 않는것이 좋습니다.

 Literals and Constructors 
리터럴과 생성자는 반대의 개념인것처럼 보이지만 실제로는 유사한 목적을 가지고 있는 것입니다. 다만 어떤 것이 더 좋은가?  어떤 상황에서 리터럴을 쓰지? 왜? 라는 이유를 얻을 수있습니다.
예를 들어,  리터럴은 더 빠르고, 코드의 양을 줄일 수 있다는 이유도 포함됩니다.
 JSON 형태(자바스크립에서 객체를 표현하는 형태)를 사용하는 경우 주의 해야 할점도 포함하고 있습니다.
 Constructors(생성자) 라는 것은  new 키워드를 통한 호출되는 함수라고 할 수 있습니다. 생성자는 뒤에 나오는 함수와 Prototype 의 기초가 되는 부분으로 중요하다고 볼 수 있습니다.

 Functions
자바스크립트는 함수가 가장 중요하다고 생각됩니다. 이 책에서도 함수에 대한 내용이 상대적으로 많으며 중요하게 다루고 있습니다.
자바와 같은 언어와 달리 자바스크립트는 다양한 표현방식을 가지고 함수를 표현할 수 있습니다. 이러한 이유는 본질적으로 자바스크립트 함수가  First-class Object 라고 이책에서 표현합니다.(참 적절한 표현입니다)
이러한 특징은  결국 자바스크립트 함수는  객체이며 그로 인해 다른 함수에  Return 되는 경우도 있고, 다른함수에  arguments로 사용이 가능하다는 점입니다. 또한 변수에 할당도 가능합니다. (어쨋든 이렇게 구현된 코드는 역시 보기는 어렵습니다 ㅎㅎ)
변수에 할당하는 경우는 보통  funtion expression 이라고 하고,  function decalarations 는 일반적인 함수를 정의하는 패턴이라고 합니다.
이외 다양한 함수의 표현방식이 있으며, 이러한 방식은 매우 유용하고 실제 자주사용되는 것임으로 분명히 이해를 하고 있는 편이 좋습니다
- callback 의 정의와 왜 사용하는지?
-  self-defining  함수의 목적은? ( 함수내에서 동일한 함수를 호출하는 형태로 한번의 초기화때 유용하게 사용이 가능합니다)
-  immediate funcitons  는 언제 사용하는지? <()function(){......}()) > 이런 형태로 즉시 실행이 바로 되는 함수 입니다.
이러한 특징을 모두 이해하고 올바른 사용법을 설명하고 있습니다.

 code reuse patterns 
자바스크립트의 중복코드를 방지하고 코드량을 줄이는 방법중 하나는 상속을 하는 것입니다. 그런데 상속을 하는 방법이 자바스크립트는 쉽지 않습니다. 사실은  자바스크립트의  Framework 을 활용해서 상속을 비교적 쉽게 사용할 수는 있습니다.
상속자체를 어떻게 하는것인지 보다,  ptototype 이라는 키워드를 이해하고 이를 통한 상속방법을 이해하는 것이 중요합니다. 실제로 이책에서는  code reuse patterns 이라는 절을 통해  prototype 객체(네 이것은 객체가 맞습니다)를 활용한 상속방법을 설명하고 있습니다.
초보자바스크립트 개발자에게는 쉽지 않은 내용인데요, 전 이부분을 이해하였다면 중급개발자라고 생각합니다
<prototype 에 대한 부분은 요 다음에 포스팅을 할까 생각중입니다>

이외에도   Design Patterns 과  DOM 을 조작하는 내용이 이책에는 있습니다.
초급자에게는 조금 어렵지만 자바스크립트를 조금 다뤄본 분들에게는 중급개발자 이상으로 가는 좋은 길잡이가 될것 같습니다.

다음에는 이책에도 포함이 되었지만 아래내용을 정리해서 글을 올려볼까 합니다.
  • 자바스크립트의 함수
  • 자바스크립트 에서의  Prototype 활용



비회원 HTML5_JS_CSS javascript, patterns, Prototype, 디자인패턴, 상속, 패턴