[ 자바스크립트 ] 객체 - 생성 ( 생성자 함수, Object.create, 인스턴스 )

김수연·2022년 9월 24일

Object.create instance 객체 생성 생성자 함수 인스턴스

자바스크립트 스터디

목록 보기

6/14

📌 객체 생성

# 싱글 리터럴 객체

// 싱글 리터럴 객체 생성
const object = {
	property: 'value',
	method: function() {},
}

# 생성자 함수로 객체 생성

// 생성자 함수로 객체 생성
function NewObject(name,age) {
	this.name = name;
    this.age = age;
}
const newObject = new NewObject('syeon', 20);
  
console.log(newObject);  //NewObject { name: 'syeon', age: 20 }

# Object.create()

자바스크립트에서 제공하는 Object 함수의 내장 메서드로 객체를 생성한다.
Object.create(프로토 타입, 객체 서술자(기술자))

const obj = Object.create(Object.prototype, {
    name:{
        value: 'syeon',
        writable: false, // 덮어쓸 수 있나
        enumerable: false, // 열거할 수 있나
        configurable: false, // 객체 서술자를 수정할 수 있나
    }
})

obj.name = 'kim';
console.log(obj.name); // syeon 변하지 않음

for(const key in obj){
    console.log(); // 열거 불가능
}

console.log(obj instanceof Object);

프로토타입 객체 안에 저장될 속성값을 자세하게 서술할 수 있다.

📌 프로퍼티 열거

const obj = {
    prop1: 'value01',
    prop2: 'value02',
    prop3: 'value03',
    prop4: 'value04',
}

for(const key in obj){
	console.log(key); // prop1, prop2, prop3, prop4
}

key는 obj 객체의 키값을 출력하고 있다.
만약 value(값)을 출력하고 싶다면 어떻게 해야할까?

. vs [ ]

객체에서 값을 가져오는 방법은 .(Dot notation)과 [ ](Bracket notation)이 있다.

for(const key in obj){
	console.log(obj.key); // undefined
}

for(const key in obj){
	console.log(obj[key]); // value01 value02 value03 value04
}

console.log('prop1'); // value01

key변수는 string으로 출력이 되기 때문에 dot notation은 사용할 수 없지만
[ ]안에는 표현식이 들어갈 수 있기 때문에 key값을 넣어 출력 가능하다.

# 체이닝 조심

함수에서 체이닝이 일어나는 것처럼 객체는 프로토타입 체이닝이 일어난다.
현 객체에 값이 없으면 상위 프로토타입 객체를 살피면서 값을 찾는다.

만약 현재 객체에서만 값을 찾고 싶다면?

for(const key in obj){
  if(obj.hasOwnProperty('syeon')){
  	console.log(obj[key]); // 출력 안됨
  }
}

📌 프로퍼티 접근자 (getter, setter)

const person = {
    _firstName: 'syeon',
    lastName: 'kim',

    get firstName(){
        return this._firstName.toUpperCase();
    },

    set firstName(newFirstName){
        if(typeof newFirstName !== 'string'){
            this._firstName = 'undefined';
            return;
        }

        this._firstName = newFirstName;
    },

    get fullName(){
        return this.lastName + ' ' + this._firstName + ' 입니다.'
    }
}
person.firstName = 'it dorok';
console.log(person.firstName); // IT DOROK
console.log(person.fullName); // kim it dorok 입니다.

person.firstName = 'it dorok'; 
객체 속성을 설정하는 경우 setter가 실행되면서 받는 값이 string 인지 아닌지 판별후 값을 할당한다.

console.log(person.firstName); // IT DOROK
console.log(person.fullName); // kim it dorok 입니다.
속성값을 불러오는 경우 gettr가 실행되면서 조건에 맞게 값을 출력한다.

# 📌 인스턴스 (instance)

const me = {
    name: 'syeon',
    age : 10,
    location: 'Korea',
}

const me2 = {
    name: 'syeon',
    age : 10,
    location: 'Korea',
}

console.log(me == me2); // false