자바스크립트 강의

[JavaScript] 1주차 - 객체

notion0896 2024. 10. 10. 10:17

객체는 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