[Javascript] 객체

객체

• 데이터를 { }로 감싸 객체를 정의
• 데이터 타입의 제한이 없음
• 키를 사용하여 데이터를 불러오거나 값을 변경할 수 있음
• const로 선언할 경우 객체 자체를 변경할 수는 없으나, 객체 안의 프로퍼티나 메서드는 변경이 가능
• 객체의 키와 속성 값이 같을 경우 하나로 입력가능

---

 

객체 선언

• 중괄호로 생성하면 쉼표로 연결하여 입력
• 객체 생성 시 key는 식별자와 문자열 모두 사용가능하나 식별자로 사용할 수 없는 단어 사용 시 문자열로 선언
• 객체 생성 시 new 예약어를 사용
• 변수로 선언된 key와 value를 객체 속성으로 활용 시 key는 []로 감싸 활용

 

//  객체 초기화 
const 객체명 = {}
const 객체명 = new Object()
//  객체 초기화 
const 객체명 = {
    key: value,
    key: value
}

// key와 value를 변수로 가지고 있는 경우 객체 선언방법
const myKey = 'name'
const myValue = 'myValue'
const obj = {
	[mykey] : myValue
    myValue// key와 value값이 동일한 경우 하나로 선언 가능
    
}

 

---

객체 접근

• 대괄호[] 또는 점(.)을 사용하여 접근
• 문자열로 지정한 키 접근 시 대괄호를 사용하여 접근
• 존재하지 않는 객체 접근 시 undefined 반환

// [형식] 객체명[키]
produce['name']

// [형식] 객체명.키
produce.name

---

객체 변경

• 대괄호[] 또는 점(.)을 사용하여 접근
• 문자열로 지정한 키 접근 시 대괄호를 사용하여 접근

// [형식] 객체명[키]=값
produce[name] = 'john'

// [형식] 객체명.키 = 값
produce.name = 'john'

---

객체 복사

• 스프레드 연산자와 Object.assign() 사용 시 얕은 복사가 이루어짐
• 얕은 복사 : 원본 객체의 값이 변경되면 복사한 객체의 값도 변경 됨 

메서드	설명	결과
[...복사대상객체]	스프레드 연산자를 활용한 객체 복사	객체
Object.assign({}, 복사대상객체)	객체 복사	객체

const obj1= {id:1, name:'john'}
const obj2 = {...obj1}
const obj3 =  Object.assign({}, obj1)

---

객체 키 존재 여부 확인

메서드	설명	결과
객체.hasOwnProperty(키)	객체 내 키 존재 여부 확인	boolean
'키' in 객체	객체 내 키 존재 여부 확인	boolean

const obj = {
	name: 'john',
	age : 20
}
obj.hasOwnProperty('age') /// ⇒ true
'age' in obj // ⇒ true
// null 여부 확인
obj.id != null // ⇒ false
// undefined 여부 확인
obj.name != undefined // ⇒ true

---

객체 요소를 배열로 받기

메서드	설명	결과
Object.keys(객체)	객체의 키 목록 반환	배열
Object.values(객체)	객체의 속성 목록 반환	배열
Object.entries(객체)	객체의 키,속성 목록 반환	배열

const obj = {
	name: 'john',
	age : 20
}
Object.keys(obj) // ⇒ [ 'name', 'age' ]
Object.values(obj) // ⇒ [ 'john', 20 ]
Object.entries(obj) // ⇒  [ [ 'name', 'john' ], [ 'age', 20 ] ]

 

---

객체 분해 할당(비구조화 할당)

• 객체의 데이터를 정리하여 대입하거나 객체의 일부 데이터를 추출하고  싶을 때 유용

메서드	설명
{키, 키, ...}= 객체	선언된 객체의 데이터이 키를 변수로 선언하여 값 활용
{변수 : 새로운 변ㅅ명} = 객체	새로운 변수이름을 설정하여 지정 가능

const obj = {
  name: 'john',
  age: 20,
};
const { name, age } = obj;
console.log(name, age); // ⇒ john 20
const { name: newname } = obj;
console.log(newname); // ⇒ john

---

객체 수정 제한

• 'use strict' 선언 시 해당 수정제한 설정 후 객체 변경 시 에러 발생
• ( TypeError: Cannot assign to read only property '키값' of object '#<Object>')

메서드	설명	반환
Object.freeze(객체)	객체 수정 제한	객체
Object.isFrozen(객체)	객체 수정 제한 확인	boolean
Object.seal(객체)	객체 속성의 변경은 가능, 추가 및 삭제 제한	객체
Object.preventExtensions(객체)	객체 속성의 삭제, 변경 가능, 추가 제한	객체

'use strict';
const obj = {
  name: 'john',
  age: 20,
};
Object.freeze(obj);
obj.name = 'jane'; /// ⇒ TypeError: Cannot assign to read only property '키값' of object '#<Object>'
Object.isFrozen(obj)
console.log("🚀 ~ Object.isFrozen(obj):", Object.isFrozen(obj)) // ⇒ true

// [Objec.seal()]
Object.seal(obj);
// obj.id = 1 // ⇒ Cannot add property id, object is not extensible
obj.age = 30
console.log(obj); // ⇒ { name: 'john', age: 30 }

// [Objec.preventExtensions()]
Object.preventExtensions(obj);
// obj.id = 1 // ⇒ Cannot add property id, object is not extensible
obj.age = 30;
console.log(obj); // ⇒ { name: 'john', age: 30 }

---

 

sources

객체 선언 및 활용 예

const person = {
	// 배열
	list : [
		{id: 1, name:'john'},
		{id: 2, name:'jane'}
	],
	// 함수
	method: ()=>{
		console.log('함수 선언');

	}
}
person.list[0].name
person.method();

---

객체의 프로토타입과 인스턴스

• 프로토타입 : 키와 속성을 담고 있는 기본 틀
• 인스턴스 : 프로토타입을 사용하여 만든 새로운 객체

메소드 내부의 this

• 메서드 내에서 자기 자신이 가진 속성을 출력하고자 할 때는 반드시 this 키워드 사용
• 화살표 함수의 this는 windows 객체를 가리키므로 메서드 함수 내에서는 잘 사용되지 않음

const pet = {
	name: '멍이',
	eat: function (food){
		console.log(`${this.name} ${food}를 먹음` ) // this키워드를 사용해 자신이 가진 속성에 접근 가능
	}
}

pet.eat('사료') // → 멍이는 사료를 먹음

---

동적 객체 생성

// [형태]

객체.추가할 key = 추가할 속성

객체['추가할 key'] = 추가할 속성

const person = {}
person.name ='John'
person.age = '20'

---

동적 객체 속성 제거

// [형태]
delete 객체.속성

delete 객체['키']

delete person.age