[JS] 객체 데이터 접근, 객체 메소드, 비교, 병합

 

 

객체의 데이터를 가져와보자!

let aoto = {
  name: "yae",
  bornYear: 2023,
  isVeryNice: ture,
  hateFood: null,
  favoriteMovie: {
    title: "괴물",
    leadRole: "쿠로카와 소야", "히이라기 히나타"
  }
}

 

💡 점 표기법

console.log(aoto.bornYear) // 2023

 

❗️주의) 점 표기법은 따옴표로 감싸진 값은 가져올 수 없다!

let aoto = {
  name: "yae",
  "born Year": 2023
}

console.log(aoto.born Year) // XXX 접근불가 XXX
console.log(aoto."born Year") // XXX 접근불가 XXX

 

💡 대괄호 표기법 (위 상황 해결 가능)

let aoto = {
  name: "yae",
  "born Year": 2023
}

console.log(aoto["born Year"]) // 2023
console.log(aoto["born " + "Year"]) // 2023

let propertyName = "name"
console.log(aoto[propertyName]) // yae

 

대괄호를 열면 문자열로 만들 수 있는 어떤 방법이든 사용 가능하다.

또한, 변수를 통해 불러오는 것도 가능하다!

 

➕ 아래처럼 ``안에서 key를 가져올 땐 대괄호 표기법만 가능

for (let key in aoto) {
  console.log(`${key} : ${aoto[key]}`);
}
// name : yae
// born Year : 2023

 

💡 객체 안의 객체 가져오기

let aoto = {
  favoriteMovie: {
    title: "괴물",
    leadRole: "쿠로카와 소야", "히이라기 히나타"
  }
}

console.log(aoto.favoriteMovie.title) // "괴물"
console.log(aoto.favoriteMovie.["title"]) // "괴물"

 

그대로 이어 붙여 작성해 주면 되고,

마찬가지로 따옴표로 감싸져 있는 값이라면 대괄호를 사용한다!

 

💡 존재하지 않는 값을 입력하면?

console.log(aoto.favoriteMovie.ost) // undefined

 

ERROR 가 아닌 undefined 가 출력된다.

 

💡 객체의 메소드를 이용해보자!

Object.keys : key 들을 가져오는 메소드

let person = {
  name: "aoto",
  age: 20,
  gender: "female",
};

let keys = Object.keys(person);
console.log(keys); // [ 'name', 'age', 'gender' ]

 

Object.values : value 들을 가져오는 메소드

let values = Object.values(person);
console.log(values); // [ 'aoto', 20, 'female' ]

 

Object.entires : key 와 value 를 묶어서 배열로 만든 배열 (2차원 배열)

let entires = Object.entries(person);
console.log(entires); // [ [ 'name', 'aoto' ], [ 'age', 20 ], [ 'gender', 'female' ] ]

 

Object.assign : 객체 복사

let newPerson = {};
Object.assign(newPerson, person);
console.log(newPerson); // { name: 'aoto', age: 20, gender: 'female' }

 

❗️ 복사는 하지만 age를 30 으로 바꾸고 싶다면?

let newPerson2 = {};
Object.assign(newPerson2, person, { age: 30 });
console.log(newPerson2); // { name: 'aoto', age: 30, gender: 'female' }

 

💡 객체 비교

객체는 상당히 크기가 크다. 그래서 메모리에 저장할 때 같은 값이라도 다른 공간에 저장한다.
그래서 같아 보여도 서로 다른 값이라고 반환하는 것!

let apple = {
  color: "red",
};

let apple2 = {
  color: "red",
};

console.log(apple === apple2); // false

 

➕ JSON.stringify 는 객체를 문자열로 반환해준다. 그래서 이런 식으로는 일치 비교가 가능하다.

console.log(JSON.stringify(apple) === JSON.stringify(apple2)); // true

 

💡 객체 병합 : 전개 연산자 사용

let apple3 = {
  taste: "sweet",
};

let perfectApple = {
  ...apple,
  ...apple3,
};

console.log(perfectApple); // { color: 'red', taste: 'sweet' }