[TIL 24] javascript | 객체

객체

키(key)과 값(value)으로 구성된 프로퍼티(Property)들의 집합

객체 생성규칙

1. key 값은 중복될 수 없다.
2. key 값과 property값 사이는 :으로 구분되어야 한다.
3. property를 추가할때는 ,를 사용한다.
4. property값에는 어떤 type이나 올 수 있다.

객체 property 접근

dot(.)으로 접근

• 실제 키이름으로만 접근 가능

const puppy = {
  name : 'choco',
  age : 3
}

console.log(puppy.name); //choco

[] (대괄호)로 접근

• 키 값에 스페이스가 포함되어있으면 대괄호로 접근한다.
• 변수로 접근가능하다.

const puppy = {
  name : 'choco',
  age : 3
}

const puppyAge = 'age';
console.log(puppy[puppyAge]); //3

property 할당

puppy['name'] = 'milk';
console.log(puppy.name) // milk

객체에 이미 키가 존재하는데 재할당하면 값이 수정된다.

puppy.like = 'snack'
console.log(puppy.like) //snack

이전에 없던 키로 접근하면 새로운 property가 추가된다.

메서드

객체의 프로퍼티 값이 함수인 경우 메서드라 부른다.

const methodObj = {
  do: function() {
    console.log('This is method!');
  }
}

메서드 호출

methodObj.do();

객체 비교

텍스트는 변수에 저장하면 텍스트 자체가 저장되지만 객체는 객체 자체가 저장되는 것이 아니라 reference가 저장된다.

const hiObj = { 
  name: '안녕' 
};
const helloObj = {
  name: '안녕'
};
console.log('객체비교 =>', hiObj === helloObj);

-> 객체 자체를 그대로 저장하는 것이 아니라 객체가 담긴 메모리의 reference를 저장한다. 객체가 갖고 있는 진짜 값은 메모리 주소인 reference이지만 객체를 불러올때는 해당 메모리에 저장된 데이터를 반환한다.
그래서 눈에 보이는 데이터는 같지만 실제 객체가 갖고 있는 진짜 값은 서로 다르다. (서로 다른 메모리의 reference를 저장하므로)

객체 내부의 property 값으로는 비교할 수 있다!

객체 순회방법

객체는 배열과 다르게 명확하게 정해진 순서가 없기 때문에 어떤 순서에 따라 객체의 키에 접근해야 할지 알 수 없다. 따라서 객체의 순회는 순서가 보장되지 않은 순회라고 한다.

-> length를 사용하는 배열 순회법을 사용할 수 없다. (객체는 length키가 따로 주어지지 않고 index가 없기 때문에!)

Object.keys

어떤 객체가 가지고 있는 키들의 목록을 배열로 리턴

const puppy = {
  name : 'choco',
  age : 3,
  like : 'snack'
}

Object.keys(puppy); // [ 'name', 'age', 'like' ]

Object.keys가 반환하는 것은 배열이기 때문에 length를 통해 반복문을 사용할 수 있다.

const keys = Object.keys(puppy);

for (let i=0; i<keys.length; i++) {
  const key = keys[i]; // 각각의 키
  const value = puppy[key] // 각각의 키에 해당하는 값
}

Object.values

어떤 객체가 가지고 있는 값들의 목록을 배열로 리턴

const puppy = {
  name : 'choco',
  age : 3,
  like : 'snack'
}

Object.values(puppy); // [ 'choco', 3, 'snack' ]

Object.entries

객체의 키와 값의 쌍으로 이루어진 길이 2짜리 배열로 이루어진 배열을 리턴

const puppy = {
  name : 'choco',
  age : 3,
  like : 'snack'
}

Object.entries(puppy);
// [ ['name','choco'], ['age',3], ['like','snack'] ]

for-in

for(let i = 0; i < arr.length; i ++) 문법을 간단하게 축약한 문법

• 객체 순회 외에도, 일반적인 배열을 순회할때도 이용 가능

const puppy = {
  name : 'choco',
  age : 3,
  like : 'snack'
}

for (let key in puppy) {
  const value = puppy[key];
  console.log(value);
}