[JavaScript] 객체

객체

---

1️⃣ 객체 생성

2️⃣ 프로퍼티 열거

3️⃣ 프로퍼티 조작

4️⃣ 프로퍼티 접근자

5️⃣ 인스턴스

6️⃣ 생성자

 

1️⃣ 객체 생성

---

- 싱글 리터럴 객체

const obj = {
	property : "value",
    method : function() {  //객체가 함수 속성을 갖게되면 method라 불림
    }
}

- 생성자 함수

function obj(name){
	this.name = name;
}

>> new와 함께 쓰임

const NewObj = new obj('홍길동');
// NewObj { name : '홍길동' }

- Object.create 메소드 이용

const NewObj = Object.create(프로토타입, 객체서술자);

📌 객체서술자란 다음과 같다

const NewObj = Object.create(
	Object.prototype, 
    {
    	name : {
        	value: '홍길동',
            writable: true,  //덮어쓸 수 있는가
            enumberable: true, //열거할 수 있는가
            configurable: true, //객체 서술자를 수정할 수 있는가
        
        },
    },
 );
 
 NewObj
 //{ name : '홍길동' }
 
 //writable이 false일 경우
 
 NewObj.name = '도날드'
 NewObj
 //{ name : '홍길동' }

 

 

2️⃣ 프로퍼티 열거

---

const obj = {
    prop1 : value1,
    prop2 : value2,
    prop3 : value3,
    prop4 : value4
};

- for in 문

✅ 객체의 key를 열거할 수 있다

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

// prop1, prop2, prop3, prop4

✅ 객체의 value를 열거할 수 있다

obj.prop1  //value1
obj[prop2] //value2

for(const key in obj){
	console.log(obj[key]);
}

//value1, value2, value3, value4

 

 

3️⃣ 프로퍼티 조작

---

const person = {
    firstName : '홍',
    location : 'korea',
};

새로운 프로퍼티 추가

person.lastName = '길동';

person
//{ firstName: '홍', location: 'korea', lastName: '길동'}

//수정도 가능
person.lastName = '길순';
person
//{ firstName: '홍', location: 'korea', lastName: '길순'}

❓ const인데 왜 변경이 되는가

>> 재할당을 막을 뿐!

 

프로퍼티 삭제

delete person.location;

person
// {firstName: '홍', lastName: '길동'}

 

 

4️⃣ 프로퍼티 접근자

---

const person = {
    firstName : 'hong',
    lastName : 'gildong',
};

- getter

const person = {
    firstName : 'hong',
    lastName : 'gildong',
    
    get seong() {
      return this.firstName.toUpperCase(); //person.firstName과 동일
    },
};

console.log(person.seong);
// HONG

- setter

const person = {
    firstName : 'hong',
    lastName : 'gildong',
    
    set seong(newFirstName){
       if(typeof newFirstName !== 'string'){
          this.firstName = 'undefined name';
          return;
       }
    	this.firstName = newFirstName;
    },
};

person.seong = 12345;
console.log(person.seong);
// undefined name

 

 

5️⃣ 인스턴스

---

const me = {
   name: '홍길동',
   age: 20,
   location: 'korea',
};

const me2 = {
   name: '홍길동',
   age: 20,
   location: 'korea',
}

위와 같이 이름만 다른 객체가 존재한다.

이 둘을 비교한 결과는 다음과 같다.

console.log(me === me2);

//false

❓ 둘의 객체 내용은 같은데 왜 같다고 하지 않는가

>> 자바스크립트는 객체의 내용이 아닌 메모리 주소로 비교하기 때문!

>> 즉, 인스턴스는 고유의 객체라고 할 수 있다.

 

 

6️⃣ 생성자

---

동일한 템플릿으로 여러 다른 내용을 가진 객체들을 생성하고 싶다면 생성자를 이용해보자

function Persone(name, age, location){
    this.name = name;
    this.age = age;
    this.location = location
}

여기서 this는 생성될 인스턴스이다.

const me = new Person('홍길동', 20, 'korea');

me
// Person { name: '홍길동', age: 20, location: 'korea'}

요즘에는 잘 쓰이진 않음!