[JavaScript] 객체 다루기

this 키워드

- 해당 키워드가 사용된 코드 영역을 포함하고 있는 객체를 가리킴

- 메소드 내부) 해당 메소드를 포함하고 있는 객체를 가리킴

- 객체 내부) 객체 그 자신을 가리킴

- 객체 생성자 함수 내부) 어떠한 값도 갖지 X, 단순히 새로운 객체로 대체

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

 

 

객체 프로퍼티의 삭제

- delete 키워드 이용

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

- 프로퍼티의 값 + 프로퍼티 그 자체 삭제

- 함수 / 변수에 사용하면 아무런 동작 X

function Dog(color, name, age) {
    this.color = color;
    this.name = name;
    this.age = age;
}

const myDog = new Dog("흰색", "마루", 1);

delete myDog.age; // age 프로퍼티를 삭제함.

// age 프로퍼티가 삭제되었기 때문에 undefined를 출력함.
console.log(myDog.age);	// undefined

- 자바스크립트 표준 객체의 프로토타입도 임의로 수정 가능하나 심각한 오류가 발생할 수 있으므로 수정하지 말 것

 

 

객체 프로퍼티의 순회

1. for / in 문 사용

for (변수 in 객체) {
    객체의 모든 열거할 수 있는 프로퍼티의 개수만큼 반복적으로 실행하고자 하는 실행문;
}

2. Object.keys()

- 고유 프로퍼티 중 열거할 수 있는 프로퍼티의 이름을 배열에 담아 반환

 

3. Object.getOwnPropertyNames()

- 모든 고유 프로퍼티의 이름을 배열에 담아 반환

function Dog(color, name, age) {
    this.color = color;
    this.name = name;
    this.age = age;
}

const myDog = new Dog("흰색", "마루", 1);

// color 프로퍼티의 enumerable 속성을 false로 설정함.
Object.defineProperty(myDog, 'color', {enumerable : false} );

// 객체가 가진 고유 프로퍼티 중에서 열거할 수 있는 프로퍼티 이름을 배열에 담아 반환함.
console.log(Object.keys(myDog));       // name, age

// 객체가 가진 모든 고유 프로퍼티의 이름을 배열에 담아 반환함.
console.log(Object.getOwnPropertyNames(myDog)); // color, name, age

* 프로퍼티의 enumerable 속성 변경 => Object.defineProperty(객체, 속성, {enumerable : false});

* Object.defineProperty

- ES5 부터 추가된 프로퍼티 추가 메소드

- 추가하는 프로퍼티의 속성 설정도 가능

 

 

객체간의 비교

- 별개의 두 객체는 프로퍼티의 값이 모두 같아도 절대 같다고 할 수 X

function Dog(color, name, age) {
    this.color = color;
    this.name = name;
    this.age = age;
}

const myDog = new Dog("흰색", "마루", 1);
const hisDog = new Dog("흰색", "마루", 1);      // 모든 프로퍼티의 값이 모두 같은 객체를 생성함.

console.log(myDog == hisDog);   // false
console.log(myDog === hisDog);  // false

const herDog = hisDog;                          // hisDog 객체를 변수 herDog에 대입함.

console.log(hisDog == herDog);  // true
console.log(hisDog === herDog); // true

- herDog : 객체를 대입한 변수 = 객체 레퍼런스

- 객체 자체의 저장이 아닌 객체가 위치한 주소 저장

 

 

 

 

 

http://tcpschool.com/javascript/js_object_handling

코딩교육 티씨피스쿨