[Javascript] 객체

객체

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

---

객체 선언

• 중괄호로 생성하면 쉼표로 연결하여 입력
• 객체 생성 시 key는 식별자와 문자열 모두 사용가능하나 식별자로 사용할 수 없는 단어 사용 시 문자열로 선언
• 객체 생성 시 new 예약어를 사용
• 변수로 선언된 key와 value를 객체 속성으로 활용 시 key는 []로 감싸 활용
• ES6부터는 변수를 키와  값으로 하는 객체 생성이 가능, 변수 이름이 속성과 동일하여 두 번 표기하지 않아도 됨

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

// key와 value를 변수로 가지고 있는 경우 객체 선언방법
const myKey = 'name';
const myValue = 'myValue';
const age = 20;
const obj = {
  [myKey]: myValue,
  age, // 변수를 키와 값으로 하는 객체 만들기
  myValue, 
};

console.log(obj.age); // ⇒ 20

---

객체 접근

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

// [형식] 객체명.키, .뒤에 키 이름
produce.name

// [형식] 객체명[키], []안에 키 이름을 문자열로
produce['name']

---

객체 변경

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

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

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

const person1 = {
  name: 'john',
  age: 20,
  married: false,
};

person1.age++;
person1['name'] = 'mike'
console.log(person1); // { name: 'mike', age: 21, married: false }

---

객체 속성 추가

• . 뒤에 새로 넣을 키 이름 작성하여 value값을 지정
• [] 문자열로 작성하여 value값을 지정

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

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

const person1 = {
  name: 'john',
  age: 20,
  married: false,
};
// [형식] 객체명.추가할 key = 추가할 value
person1.gender = 'male';
// [형식] 객체명['추가할 key'] = 추가할 value
person1['blood'] = 'B';
console.log(person1); // { name: 'john', age: 20, married: false, gender: 'male', blood: 'B' }

---

객체 .와 [] 접근 차이

방식 문법 사용 조건 설명

방식	문법	사용 조건	설명
마침표 표기법	obj.key	고정된 키 이름일 때만 가능	변수나 특수문자 키는 못 씀
대괄호 표기법	obj["key"] 또는 obj[변수]	동적인 키 / 특수문자 키	문자열이나 변수 사용 가능 변수, 공백, 특수문자, 동적 키 다루기 위해 사용

[] 사용 예

1. 키 이름이 동적(변수) 일 때

const key = "name";
const user = { name: "Tom" };

console.log(user[key]); // "Tom"
// user.key는 "name"이 아닌 undefined 반환됨

2. 키 이름에 공백, 숫자 시작, 특수문자가 있을 때

const data = {
  "user name": "Alice",
  "1value": 100,
  "email@domain": "test@example.com"
};

console.log(data["user name"]);     // 가능
console.log(data["1value"]);        // 가능
console.log(data["email@domain"]);  // 가능

// data.user name ← ❌ 문법 오류

 3.객체 속성을 for문 등에서 순회할 때

 

const obj = { a: 1, b: 2 };

for (const key in obj) {
  console.log(obj[key]); // 동적으로 접근
}

---

객체 복사

• 스프레드 연산자와 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 }

---

"객체는 읽고, 복사하고, 막는다!"
→ keys / values / entries → assign / clone → freeze / seal

상황별 함수 사용

구분	함수	설명
객체를 반복할 때	Object.entries() + forEach	키-값 동시에 다룰 수 있음
객체를 복사할 때	Object.assign() 또는 structuredClone()	전자는 얕은 복사, 후자는 깊은 복사
객체의 속성 이름들만 필요할 때	Object.keys()	반복문 돌릴 때 자주 사용
객체 속성을 고정하고 싶을 때	Object.freeze() / Object.seal()	설정 변경을 막고 싶을 때

sources

객체 선언 및 활용 예

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

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

const n = 'test'
const obj = {
	[n] : 'new' // 객체 동적 수정 방법
}

// 이전 선언 방식
var n = 'test'
var obj ={} // 먼저 객체를 생성한 후 객체 수정 가능
obj[n] = 'new'

---

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

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

메소드 내부의 this

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

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

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

---

 

동적 객체 속성 제거

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

delete 객체['키']

delete person.age

---

ES6 객체 표현

객체 함수 추가

const obj = {
	test() { // function 키워드 없이 함수 선언 가느
		console.log('test');
	},
	// 화살표 함수 선언 방법
	test2 : ()=>{

	}
}

객체 속성 동적 정의

const n = 'test'
const obj = {
	[n] : 'new' // 객체 동적 수정 방법
}

---