객체는 key, value 값으로 이루어진 배열을 말한다.
let person = {
name = 'kim',
age = 30,
gender = "여성",
}
이러한 객체가 있다.
객체에 접근하는 방법은
console.log(person.name) // kim
이런식으로 변수 이름과 내가 가져오고싶은 key값을 적으면 그 안에 있는 value값이 나온다.
객체 메소드 : Object.~~~
let person = {
name : "kim",
age : 30,
gender : "여성",
};
//Object.keys
let keys = Object.keys(person)
console.log(keys) // [ 'name', 'age', 'gender' ]
//Object.values
let values = Object.values(person)
console.log(values) // [ 'kim', 30, '여성' ]
//Object.entries
let entries = Object.entries(person)
console.log(entries) // [ [ 'name', 'kim' ], [ 'age', 30 ], [ 'gender', '여성' ] ]
//Object.assign
let newPerson = {};
Object.assign(newPerson, person)
console.log(newPerson) // { name: 'kim', age: 30, gender: '여성' }
entries와 assign 이라는 개념은 처음 보았는데
entries는 key, value값을 묶어서 배열로 만드는 배열이라고 한다. 즉 한 배열에 각각의 key값과 value값이 묶어져서 하나의 배열로 만들어주는 메소드이다.
assign은 객체를 복사하는 메소드이다.

메소드에 대한 설명이 나오는데 assign(target: {}, source: any) 라는 뜻은 target에 오는 것은 새로 채울 객체 이름이고, source에 오는 것은 새로운 타겟에 채워넣을 기존에 있던 객체의 이름이다.
그렇기 때문에 Object.assing(newPerson, person)이 되는것이다.
여기서 추가개념 하나 더!
let newPerson = {}
Object.assign(newPerson, person, {age:31})
console.log(newPerson)
// { name: 'kim', age: 31, gender: '여성' }
변경된 상태로 객체를 복사하고 싶으면 변경할 key, value값을 {} 중괄호 안에 넣고 같이
assign에 포함시키면 내가 원하는 key의 value값이 변경돼서 저장된다.
객체 비교 메소드 : JSON.stringify()
let person1 = {
name : "kim",
age : 30,
gender : "여성",
};
let person2 = {
name : "kim",
age : 30,
gender : "여성",
};
console.log(person1 === person2) // false
console.log(JSON.stringify(person1) === JSON.stringify(person2)) // true
객체는 일반 변수와 다르게 값이 아주 큰 데이터이기 때문에 배열 안의 값을 문자열로 입력하는것이 아니라 하나의 주소로 값을 저장하게 된다.
그렇기 때문에 person1, person2의 내용이 완벽히 일치하더라도 이 둘의 값은 같지 않다고 보게 된다.
이럴때 배열의 내용을 비교할 수 있는 메소드가 JSON.stringify() 이다.
이 메소드는 배열 안의 내용을 문자화 시켜 그 안의 내용을 들여다보겠다는 뜻의 메소드임. 그러면 person1, person2의 내용 값이 완벽히 똑같다는것이 확인되기때문에 true가 나온다.
객체 병합 : {...객체이름}
let person1 = {
name : "kim",
age : 30,
};
let person2 = {
gender : "여성",
};
let perfectPerson = {...person1, ...person2}
console.log(perfectPerson)
//{ name: 'kim', age: 30, gender: '여성' }
... 은 배열 안의 내용을 다 풀어 헤치겠다는 뜻!!
'자바스크립트 강의' 카테고리의 다른 글
| [JavaScript] 1주차 - 배열2 (0) | 2024.10.10 |
|---|---|
| [JavaScript] 1주차 - 배열1 (2) | 2024.10.10 |
| [JavaScript] 1주차 - 조건문 (1) | 2024.10.08 |
| [JavaScript] 1주차 - 함수 (2) | 2024.10.08 |
| [JavaScript] 1주차 - 연산자 (3) | 2024.10.08 |