강좌 & 팁
안녕하세요. 송기석입니다.
요즘 하고 있는 일이 즐거워 시간 가는 줄 모르고 일을 하고
있습니다. 일을 하다 보면 일이 잘 될 때도 있고 안될 때도 있습니다.
일을 하면서 가장 즐거운 순간은 하던 일을 잘 마무리 했을 때이지만 저는 일 자체를 즐기면서 항상 즐거운 마음을 가질 수 있어서 행복합니다.
제가 몸이 피곤하다고 평소에 하던 아침 운동 대신 잠을 조금
더 자고 있습니다. 그러다 보니 몸무게가 늘어났습니다. 살을
빼야지 하는 생각에 저녁을 굶고 일을 해봤습니다. 결론은 이것은 아니다 입니다. 저녁을 굶고 일을 해보니 배가 고파서 신경은 날카로운데 일이 평소만큼 즐겁지가 않습니다. 일을 즐겁게 하기 위해 아침에 일어나 운동을 해야 할 것 같습니다.
저번 주 글을 못 올려서 반성의 의미로 이어서 글을 올립니다.
05 프로토타입(Prototype)
모든 객체는 속성을 상속하는 프로토타입 객체에 연결되어 있습니다. 객체 리터럴로 생성되는 모든 객체는 자바스크립트의 표준 객체인 Object의
속성인 prototype(Object.prototype) 객체에 연결됩니다.
객체를 생성할 때는 해당 객체의 프로토타입이 될 객체를 선택할
수 있습니다. Objcet 객체에 create라는 메소드를
추가할 것입니다. create는 넘겨받은 객체를 프로토타입으로 하는 새로운 객체를 생성하는 메소드입니다.
if (typeof
Object.create !== ‘function’) {
Object.create = function (o) {
var F = function () {};
F.prototype = o;
return new F();
}
}
프로토타입 연결은
오직 객체의 속성을 읽을 때만 사용합니다. 객체에 있는 특정 속성의 값을 읽으려고 하는데 해당 속성이
객체에 없는 경우 자바스크립트는 이 속성을 프로토타입 객체에서 찾습니다. 이러한 시도는 프로토타입 채인의
가장 마지막 Object.prototype까지 계속 찾고 못 찾으면
undefined를 반환합니다. 프로토타입 관계는 동적 관계입니다. 만약 프로토타입에 새로운 속성이 추가되면, 해당 프로토타입을 근간으로
하는 객체들에는 즉각적으로 이 속성이 나타납니다.
06 리플렉션(reflection)
객체에 어떤 속성들이
있는지 특정 속성을 접근해서 반환하는 값을 보면 쉽게 알 수 있습니다. 이때 typeof 연산자는 속성의 타입을 알아 보는데 매우 유용합니다.
var flight = {
number : 10,
status : 'good',
arrival : {}
};
console.log(typeof flight.number); // ‘number’
console.log(typeof flight.status); // ‘string’
console.log(typeof flight.arrival); // ‘object’
console.log(typeof flight.manifest); // ‘undefined’
때때로 해당 객체의속성이
아니라 프로토타입 체인 상에 있는 속성을 반환할 수 있기 때문에 주의할 필요가 있습니다.
console.log(typeof flight.toString); // ‘function’
console.log(typeof flight.constructor);// ‘function’
리플렉션을 할 때
원하지 않는 속성을 배제하기 위한 방법은 함수값을 배제하는 방법과 객체에 특정 속성이 있는지를 확인하여
true/false 값을 반환하는 hasOwnProperty 메소드를 사용하는 것입니다.
console.log(flight.hasOwnProperty("number")); // true
console.log(flight.hasOwnProperty("constructor")); // false
07 열거(Enumeration)
for in 구문을 사용하면 객체에 있는 모든 속성의 이름을 열거할 수 있습니다.
이러한 열거 방법에는 함수나 프로토타입에 있는 속성 등 모든 속성이 포함되기 때문에 원하지 않는 것들은 걸러낼 필요가 있습니다. 가장 일반적인 필터링 방법은 hasOwnProeprty 메소드와
함수를 배제하기 위한 typeof를 사용하는 것입니다.
var another_stooge = {'first-name': 'Harry', 'middle-name': 'Moses', 'last-name': 'Moe', 'profession': 'actor'};
var name;
for (name in another_stooge) {
if (typeof another_stooge[name] !== 'function') {
console.log(name + ' :' + another_stooge[name]);
}
}
"first-name :Harry"
"middle-name :Moses"
"last-name :Moe"
"profession :actor"
for in 구문을 사용하면 속성들이 이름순으로 나온다는 보장이 없습니다. 특정
순서로 속성 이름들이 열거되기를 원한다면 for in 구문을 사용하지 말고 원하는 순서를 특정 배열로
지정하고 이 배열을 이용하여 객체의 객체의 속성을 열거할 수 있습니다.
var another_stooge = {'first-name': 'Harry', 'middle-name': 'Moses', 'last-name': 'Moe', 'profession': 'actor'};
var i;
var properties = [‘first-name’
, ‘middle-name’
, ‘last-name’
, ‘profession’
];
for (I = 0; I < properties.length; i +=1) {
document.writeln(properties[i]
+ ‘: ‘ +
another_stooge[properties[i]]);
}
"first-name :Harry"
"middle-name :Moses"
"last-name :Moe"
"profession :actor"
08 삭제
delete 연산자를 사용하면 객체의 속성을 삭제할 수 있습니다. delete 연산자는
해당 속성이 객체에 있을 경우에 삭제를 하며 프로토타입 연결 상에 있는 객체들은 접근하지 않습니다.
객체에서 특정 속성을
삭제했는데 같은 이름의 속성이 프로토타입 체인에 있는 경우 프로토타입의 속성이 나타납니다.
another_stooge.nickname //
‘Moe’
// another_stooge에서 nickname을 제거하면
// 프로토타입에 있는 nickname이 나타남
delete another_stooge.nickname;
another_stooge.nickname // ‘Curly’
09 최소한의 전역변수 사용
자바스크립트에서는
전역변수 사용이 매우 쉽습니다. 전역변수는 프로그램의 유연성을 약화시키기 때문에 가능하면 사용하지 않는
것이 좋습니다.
전역변수 사용을
최소화하는 방법 한 가지는 애플리케이션에서 전역변수 사용을 위해 다음과 같이 전역변수를 하나를 만드는 것입니다.
var MYAPP = {};
이제 이 변수를
다른 전역변수를 위한 컨테이너로 사용합니다.
MYAPP.stooge = {
“first-name”: “Joe”
, “last-name”: “Howard”
};
이러한 방법으로
애플케이션에 필요한 전역변수를 이름 하나로 관리하면 다른 애플리케이션이나 위젯 또는 라이브러리들과 연동할 때 발생하는 문제점을 최소화할 수 있습니다. 또한 MYAPP.stooge가 명시적으로 전역변수라는 것을 나타내기
때문에 프로그램 가독성도 높입니다.
객체에 대한 설명은
더글라스 크락포드의 자바스크립트 핵심 가이드를 참고 했습니다. 자세한 내용은 책을 참고 하세요.
