2023. 4. 16. 21:20ㆍzerobase/javascript
1. 객체 기본
객체는 사전적인 정의로 실제 존재하는 것을 의미함
1) 객체 생성: {}중괄호나 객체 생성자로 생성
const obj = {};
const obj = new Object();
2) 객체 구조
사람 = {
key: value}
// 이 때 중괄호 안에 들어가는 key: value를 프로퍼티(property)라고 함
3) 객체 접근
점 표기범 : obj.key
대괄호 표기법 : obj[key]
사람. 성별
사람. 말하다()
2. 객체 응용
1) 객체 관련 함수
- 삭제 : delete obj.name;
- 프로퍼티 유무 : property1 in obj
- 반복 : for (변수 in obj) { // 변수를 이용한 코드 }
- 옵셔널 체이닝 : obj?.property?.subProperty
- 구조 분해 할당: const { property } = obj;
const person = {
name: '아무개', // 프로퍼티
something: '',
talk: (sentence) => { // 메서드
console.log(sentence);
}
};
person.talk(`제 이름은 ${person.name}입니다.`); // 점표기법으로 접근
person.name = '우희은';
person.talk(`제 이름은 ${person.name}입니다.`);
console.log('something' in person); // 프로퍼티 존재 유무 확인 //true
person.something = undefined;
console.log(person); // 프로퍼티가 삭제되진 않음
delete person.something; // 프로퍼티 삭제
for (let key in person) { // 반복
console.log(key);
}
// console.log(person.address.city); // TypeError: Cannot read properties of undefined Error
console.log(person.address?.city); // undefined -> 옵셔널 체이닝
const { address } = person; // 구조 분해 할당
console.log('address', address);
2) 객체 참조
객체는 주소 값으로 표현된다.
Object.assign(빈 객체, 복사 대상 객체)를 이용하면 값 복사가 가능하다.
const person = {
name: '아무개', // 프로퍼티
something: '',
talk: (sentence) => { // 메서드
console.log(sentence);
},
obj: {
changed: false,
}
};
const person2 = person;
person2.name = '이유정';
person.talk(`제 이름은 ${person.name}입니다.`); // person도 변경됨 //제 이름은 이유정입니다.
const person3 = Object.assign({}, person); // 값 복사
person3.name = '오유진';
person.talk(`제 이름은 ${person.name}입니다.`); // person 변경 안됨 // 제 이름은 이유정입니다.
person3.obj.changed = true;
console.log(person.obj.changed); // 내부의 obj 프로퍼티는 주소 참조 중 //true
주소 값을 복사하는 Shallow copy와 실제 값을 새로운 메모리 공간에 복사하는 Deep copy가 있음
Shallow copy는 참조하고 있는 실제 값은 같으나, Deep copy는 실제 값이 다
const obj = {
a: 1,
b: {
c: 2,
d: 3,
}
};
const obj2 = Object.assign({}, obj); //shallow copy
obj2.b.c = 0;
console.log(obj); // 0으로 바뀌어있음 //{ a: 1, b: { c: 0, d: 3 } }
const deepCopy = (origin) => {
const result = {};
for (let key in origin) {
if (origin[key] != null && typeof origin[key] === "object") {
result[key] = deepCopy(origin[key]);
} else {
result[key] = origin[key];
}
}
return result;
}
const obj3 = deepCopy(obj);
obj3.b.c = -1;
console.log(obj); //{ a: 1, b: { c: 0, d: 3 } }
console.log(obj3); //{ a: 1, b: { c: -1, d: 3 } }
3) this, 생성자 함수
- 객체의 메서드 실행 시, this는 메서드를 호출한 객체
const obj = {
value: 1,
func: () => {
console.log(this.value);
}
};
obj.func();
- new 키워드로 생성자 함수 호출 시 this가 만들어지고 반환됨
function Obj(value) {
// this = {};
this.value = value;
this.func = function(){
console.log(this.value);
}
// return this;
}
const obj = new Object(1);
obj.func();
const products = {
date: new Date('2022-07-16T00:00:00'),
names: ["가지", "오이", "파프리카", "당근"],
buyAll: function () {
// this -> products
const buy = (name) => { //화살표함수
console.log(`${this.date.toLocaleString()}에 ${name}을 구매합니다.`);
}
const buy2 = function (name) {//함수 표현식 기본
console.log(`${this.date.toLocaleString()}에 ${name}을 구매합니다.`);
}.bind(this); //this 주입
this.names.forEach((name) => {
buy(name); // no Error -> this가 원래 없음 -> 상위 this인 products 할당
buy2(name); // Error -> 호출한 객체가 없음 -> this에 전역 객체 할당
})
}
};
products.buyAll();