1. 자바스크립트 객체에서 프로퍼티 삭제
1.1 delete 및 값 부여하기
const person = {
name : "홍길동",
age : 20,
}
person.name = null;
delete person.age;
console.log(person) // {name: null}- 개발자가 의도적으로 null을 입력해주어 값을 삭제하는 것도 가능.
하지만 undefined는 절대 직접 입력해서 값을 넣으면 안됨 - delete를 이용하여 프로퍼티를 삭제 하는것도 가능함.
2. 대괄호 프로퍼티 액세스
2.1 [ ]를 이용하여 프로퍼티에 접근하기
- 자바스크립트는 객체의 키값을 강제로 문자열로 변환함
- ' '또는" "를 이용하면 띄어쓰기를 이용한 키값도 설정이 가능함
- 숫자도 키값이 될 수 있음
- 띄어쓰기나 숫자로 설정된 값의 접근은 [ ]를 이용해야함
const person2 = {
'first name' : "홍",
1.5 : "1.5가 저장됨",
0 : "0도 키값이 될 수 있음"
'-1': "문자열을 이용하면 가능",
// -1 : "음수는 키값이 될수 없음", (X) 에러
age:20,
}
person2.first name // 에러 [ ]를 이용해 접근해야함 (X)
perosn2['first name'] // "홍" (O)
person2[1.5] // "1.5가 저장됨" (O)
person2['0'] // "0도 키값이 될 수 있음" (O)
person2['-1'] // "문자열을 이용하면 가능" (O)2.2 키값 동적으로 설정하기
[ ]를 이용하면 키값을 동적으로 설정할 수 있음.
const first = "firstName"
const last = "lastName"
const person = {
[first] : "홍",
[last] : "길동",
}
console.log(person) // {firstName: '홍', lastName: '길동'}
console.log(person.firstName) // "홍" (O)
console.log(person['firstName']) // "홍" (O)
console.log(person[firstName]) // ReferenceError: firstName is not defined (X)
console.log(person[last]) // "길동"3. 프로퍼티 순서
3.1 ES6 이전
- ES6이전의 자바스크립트에서는 객체의 프로퍼티 순서가 보장되지 않았음
- 객체는 내부적으로 해시 맵과 유사하게 구현되어 순서가 중요하지 않았음
- 프로퍼티에 대한 반복 순서는 일반적으로 객체에 속성이 추가된 순서와 일치하지 않았음
3.2 ES6 이후
- ES6이후 객체의 순서가 보장됨
- 객체의 프로퍼티의 순서가 프로퍼티가 추가된 순서와 동일함
문자로된 키값의 경우 프로퍼티의 순서가 추가된 순서와 동일
const myObject = {
b: 2,
a: 1,
c: 3,
};
for (const key in myObject) {
console.log(key); // 출력 순서: b, a, c
}
const keys = Object.keys(myObject);
console.log(keys); // 출력 순서: b, a, c숫자로된 키값의 경우 프로퍼티의 순서가 작은 숫자에서 큰 숫자 순으로 정렬됨.
const myObject = {
3: 'Three',
1: 'One',
2: 'Two',
10: 'Ten',
};
for (const key in myObject) {
console.log(key); // 출력 순서: 1, 2, 3, 10
}순서가 중요하다면 배열을 이용하거나 Map객체를 이용하는 것이 더 적절함.
객체는 키와 값 쌍으로 저장되어 있기 때문에 키값이 더 중요함.
4. 객체의 반복문 (For-in)
- for..in 문을 이용하면 객체 내부를 순회? 할 수 있다.
const person = {
name: "홍길동",
age: 20,
job: "회사원",
}
for(const key in person){
console.log('key: '+ key)
console.log('person[key]: '+ person[key])
}
"key: name"
"person[key]: 홍길동"
"key: age"
"person[key]: 20"
"key: job"
"person[key]: 회사원"for in을 이용하면 동적 키값도 사용할 수 있다.
const key1 = "key1";
const key2 = "sky";
const arr = [
{[key1]: "강아지"}, // 서로 다른 키값
{[key2]: "고양이"}, // 서로 다른 키값
]
arr.forEach((item)=>{
for(const key in item){ //for in을 이용하면 동적 키값을 이용가능
console.log(`${ [key] } : ${ item[key] }`)
//"key1 : 강아지" 와 "sky : 고양이" 가 출력됨.
}
})
5. 객체 복사
5.1 객체를 다른 변수에 할당하면 참조값이 할당됨
const person = {
name : "홍길동",
age : 20,
job : ["회사원","남편"]
}
const person2 = person
person.age = 30; // 원본 객체의 나이를 변경
console.log(person.age) // 30
console.log(person2.age) // 30
// 참조값이 할당되어 person을 바꾸면 person2도 바뀜.5.2 이를 피하기 위해 ...연산자를 이용해 깊은 복사할 수 있음
const person = {
name : "홍길동",
age : 20,
job : ["회사원","남편"]
}
const person2 = {...person} // ...연산자를 이용
person.age = 30;
console.log(person.age) // 30
console.log(person2.age) // 205.3 ...를 이용해도 객체 내부의 객체는 깊은 복사 되지 않음
const person = {
name : "홍길동",
age : 20,
job : ["회사원","남편"]
}
const person2 = {...person}
person.job.pop()
console.log(person.job) // ["회사원"]
console.log(person2.job) // ["회사원"]5.4 객체 내부의 객체까지 깊은 복사하려면 ...를 모두 사용해 주어야함.
const person = {
name : "홍길동",
age : 20,
job : ["회사원","남편"]
}
const person2 = {...person, job:[...person.job]}
person.job.pop()
console.log(person.job) // ["회사원"]
console.log(person2.job) // ["회사원","남편"]5.5 객체 병합 Object.assign()이용하기
- Object.assign()은 객체를 병합하는 메서드임
- 위 메서드를 이용해서 객체를 복사할 수 도 있음.
Object.assign() 이용해 객체 병합하기
const person = {
name : "홍길동",
}
const person2 = {
age : 30,
}
const person3 = {
job : "회사원",
}
const newPerson = Object.assign(person, person2, person3)
// 더 많은 객체가 올 수 있음
console.log(newPerson)
// {"name": "홍길동", "age": 30, "job": "회사원"}Object.assign() 이용해 객체 복사하기
const person = {
name : "홍길동",
}
const newPerson = Object.assign({}, person)
person.name = "김짱구"
console.log(person.name) // "홍길동"
console.log(newPerson.name) // "김짱구"Object.assign()도 내부 객체는 깊은 복사 되지않으므로 주의가 필요함.
const person = {
name : "홍길동",
job : ["회사원","남편"],
}
const newPerson = Object.assign({},person)
person.job.pop()
console.log(person.job) // ["회사원"]
console.log(newPerson.job) // ["회사원"]6. 객체 구조 분해
6.1 객체를 구조 분해로 사용해보기
const person = {
name : "홍길동",
age: 20,
job : ["회사원","남편"],
}
const { name } = person; //{ }를 이용해 해당 키의 값을 가져옴
// 구조 분해 되지않은 값들은 가져오지않음
console.log(name) // "홍길동"구조 분해에서 ...를 사용 할 수 도있음
const person = {
name : "홍길동",
age: 20,
job : ["회사원","남편"],
}
const { name, ...otherProps } = person;
console.log(name) // "홍길동"
console.log(otherProps) // {age: 20, job: Array(2)}구조 분해 후 이름 바꾸기 ( : 를 이용 )
const person = {
name : "홍길동",
}
const { name: chageName } = person; // :를 이용하면 이름을 바꿀수있음
console.log(name) // 없는 변수(출력되지않음)
console.log(chageName) //"홍길동"7. 객체의 프로퍼티 존재 확인하기
7.1 in 키워드를 이용해 프로퍼티 확인하기
const person = {
name : "홍길동",
age: 20,
job : ["회사원","남편"],
}
console.log("name" in person) // true
console.log("first" in person) // false- 이를 이용해 if문을 통해 분기 할 수도있음.
const person = {
name : "홍길동",
age: 20,
job : ["회사원","남편"],
}
if("name" in person){
// person객체에 name이라는 키가 있다면 진행 될 코드...
console.log("name 프로퍼티가 있을때...")
} else{
// person객체에 name이라는 키가 없다면 진행 될 코드...
console.log("name 프로퍼티가 없을때...")
}