Skip to main content

객체(Object) 메소드

객체에 key값 존재 확인 (hasOwnProperty())​

  • 객체.hasOwnProperty("key값")
  • 객체가 특정 속성을 가지고 있는 지 확인하는 메소드. 반환은 Boolean 값.
const obj = {
  name: null,
  age: 100,
  speed: "200",
};

console.log(obj.hasOwnProperty("name")); //true
console.log(obj.hasOwnProperty("speed")); //true
console.log(obj.hasOwnProperty("height")); //false

객체에 key값 목록 (Object.keys())​

  • Object.keys(객체 이름)
  • 객체의 속성 이름(key)들을 배열로 반환.
const avatar = {
  name: "avatar",
  age: 19,
  skin: "blue",
  height: 300,
  human: false,
};

console.log(Object.keys(avatar)); // ['name','age','skin','height','human']

객체의 value값 목록 (Object.values())​

  • Object.values(객체)
  • 객체의 속성 값(value)들을 배열로 반환.
const bigbang = {
  name: "GD",
  company: "YG",
  age: 30,
};

console.log(Object.values(bigbang)); // ["GD","YG", 30]

객체의 key,value값을 배열로 표현 (Object.entries())​

  • Object.entries(객체)
  • 객체의 key값과 value값을 배열 형태로 반환.
  • [key, value]형태를 전체를 표현할 배열에 담는다. (최소 2차원 배열)
const pocketmons = {
  피카츄: 1,
  라이츄: 2,
  파이리: 3,
};

console.log(Object.entries(pocketmons));
// [['피카츄',1] ['라이츄',2] ['파이리',3]]

배열 객체들의 정렬(sort())​

  • 배열에서의 정렬도 가능하지만 객체에서도 정렬이 가능
  • 객체를 정렬할 경우 기준점(key)을 잡고 값(value)를 정렬해야한다.
    • 비교해야할 공통 key값이 존재해야된다.
배열 요소가 객체일 때 정렬
const student = [
  {
    id: 1,
    product: "연필",
    stock: 10,
  },
  {
    id: 2,
    product: "지우개",
    stock: 33,
  },
  {
    id: 3,
    product: "체육복",
    stock: 2,
  },
];

student.sort((a, b) => b.stock - a.stock);
note

배열 student부터 살펴보자.
student는 배열이며, 3개의 배열 요소(객체)가 있다.

그럼 배열 index로 접근하면 무슨 값이 나오는지 확인.

console.log(student[0]);
// {id: 1, product: '연필', stock: 10}

배열의 요소 중 하나인 객체가 출력이 되었다.
그럼 sort()를 사용하면 정렬이 될까?

student.sort((a, b) => a - b);
console.log(student);
// {id: 1, product: '연필', stock: 10}
// {id: 2, product: '지우개', stock: 33}
// {id: 3, product: '체육복', stock: 2}

student.sort((a, b) => b - a);
console.log(student);
// {id: 1, product: '연필', stock: 10}
// {id: 2, product: '지우개', stock: 33}
// {id: 3, product: '체육복', stock: 2}

문법상 오류는 없지만 student배열을 생성하였을 때, 순서가 그대로 유지된다.

만약 stock값을 기준으로 오름차순으로 정렬하고 싶다고 가정을 두었을 때, 어떻게 접근하면 좋을까?

student.sort((a, b) => {
  console.log(a);
  console.log(b);
});
// {id: 2, product: '지우개', stock: 33}
// {id: 1, product: '연필', stock: 10}
// {id: 3, product: '체육복', stock: 2}
// {id: 2, product: '지우개', stock: 33}

student 배열에 sort()를 이용하여 a와 b의 값을 출력 해보았다.
a,b 둘다 객체를 출력하고 있으며, a가 b보다 하나 더 뒤에 있는 요소를 지목하고 있다.

그럼 객체의 value값을 가져오는 방법은 객체.key값 혹은 객체["key값"] 이다.

그럼 각 객체의 stock의 value값을 한번 출력해보자.

student.sort((a, b) => {
  console.log(a.stock);
  // console.log(a["stock"]);
  console.log(b.stock);
  // console.log(a["stock"]);
});
// 2 1 3 2

출력 결과는 stock(key)의 value값을 반환했다.
그럼 배열안에 있는 요소(객체)의 공통 key값을 이용하여 value값을 비교하면 된다.

// student.sort((a,b) => a["stock"] - b["stock"])
student.sort((a, b) => a.stock - b.stock);

// {id: 3, product: '체육복', stock: 2}
// {id: 1, product: '연필', stock: 10}
// {id: 2, product: '지우개', stock: 33}

stock 기준으로 오름차순 정렬이 된 것을 확인.

tip

결론​

객체마다 가지고 있는 공통 key를 이용하여 value의 값을 비교 후 정렬

배열 요소가 객체 문자열일 경우 정렬
let wonder = [
  { title: "tellme", year: 2013 },
  { title: "lonely", year: 2022 },
  { title: "nobody", year: 2015 },
];

// 방법1. sort에 대해 조건문 부여
// 오름차순
wonder.sort((a, b) => {
  if (a.title > b.title) return 1;
  else if (a.title < b.title) return -1;
  else return 0;
});

// 방법2. localeCompare() 메소드 사용
// 오름차순
wonder.sort((a, b) => a.title.localeCompare(b.title));
// wonder.sort((a,b) => a["title"].localeCompare(b["title"]))
// 내림차순
wonder.sort((a, b) => b.title.localeCompare(a.title));
// wonder.sort((a,b) => b["title"].localeCompare(a["title"]))
note
  1. 문자열의 연산에서는 음수,상수,0이 표현 불가능하기 때문에 조건문을 통해 정렬.
  2. 문자열의 순서를 비교하는 메소드인 localeCompare()을 이용하여 정렬.

객체의 문자열에 접근하는 방식이기 떄문에 요소.key 혹은 요소["key값"]을 이용하여 정렬

객체 요소들 데이터 참조 (map(), forEach())​

  • 배열 안에 객체가 있는 경우에도 map(), forEach() 사용 가능.
    • map() 원본 데이터를 유지하고 새로운 배열을 반환
    • forEach() 배열을 순회하기 위해 사용하며 반환 값이 없음
//forEach를 이용한 데이터 참조
let bts = [
  { name: "정국", feature: "노래를 잘함" },
  { name: "랩몬스터", feature: "작곡을 잘함" },
];

bts.forEach(function (element) {
  element.name = "😎" + element.name + "😎";
});
console.log(bts);
// {name: '😎정국😎', feature: '노래를 잘함'}
// {name: '😎랩몬스터😎', feature: '작곡을 잘함'}
//map을 이용한 데이터 참조
let bts = [
  { name: "정국", feature: "노래를 잘함" },
  { name: "랩몬스터", feature: "작곡을 잘함" },
];

let result = bts.map((element) => {
  return { name: element.name, feature: (element.feature += "👍") };
});
console.log(result);

// {name: '정국', feature: '노래를 잘함👍'}
// {name: '랩몬스터', feature: '작곡을 잘함👍'}
danger

map()의 특성 중 원본 데이터에 대한 변화가 없지만 과정이 끝난 후, bts를 출력해보면 원본 데이터가 변해있다.
이유는 bts안에 들어있는 요소가 reference data type인 객체이기 때문이다.
즉, 값의 변화가 요청되면 메모리 주소에 접근해서 값을 변환하기 때문에 원본 데이터가 의도와 다르게 변했다.

let result = JSON.parse(JSON.stringify(bts)).map((element) => {
  return { name: element.name, feature: (element.feature += "👍") };
});

위의 코드에서 JSON.parse(JSON.stringfy(객체))(깊은 복사)를 통해 원본 데이터를 유지하며, 변환할 객체 배열을 반환 받는다.