[TCP School/자바스크립트] 객체 - 객체 다루기

---

this 키워드

자바스크립트에서 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 프로퍼티를 삭제

document.write('우리집 강아지의 나이는 ' + myDog.age + '입니다.');  // age 프로퍼티가 삭제되었기 때문에 undefined가 출력됨.

---

객체 프로퍼티의 순회

자바스크립트에서는 for / in 문을 사용하여 객체의 모든 프로퍼티를 순회할 수 있다.

for / in 문은 객체의 모든 열거할 수 있는 프로퍼티(enumerable properties)를 쉽게 순회할 수 있도록 해준다.

 

객체의 프로퍼티를 순회하는 방법으로는 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);

Object.defineProperty(myDog, 'color', {enumerable: false});

// 객체가 가진 고유 프로퍼티 중에서 열거할 수 있는 프로퍼티 이름을 배열에 담아 반환
document.write(Object.keys(myDog) + '<br>');  // name, age
// 객체가 가진 모든 고유 프로퍼티의 이름을 배열에 담아 반환
document.write(Object.getOwnPropertyNames(myDog)); // color, name, age

위 예제에서 Object.defineProperty는 객체에 프로퍼티를 추가해주는 메소드이다.

이 때 추가하는 프로퍼티의 속성까지도 설정할 수 있다.

---

객체간의 비교

자바스크립트에서 별개의 두 객체는 프로퍼티의 값이 모두 같아도, 절대로 같다고 말할 수 없다.

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;
document.write((hisDog == herDog) + '<br>');  // true
document.write((hisDog === herDog) + '<br>');  // true

위의 예제에서 myDog와 hisDog는 가지고 있는 프로퍼티의 값이 모두 같다.

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

 

herDog에 hisDog를 대입했는데, 이렇게 객체를 대입한 변수를 객체 레퍼런스(object reference)라고 하며, 변수 herDog는 hisDog의 주소를 가리키게 된다.

따라서 동등 연산자와 일치 연산자로 비교하면 모두 true를 반환한다.

---

TCP School의 강의 내용을 정리한 포스트입니다.

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

코딩교육 티씨피스쿨