[JavaScript] 객체

2022.11.05

💡 오늘의 JavaScript 공부

▶️ 객체

각기 다른 값을 가질 수 있지만, 입력해야 하는 데이터의 종류가 동일한 경우 객체를 사용하면 손쉽게 데이터를 관리할 수 있다.

객체는 Key와 Value로 이루어져 있으며 쉼표로 구분해준다.

let user = {
  firstName: 'sehoon',
  lastName: 'Kim',
  email : 'tpgns2289@naver.com',
  city : 'Seoul'
} 
// 값을 사용하는 방법 1. Dot notation 
user.email; // 'tpgns2289@naver.com'
user.city; // 'Seoul'
// 값을 사용하는 방법 2. Bracket notation 
user['firstName']  // 'sehoon'
user['lastName'] // 'kim'

Dot notation이 훨씬 쓰기도 쉽고 간단한데 Bracket notation은 왜 써야할까? 라는 생각이 들었다.

이걸 알아보자

📌 Bracket notation은 왜 써야할까?

Bracket notation은 key 값이 변할 때사용하면 유용하다.

let person = {
  name: 'James',
  age : 26
}
function getProperty(obj, propertyName){
  // 매개변수는 달라질 수 있기 때문에 
  return obg[propertyName] 
} // Dot notation은 정해진 키가 있을 때만 사용가능 ex) person.name // 'James'
let output = getProperty(person,'name') // person['name'] >> 'James'
let output2 = getProperty(person,'age') // person['age] >> 26

Bracket notation person[‘name’] vs person[name]?

person['name'] 과 person[name]?
person['name'] // person 객체의 'name'이라는 key의 값
person[name] // person 객체의 name이라는 변수 
  					//  변수설정이 안되어있다면 Reference Error

객체에 key 추가

let person = {
  name: 'James',
  age : 26
}
person.email = 'tpgns2289@naver.com'
person['email'] = 'tpgns2289@naver.com'
person["email"] = 'tpgns2289@naver.com'
// let person = {
//  name: 'James',
//  age : 26
//	email : 'tpgns2289@naver.com'
// }

delete

let person = {
  name: 'James',
  age : 26
}
delete person.age // person에는 name키만 남음 age 속성 삭제
delete person["age"]  || delete person['age']

in

let person = {
  name: 'James',
  age : 26
}
'name' in person // true
'email' in person // false

📌 객체의 메서드

🙆‍♂️ Object.keys() ||. Object.values()

// 객체의 키 목록을 배열로 리턴한다. 
// 객체 내장 메서드가 아닌 객체 생성자인 Object가 직접 가지고 있는 메서드 
const obj = {
  name : 'sehoon',
  age : 26,
  email : 'tpgns2289@naver.com'
}
Object.keys(obj) // ['name', 'age', 'email']
Object.values(obj) // ["sehoon",26,"tpgns2289@naver.com"]

🙆‍♂️ Object.assign( obj1, obj2 )

// Object.assign() 메서드는 출처 객체들의 모든 열거 가능한 자체 속성을 복사해 대상 객체에 붙여 넣는다. 그후 대상의 객체를 반환한다. 
let obj1 = {
  name : 'sehoon',
  age : 26
}
let obj2 = {
  name: 'kakao',
  age : 10 ,
  email : 'kakao.com'
}
Object.assign(obj1,obj2) // obj1에 obj2를 덮어씌운다. 
// {
//  name: 'kakao',
//  age : 10 ,
//  email : 'kakao.com'
// }

그렇다면 obj1의 name과 age를 가진채 obj2의 email을 가져오고 싶다면?

// 단순히 순서를 바꿔주면 된다. obj2에 obj1을 덮어씌우면 
// name과 age는 obj1의 값을 유지한 채 obj2의 이메일을 가져올 수 있다. 
Object.assign(obj2,obj1)
// {
//  name: 'sehoon',
//  age : 26 ,
//  email : 'kakao.com'
// }

이번에 문제를 풀다보니 두 개의 객체를 입력받아 두번째 객체의 속성들을 첫번째 객체에 추가해야 한다는 문제를 풀게 되었다.

단, 추가하려는 속성이 이미 첫번째 객체에 존재하는 경우, 기존 값을 그대로 두어야 하며

두번째 객체는 수정하지 않아야 한다 는 조건이 있었다.

이 문제는 Object.assign 함수를 조금 활용하여 해결했다.

🙆‍♂️ Object.assign( {} , obj1, obj2 )

입출력 예시

const obj1 = {
  a: 1,
  b: 2,
};

const obj2 = {
  b: 4,
  c: 3,
};

extend(obj1, obj2);
console.log(obj1); // --> {a: 1, b: 2, c: 3}
console.log(obj2); // --> {b: 4, c: 3}

나의 문제풀이

// Object.assign( {} , obj1, obj2 )
// 빈 객체를 생성하고 obj1에 obj2를 덮어 씌운 값을 그 객체에 넣어준다. 
function extend(obj1, obj2) {
  // Object.assign을 통해서 빈 객체에 obj2에 obj1을 덮어씀
  let newObj = Object.assign({}, obj2 , obj1) 
  // 다시 Object.assign을 통해 새로 만든 newobj를 obj1에 덮어씀
  Object.assign(obj1,newObj)
}

요약

1. 객체는 오히려 배열보다 좀 더 헷갈렸다. key 값과 value 값들을 가지고 노는데 아직 실력이 부족하다.
2. 객체를 활용하면 굉장히 많은 데이터를 다룰 수 있다.
3. 객체 내에 배열이 들어가는 경우가 많아서 객체내의 배열에서 배열 메서드를 활용할 생각도 할 수 있다.

🐥 오늘은 배열 문제를 풀 때보다 더 오랜 시간이 걸렸고 더 많이 해맸다. 그 이유는 생각해야 할 부분이 하나 더 늘었기 때문이다. 배열에서는 배열의 index나 순서만 생각하면 간단했지만 객체에서는 key, value 그리고 그 객체 내에 또다른 배열이나 객체가 있을 수 있기 때문에 상당히 헷갈렸던 것 같다. 너무 어렵게 생각하지말고 하나하나 뜯어보면 쉬운 부분도 있었던 것 같다. 오늘 푼 문제들을 복습하면서 다시 재정립할 필요가 있다.