TIL-13 JavaScript 객체

PRB·2021년 7월 7일
0

JavaScript

목록 보기
6/24
post-thumbnail
const name = '홍길동';
const year = 1997;
const month = 3;
const date = 23;

이런식으로 데이터가 늘어나면 늘어날수록 코드도 길어지고 관리하기도 힘들어진다. 그래서 이런 유형의 데이터는 Object(객체)로 표현해서 관리해준다.
하지만 객체는 배열과 다르게 순서가 없다.

const me = {
  name : '홍길동',
  year : 1997,
  month : 3,
  date : 23,
  속성이름 : 속성값
};

마침표(.) 연산자 사용

접근하려는 객체명은 왼쪽에, 프로퍼티 명은 오른쪽에 위치

console.log(me.name); // 홍길동

대괄호([])를 사용

대괄호([])를 사용하여, 접근하려는 객체명은 왼쪽에, 프로퍼티 명은 쌍따옴표("")와 함께 대괄호 안에 작성한다

console.log(me.name); // 홍길동
console.log(me['name']); // 홍길동

객체 수정하기

me.name = '김길동';
console.log(me.name); // 김길동

객체 순회하기

객체는 명확하게 정해진 순서가 없다. 그래서 어떤 순서에 따라 객체의 키에 접근하게 될지 알 수 없다. 그래서 객체의 순회는 "순서가 보장되지 않은 순회" 라고 한다.

Object.keys()

const obj = {
  name: '홍길동',
  age: 25,
  money: 15000
}
 
Object.keys(obj) // ['name', 'age', 'money']

Object.keys 메소드가 리턴하는 값은 배열이기 때문에 이걸로 우리가 반복문을 사용할 수 있다.

const keys = Object.keys(obj) // ['name', 'age', 'money']
 
for (let i = 0; i < keys.length; i++) {
  const key = keys[i] // 각각의 키
  const value = obj[key] // 각각의 키에 해당하는 각각의 값
  console.log(value)
}

Object.entries

Object.values 는 객체의 키가 아닌 값으로 이루어진 배열을 리턴합니다. Object.entries 는 객체의 키와 값의 쌍으로 이루어진 길이 2짜리 배열로 이루어진, 배열을 리턴합니다. 각 배열에서 인덱스 [0]의 값은 각각의 키를, 인덱스 [1]의 값은 해당 키에 해당하는 값을 가지게 됩니다.

const values = Object.values(obj)
// values === ['name', 'age', 'money']
 
const entries = Object.entries(obj)
 
/*
entries === [
  ['name', '홍길동'],
  ['age', 25],
  ['money', 15000],
*/

for-in

const obj = {
  name: '홍길동',
  age: 25,
  money: 15000
}
 
for (let key in obj) {
  const value = obj[key]
}

이렇게 객체를 가지고 for-in 문을 사용하면, for-in 문의 인덱스에 해당하는 변수가, 숫자가 아닌 객체의 각각의 키에 해당하는 문자열을 할당받게 된다.

참조&복사

const a = { name : '홍길동' };
const b = a;
a.name = '김길동';
console.log(b.name); // 김길동
const a = { name : '홍길동' };
const b = a;
a = '김길동';
console.log(b); // 홍길동
profile
사용자 입장에서 사용자가 원하는 것을 개발하는 프론트엔드 개발자입니다.

0개의 댓글