자바스크립트 핵심 가이드 - (함수 1탄)

함수는 자바스크립트에서모듈화의 근간입니다. 

함수는 코드의 재사용이나 정보의 구성 및 은닉 등에 사용하고, 객체의 행위를 지정하는데도 사용합니다. 

함수를 다른 객체와 구분 짓는 특징은 호출할 수 있다는 것이다.

 

1. 함수 객체

자바스크립트에서 함수는 객체입니다. 함수객체는 Function.prototype에 연결됩니다.

 

2. 함수 리터럴

함수 객체는 함수 리터럴로 생성할 수 있다.

var add = function (a, b) {    return a + b; };

함수 리터럴로 생성한 함수 객체는 외부 문맥으로의 연결이 있는데 이를 클로저(closure)라고 합니다.

클로저는 강력한 표현력의 근원입니다.

 

3. 호출

자바스크립트에는 함수를 호출하는데 메소드 호출 패턴, 함수 호출 패턴, 생성자 호출 패턴, apply 호출 패턴이라는 네 가지 패턴이 있다.

각각의 패턴에 따라 this 라는 추가적인 매개변수를 다르게 초기화 한다.

- 메소드 호출 패턴

  함수를 객체의 속성에 저장하는 경우 이 함수를 메소드라고 부른다. 

  호출되는 표현식이 세부지정(마침표 또는 [])을 포함하고 있으면 이 방법이 메소드 호출 방법이다.  

// value와 increment 메소드가 있는 myObj 생성. // increment 메소드의 매개변수는 선택적 // 인수가 숫자가 아니면 1을 기본값으로 사용   var myObj = {    value : 0,    increment : function ( inc ) { this.value += typeof inc === 'number' ? inc : 1;    } };   myObj.increment(); document.writeln(myObj.value);   // 1   myObj.increment(2); document.writeln(myObj.value);   // 3

 

   자신의 객체 문맥을 this 로 얻는 메소드를 퍼블릭 메소드라고 부른다.

 

- 함수 호출 패턴

  함수가 객체의 속성이 아닌 경우에는 함수로서 호출한다.

var sum = add(3, 4);

  

- 생성자 호출 패턴

  자바스크립트는 프로토타입에 의해 상속이 이루어지는 언어이다. 

  오늘날의 대부분의 언어는 클래스를 기반으로 하고 있지만 자바스크립트는 클래스가 없다.

  클래스 기반의 프로그래밍에 익숙한 프로그래머들에게 프로토타입에 의한 상속은 받아들여지지 못했고, 클래스를 사용하는 듯한 구문은 

  자바스크립트의 진정한 프로토타입적 속성을 애매하게 만들었다. 이는 양쪽 모두에게 최악의 결과이다.

  함수를 new 라는 전치 연산자와 함께 호출하면, 호출한 함수의 prototype 속성의 값에 연결되는 (숨겨진) 링크를 갖는 객체가 생성되고, 

  이 새로운 객체는 this에 바인딩 된다. 

  new 라는 전치 연산자는 return 문장의 동작을 변경한다. 

var Quo = function ( string ) {   this.status = string; }   Quo.prototype.get_status = function ( ) {   return this.status; }   var myQuo = new Quo("confused");   document.writeln(myQuo.get_status( ));    // confused

  new라는 전치 연산자와 함께 사용하도록 만든 함수를 생성자(constructor)라고 한다. 

 

- apply 호출 패턴

  자바스크립트는 함수형 객체지향 언어이기 때문에, 함수는 메소드를 가질 수 있다.

  ?????  

 

4. 인수 배열 (arguments)

  이 arguments 라는 매개변수는 매개변수의 개수를 정확히 정해놓지 않고, 넘어오는 인수의 개수에 맞춰서 동작하는 함수를 만들 수 

  있게 한다.

var sum = function ( ) {   var i, s = 0;   for ( i = 0; i < arguments.length; i += 1 ) {      s += arguments[i];   }   return s; }   document.writeln( sum(4, 8, 15, 23, 42) );  // 108

 

5. 반환

  함수가 끝나면 프로그램의 제어가 함수를 호출한 부분으로 반환된다. 

  return 문은 함수의 끝에 도달하기 전에 제어를 반환할 수 있다. 함수는 항상 값을 반환하며 반환값이 지정되지 않는 경우 undefined가

  반환된다. 함수를 new 라는 전치 연산자와 함께 실행하고 반환값이 객체가 아닌 경우 반환값은 this(새로운 객체) 가 된다.

 

6. 예외

var add = function ( a, b ) {   if (typeof a !== 'number' || typeof b !== 'number') {      throw {        name : 'TypeError',        message : 'add needs numbers'      };   }   return a + b; }   var try_it = function ( ) {   try {      add("seven");   }catch(e) {       document.writeln(e.name + ' : ' + e.message);   } }   try_it ( );

 

 

7. 기본 타입에 기능 추가

Function.prototype.method = function ( name, func ) {   this.prototype[name] = func;   return this; };   Number.method('integer', function( ){   return Math[this < 0 ? 'ceiling' : 'floor'](this); // ceiling 을 왜 해석하지 못할까.? });   document.writeln( (-10/3).integer( )); // -3   String.method('trim', function ( ) {   return this.replace(/^\s+|\s+$/g,''); });

기본 타입의 프로토타입은 public 구조 이다. 그러므로 라이브러리들을 섞어서 사용할 때는 주의할 필요가 있다. 

존재하지 않는 메소드만 추가 하자. 안그러면 기존의 메소드를 덮어 써 버린다.

Function.prototype.method = function( name, func ) {   if ( ! this.prototype[name] ){      this.prototype[name] = func;   } };

 

8. 재귀적 호출

100만년 만에 해보는 하노이 탑 

var honoi = function (disc, src, aux, dst){    if(disc > 0){      hanoi(disc - 1, src, dst, aux);      document.writeln('Move disc' + disc + ' from ' + src + ' to ' +  dst);      hanoi(disc -1, aux, src, dst);    } }; hanoi(3, 'Src', 'Aux', 'Dst');

재귀 함수는 웹 브라우저의 DOM(Document Object Model) 같은 트리 구조를 다루는데 매우 효과적이다.

즉 각각의 재귀적 호출이 트리 구조의 항목 하나에 대해 작동하면 효율적으로 트리 구조를 다룰 수 있다.

주어진 노드로부터 HTML 소스 순으로 DOM 트리의 모든 노드를 방문하는 함수. var wolk_the_DOM = function walk(node, func){   func(node);   node = node.firstChild;   while(node) {     walk(node, func);     node = node.nextSibling;   } };