객체 다루기

this 키워드

해당 키워드가 사용된 자바스크립트 코드 영역을 포함하고 있는 객체

 

ex.

메소드 내부에서 사용된 this 키워드는 해당 메소드를 포함하고 있는 객체

객체 내부에서 사용된 this 키워드는 객체 그 자신

 

this - 변수가 아닌 키워드이므로, 사용자가 임의로 가리키는 값을 바꿀 수 없음

 

객체 생성자 함수 내부에서 사용된 this 키워드는 어떠한 값도 가지지 않으며, 단순히 새로운 객체로 대체됨

---

객체 프로퍼티의 삭제

문법

객체의 프로퍼티를 참조하는 방법

객체이름.프로퍼티이름

또는

객체이름["프로퍼티이름"]

 

 

delete 키워드를 사용하여 객체의 프로퍼티를 삭제

delete 객체이름.프로퍼티이름;

 

delete 키워드

프로퍼티의 값뿐만 아니라 프로퍼티 그 자체도 삭제

객체의 프로퍼티만을 삭제하기 위해 만들어졌음

함수나 변수에 사용하면 아무런 동작도 하지 않음

 

예제

function Dog(color, name, age) {
    this.color = color;
    this.name = name;
    this.age = age;
}
var myDog = new Dog("흰색", "마루", 1);
delete myDog.age; // age 프로퍼티를 삭제함.
// age 프로퍼티가 삭제되었기 때문에 undefined를 출력함.
document.write("우리집 강아지의 나이는 " + myDog.age + "입니다.");

코딩연습 ▶

직접 생성한 프로토타입은 위와 같이 새로운 프로퍼티나 메소드를 마음껏 추가하거나 삭제할 수 있음
물론 자바스크립트 표준 객체의 프로토타입도 임의로 수정할 수 있으나, 심각한 오류가 발생할 가능성이 있음
따라서 자바스크립트 표준 객체의 프로토타입은 수정해서는 안됨

---

객체 프로퍼티의 순회

for / in 문

객체의 모든 프로퍼티를 순회 가능

객체의 모든 열거할 수 있는 프로퍼티(enumerable properties)를 손쉽게 순회할 수 있도록 해줌

 

자바스크립트의 for / in 문에 대한 더 자세한 사항은 자바스크립트 반복문 수업에서 확인

자바스크립트 반복문 수업 확인 =>
 

객체의 프로퍼티를 순회하는 방법(for / in 문 이외)

1. Object.keys()

2. Object.getOwnPropertyNames()

 

Object.keys() 메소드 - 해당 객체가 가진 고유 프로퍼티 중에서 열거할 수 있는 프로퍼티의 이름을 배열에 담아 반환

Object.getOwnPropertyNames() 메소드 - 해당 객체가 가진 모든 고유 프로퍼티의 이름을 배열에 담아 반환

 

예제

function Dog(color, name, age) {
    this.color = color;
    this.name = name;
    this.age = age;
}
var myDog = new Dog("흰색", "마루", 1);

// color 프로퍼티의 enumerable 속성을 false로 설정함.
Object.defineProperty(myDog, 'color', {enumerable : false} );
// 객체가 가진 고유 프로퍼티 중에서 열거할 수 있는 프로퍼티 이름을 배열에 담아 반환함.

ocument.write(Object.keys(myDog) + "<br>");       // name, age
// 객체가 가진 모든 고유 프로퍼티의 이름을 배열에 담아 반환함.
document.write(Object.getOwnPropertyNames(myDog)); // color, name, age

코딩연습 ▶

Object.defineProperty() 메소드는 ECMAScript 5부터 추가된 객체에 프로퍼티를 추가해주는 메소드
이때 추가하는 프로퍼티의 속성까지도 설정할 수 있음

---

객체간의 비교

별개의 두 객체는 프로퍼티의 값이 모두 같아도, 절대로 같다고 말할 수 없음

예제

function Dog(color, name, age) {
    this.color = color;
    this.name = name;
    this.age = age;
}
var myDog = new Dog("흰색", "마루", 1);
var hisDog = new Dog("흰색", "마루", 1);      // 모든 프로퍼티의 값이 모두 같은 객체를 생성함.
document.write((myDog == hisDog) + "<br>");   // false
document.write((myDog === hisDog) + "<br>");  // false

var herDog = hisDog;                          // hisDog 객체를 변수 herDog에 대입함.
document.write((hisDog == herDog) + "<br>");  // true
document.write((hisDog === herDog) + "<br>"); // true

코딩연습 ▶

위의 예제에서 myDog과 hisDog 객체는 가지고 있는 프로퍼티의 값이 모두 같음

하지만 이 두 객체는 별개의 객체이므로, 동등(==) 연산자와 일치(===) 연산자로 비교해도 모두 false를 반환

 

위의 예제에서는 변수 herDog에 hisDog 객체를 대입

이렇게 객체를 대입한 변수를 객체 레퍼런스(object reference)라고 하며, 이제부터 변수 herDog은 hisDog 객체를 가리키게 됩니다.

즉, 객체 레퍼런스는 객체 자체를 저장하는 것이 아니라, 객체가 위치한 주소를 저장하는 것

따라서 변수 herDog과 hisDog을 동등 연산자와 일치 연산자로 비교하면, 모두 true를 반환

---

참고

http://www.tcpschool.com/javascript/js_object_handling

코딩교육 티씨피스쿨