1.01 ^ 365 = 37.78

[자바스크립트를 깨우치다] Chapter02_객체와 속성 다루기 본문

카테고리 없음

[자바스크립트를 깨우치다] Chapter02_객체와 속성 다루기

Youngchangoon 2016. 8. 31. 23:11

Chapter02

Chapter 02. 객체의 속성 다루기


복합객체는 자료형의 대부분을 속성을 포함 할 수 있다.

var myObjet = {};

myOjbect.myFunction = function() {};
myOjbect.myArray = [];
myOjbect.myString = "string";
..등등

var myNumber = new Number();
myNumber.myArray = []; 


여기서 끝이 아니라 new로 만들어진 String(), Number() 등에도 임의의 속성을 포함 할 수 있다.
( new 로 만들어지면 객체 취급을 받기 때문 )

복합객체에 다른 객체 포함하기

Object(), Array(), Function() 객체는 다른 복합객체를 포함 할 수 있다.

var obj1 {
    obj1_1 :{
        obj1_1_1: {foo : 'bar'},
        obj1_1_2: {},
    },
    obj1_2 :{
        obj1_2_1: {},
        obj1_2_2: {},
    }
};

console.log(obj1.obj1_1.obj1_1_1.foo); // 'bar'

// 다중 배열
var myArr = [[[]]];

// 빈함수 속에 빈함수가 있을 수 있다.
var myFunc = function() {  
    // 내용 x
    var myFunc = function() { 
        // 내용 x
        var myFunc
    }
}

// 다 섞는것도 가능
var foo = [{
    foo: [{
        bar: {
            say : fucntion() {
                return "hi";
            }
        }
        }];
    }];

점 표기법과 괄호 표기법을 사용한 객체 속성 접근

점 표기법 or 각괄호표기법을 사용해 객체의 속성을 get/set할 수 있다.

var cody1 = new Object();
// 점 표기법
cody1.living = true;
cody1.age = 19;
cody1.gender = "male";
cody1.getGender = function() { return cody1.gender; }

// 각괄호 표기법
var cody2 = new Object();
cody2["living"] = true;
cody2["age"] = 19;
cody2["gender"] = "male";
cody2.getGender = function() { return cody2.gender; }


- set은 설정할 때와 똑같다.
- 대부분은 점표기법이 활용된다.
- 필요한경우에만 각괄호 표기법을 사용하는데, 키에 접근할때 편리하다.
- 각괄호 표기법은 자바스크립트 예약어도 가능하다 ( 물론 점표기법은 불가능 )

객체 속성 삭제하기

delete 연산자를 이용하면 객체에서 특정속성을 완전히 삭제할 수 있다.

var foo = { bar : "bar" };
delete foo.bar;
console.log("bar" in foo ); // false

객체 속성의 참조를 찾는 법

접근한 속성이 객체에 포함 되어있지 않으면 항상 prototype 체인을 이용해 속성과 메소드를 찾는다.

var myArr = ["foo", "bar"];

conosle.log(myArr.join()); // Array.prototype.join으로 정의되어있다.

자바스크립트는 join()이라는 함수를 찾으려한다.
1. myArr에 속성들을 확인한다.
2. 없을 경우, Array.prototype.join 이 있는지 확인한다.
3. 없을 경우, Object.prototype.join 이 있는지 확인한다.
4. 아예 없을 경우 undefined를 반환한다.
위의 경우, join이라는 함수는 Array.prototype에 정의되어 있기 때문에 Array.prototype.join의 함수가 실행된다.

hasOwnProtperty를 사용해 프로토타입 체인에서 상속받은 속성인지 확인하기

in 연산자를 이용하면 상속받은 속성까지 포함하지만,
hasOwnProperty 메소드를 사용하면 prototype을 상속받지 않은 객체의 고유한 것인지 확인할 수 있다.

var myObj = {foo: "value"};

console.log(myObj.hasOwnProperty("foo")); // true
console.log(myObj.hasOwnProperty("toString")) // false

console.log("foo" in myObj); // true
console.log("toString" in myObj) // true;

for in 루프를 사용해 객체의 속성 탐색하기

for in문을 사용하면 객체의 각 속성을 탐색할 수 있다.

var cody = {
    age : 23,
    gender : "male",
};

for(var key in cody){
    if(cody.hasOwnProperty(key)){
        console.log(key);
    }
}
  • for in 루프의 단점 : 이 객체 뿐만아니라 다른 객체에 상속받은 속성까지 탐색함
    -> hasOwnProperty를 이용하면 됨
  • 순서가 뒤죽박죽일 수 있다.