자바스크립트 완벽가이드 - 8.5 생성자 함수, 8.6 함수 프로퍼티와 메서드

1. 생성자 함수

 

생성자 함수는 객체의 프로퍼티들을 초기화 하는 함수이며 new 연산자와 함께 사용될 의도로 작성된다.

생성자는 9장에서 자세히 알아본다. 간략히 알아보자면 new 연산자는 새로운 객체를 생성하고

이 새롭게 생성된 객체를 this 키워드의 값으로 하여 생성자 함수를 호출한다.

 

 

 

2. 함수 프로퍼티와 메서드

 

앞에서 함수가 자바스크립트 프로그램의 데이터 값으로 사용될 수 있음을 알아보았다.

함수에 대해 typeof 연산자를 사용하면 "function" 문자열을 반환한다.

그러나 실제로 함수는 특수화된 종류의 자바스크립트 객체다.

함수도 객체이기 때문에 Date나 RegExp 객체처럼 프로퍼티와 메서드가 있다.

 

 

2.1 ) length 프로퍼티

 

앞의 절에서 알아본 바와 같이 함수의 몸체 안 arguments 배열의 length 프로퍼티는 함수가 건네받은 전달인자의 개수를 명시한다. 그러나 함수 그 자체의 length 프로퍼티는 다른 의미다. 이 읽기 전용의 프로퍼티는

함수가 건네받기를 기대하는 전달인자의 개수를 반환한다. 즉, 함수 매체변수 목록에 선언된 매개변수의

개수를 반환한다. 함수는 선언된 매개변수의 개수에 상관없이 임의 개수의 전달인자와 함께 호출될 수

있으며, 이 전달인자들은 arguments 배열을 통해 읽어올 수 있다는 사실을 상기하다.

 

function 객체의 length 프로퍼티는 함수에 선언된 매개변수가 정확히 몇 개인지 명시한다.

arguments.length와는 달리 length 프로퍼티는 함수 몸체의 안과 밖에서 모두 사용할 수 있다.

다음의 코드에서 정의한 check()라는 이름의 함수는 다른 함수의 argumnets 배열을 건네받아서 arguments.length 프로퍼티와 Function.length 프로퍼티(agruments.callee.length를 통해 접근할 수

있다)를 비교한다. 이 함수는 함수가 기대하는 것과 똑같은 개수의 전달인자를 실제로 건네받았는지 검사하고 만약 같지 않으면 예외를 발생시킨다. check() 함수 다음에는 check()가 실제로 어떻게 사용될 수 있는지

보이기 위한 테스트 함수 fs()를 정의한다.

function check(args) {

var actual = args.length;  // 실제로 건네받은 전달인자 개수
var expected = args.callee.length;  // 함수가 기대하는 전달인자 개수
if (actual != expected) {  // 두 수치가 일치하지 않으면 예외를 발생시킨다.

throw new Error("Wrong number of argument: expected: " +
expected + "; actually passed " + actual);

}

}

function f(x, y,z) {

// 메서드가 기대하는 개수의 전달인자를 실제로 전달 받았는지 검사한다.
// 그렇지 않다면 예외를 발생시킨다.
check(arguments);
// 이제 함수가 해야 할 나머지 일들을 수행한다.
return x + y + z;

}

 

 

 

2.2 ) prototype 프로퍼티

 

모든 함수에는 미리 정의된 prototype 객체를 가리키는 prototype 프로퍼티가 있다.

이 prototype 객체는 함수가 new 연산자를 통해 생성자로 사용될 때, 새 객체를 정의하는 과정에서

매우 중요한 역할을 수행한다. 이 프로퍼티에 관해서는 9장에서 자세히 설명한다.

 

 

2.3 )  나만의 함수 프로퍼티 정의하기

 

함수 호출의 경계를 넘어 존재가 유지되는 변수를 사용해야 할 때가 있다.

이때엔 전역 변수를 정의하여 네임스페이스를 지저분하게 하는 대신 Function 객체의 프로퍼티를 사용하는 것이 유용할 수 있다. 예를 들어, 여러분이 고유한 정수 값을 반환해주는 함수를 작성하려 한다고 가정하자.

 

이 함수는 절대로 같은 값을 반복하여 반환해서는 안 된다.

이를 위해서 함수는 이미 반환한 값들에 대한 정보를기록하고 있어야 하며 이 정보의 존재는 함수 호출의

경계를 넘어 지속되어야만 한다. 이 정보는 전역 변수에 저장할 수 있으나 한 함수에서만 사용되는 정보를

그렇게 전역으로 정의하는 것은 불필요한 작업이다. 이 경우에는 정보를 Function 객체의 프로퍼티에

저장하는 것이 더 좋다.

 

다음의 예는 호출될 때마다 고유한 정수값을 반환하는 함수의 예다.

// '정적' 변수를 생성하고 초기화 한다.
// 함수 선언은 코드가 실행되기 전에 처리된다. 따라서 다음과 같은 할당 연산을
// 함수 선언 이전에 실제로 수행할 수 있다.
uniqueInteger.counter = 0;

// 여기에 선언된 함수는 호출될 때마다 서로 다른 고유한 값을 반환한다. 이 함수는
// 마지막으로 반환한 값에 대한 정보를 기록하기 위하여 '정적' 프로퍼티를 사용한다.
function uniqeInteger() {

// '정적' 변수를 증가시키고 반환한다.
return uniqueInteger.counter++;

}

 

 

 

 

2.4) apply()와 call() 메서드

 

ECMAScript는 모든 함수에 대하여 call()과 apply() 메서드를 정의한다. 이 메서드를 사용하면 함수가 마치 다른 어떤 객체의 메서드인 것처럼 호출할 수 있다. call()과 apply() 메서드의 첫 번째 전달인자는 함수가

소속되어 호출될 객체를 지정하며 이 전달인자는 함수 몸체 안에서 this 키워드의 값이 된다.

 

call() 메서드의 나머지 전달인자들은 함수가 호출될 때 함수의 전달인자로 건네진다.

예를 들어, 함수 f()에 두 숫자를 전달하고이 함수를 마치 객체 o의 메서드인 것처럼 호출하려 한다면

다음과 같이 코드를 작성할 수 있다.

f.call(o, 1, 2);

이 표현은 다음의 코드와 유사하다.

o.m = f;
o.m(1, 2);
delete o.m;

apply() 메서드는 call() 메서드와 유사하지만 함수로 건네줄 전달인자들을 배열로 지정한다는 점이 다르다.

f.apply(o, [1,2]);

예를 들어 숫자 배열에서 최대값을 찾으려 할 때, Math,max() 함수에 배열의 원소들을 전달하기 위하여 apply() 메서드를 사용할 수 있다.

var biggest = Math.max.apply(null, array_of_numbers);

 

 

 

 

2.5 ) 유용한 함수들

 

이 절에서는 객체나 배열, 함수 등을 조작하기 위해 사용할 수 있는 몇 가지 유용한 함수들의 예를 다룬다.

우선 예 8-3의 객체를 위한 함수들부터 살펴보라.

예 8-3 객체용 함수들

// 객체 o의 열거 가능한 프로퍼티들의 이름을 담은 배열을 반환한다.
function getPropertyNames(/* object */ o) {

var r = [];
for(name in o) r.push(name);
return r;

}

// 객체 from의 열거 가능한 프로퍼티들을 객체 to로 복사한다.
// 만약 to가 null이면 새로운 객체를 생성한다. 이 함수는 결과로 객체 to를 반환하거나
// 새롭게 생성한 객체를 반환한다.
function copyProperties(/* object */ from, /* optional object */ to) {

if (!to) to = {};
for (p in from) to[p] = from[p];
return to;

}

// 객체 from의 열거 가능한 프로퍼티들을 객체 to로 복사하되,
// to에 의해 정의되지 않은 프로퍼티만 복사한다.
// 이 함수는 to에 미리 정의되어 있지 ㅇ낳은 값들에 대해 from에 저장해 둔
// 기본값들을 사용하려 할 때에 유용하다.
function copyUndefinedProperties(/* object */ from, /* object */ to) {

for (p in from) {

if (!p in to) to[p] = from[p];

}

}

다음으로는 예 8-4는 배열을 위한 함수들이다.

예 8-4 배열용 함수들

// 배열 a의 각 원소를 지정된 술어(predicate) 함수로 전달한다.
// 술어 함수가 true를 반환한 원소들로 이루어진 배열을 결과로서 반환한다.
function filterArray(/* array */ a, /* Boolean function */ predicate) {

var results = [];
var length = a.length; // 술어 함수가 배열의 길이를 반환할 경우에 대비하여
for (var i = 0; i < length; i++) {

var element = a[i];
if (predicate(element)) results.push(element);

}
return results;

}

// 배열 a의 각 원소를 지정된 함수 f로 전달하여 얻은 결과들을 원소로 하는
// 배열을 반환한다.
function mapArray(/* array */ a, /* function */ f) {

var r = [];  // 결과들을 저장할 배열
var length = a.length;  // 함수 f가 배열 길이를 변환할 경우에 대비하여
for (var i = 0; i < length; i++) r[i] = f(a[i]);
return r;

}

끝으로 예 8-5의 함수들은 함수 작업시 유용하게 사용할 수 있다.

이 함수들은 실제로 중첩된 함수를 사용하고 반환한다.

이렇게 반환되는 중첩된 함수들은 때때로 클로저(closure)라 불리며 이것은 혼란스러울 수 있다.

클로저는 다음 절에서 자세히 설명한다.

예 8-5 함수용 함수들

// 함수 f를 객체 o의 메서드로 하여 호출하는 독립형(standalone) 함수를 반환한다.
// 이것은 메서드를 함수에 전달하려 할 때 유용하다. 만약 함수를 그 함수의 객체와
// 연결하지 않으면, 그 연관 관계는 소실되며 전달한 메서드는 일반 함수처럼 호출된다.
function bindMethod(/* object */ o, /* function */ f) {

return function() { return f.apply(o, agruments); }

}

// 함수 f를 지정된 전달인자와 함께 호출해 주는 함수를 반환한다.
// 이렇게 반환된 함수는 또한 추가적인 전달인자들과 함께 호출될 수 있다.
// (이것은 때때로 'currying' 이라 불린다.)
function bindArguments(/* function */ f, /* initial agruments ... */) {

var boundArgs = arguments;
return function() {

// 전달인자들로 구성된 배열을 만든다. 이 배열은 이전에 건네받은 전달인자를
// 원소로 시작하여, 지금 추가로 건네받은 전달인자까지 포함한다.
var args = [];
for(var i = 1; i < boundArgs.length; i++) args.push(boundArgs[i]);
for(var i = 0; i < arguments.length; i++) args.push(arguments[i]);

// 이제 이 전달인자들과 함께 함수를 호출한다.
return f.apply(this, args);

}

}