javascript - 객체의 property

김동하·2020년 10월 6일
0

객체는 new Object()나 Object.create()를 사용하여 초기화 할 수 있다.

Object.defineProperty()

const person = {
  name: "dongha",
  age: "12",
  hobby: ["play", "work"]
}

person.feeling = "good"

객체에 새로운 프로퍼티 주고 싶으면 이렇게 하면 된다. 기본적으로 할당된 속성은 enumerable과 configurable, writable 속성이 true다.

Object.defineProperty(person, "feeling",{
  value: "good"
})

Object.defineProperty()는 객체에 직접 새로운 속성을 정의하거나 이미 존재하는 속성을 수정하고 그 객체를 반환한다. feeling 속성은 value 속성을 가지므로 데이터 서술자를 지니게 된다. 수정 변환이 불가능하다. 객체 안에서 따로 true 설정을 해줘야 한다.

데이터 서술사 && 접근자 서술자가 가지는 키 -> configurable, enumerable
데이터 서술사만 가지는 키 -> value, writable
접근자 서술자만 가지는 키 -> get, set

const person = {
    name: "dongha",
    age: "12",
    hobby: ["play", "work"]
}

let myFeeling = "bad"

Object.defineProperty(person, "feeling", {
    enumerable: true,
    configurable: true,
    get() {
        return myFeeling
    },
    set(_myFeeling) {
        myFeeling = _myFeeling
    }
})
console.log(person)

만약 person.feeling을 하게 되면 get 함수가 실행된다. person.feeling = "soso"로 할당하면 값이 또 바뀐다.

    function Person(name, age) {
        const category = ["human"]
        let race = "asian"

        this.personName = name;
        this.age = age

        Object.defineProperty(this, "nationality", {
            enumerable: true,
            get() {
                return race
            },
            set(_nationality) {
                nationality = _nationality
                category.push(_nationality)
            }
        })

        this.getCategory = function() {
            return category
        }
    }

    const person1 = new Person("dongha", 12)
    person1.nationality = "europ"
    person1.nationality = "africa"
    console.log(person1.getCategory()) // [ 'human', 'europ', 'africa' ]

get과 set을 이용하여 변경값을 저장할 수도 있다.


const work = {
    taskName: "coding",
    level: "hard",
    duration: "2",
    location: "home",
    cooperation: ["dongha", "me", "you"],
    successMsg: function() {
        return `let's do a ${this.taskName} at ${this.location}`
    }
}

function Person(event, name, age) {
    this.name = name;
    this.age = age

    for (let prop in event) {
        if (event.hasOwnProperty(prop)) {
            Object.defineProperty(this, prop, {
                configurable: true,
                enumerable: true,
                get: function() {
                    return eventp[prop]
                },
                set: function(changedValue) {
                    event[prop] = changedValue
                }
            })
        }
    }
}
const newTask = new Person(work, "dongha kim", 50)
console.log(newTask)

이렇게 하면 생성자 함수에 다른 객체를 인자로 받아와서 속성으로 추가 가능하다!

출처 : https://im-developer.tistory.com/140

profile
프론트엔드 개발

0개의 댓글