JS | Object : 프로퍼티 접근, 순회

프로퍼티 접근

프로퍼티 키

프로퍼티 키는 따옴표 ""로 감싼 문자열로 지정해야 한다. 하지만 자바스크립트에서 변수명으로 사용 가능한 이름인 경우 따옴표를 생략할 수 있다.
표현식을 프로퍼티 키로 사용할 경우 대괄호 []로 묶어 사용할 수 있다.

const str1 = "num";
const str2 = "ber";

let obj1 = {
  name : "obj",
  its_number : 1,
  'its-type' : "object",
  1 : 2,
  [str1 + str2] : 3
};

obj1.number // 3

프로퍼티 값 읽기

• 마침표 표기법 .
• 대괄호 표기법 []

[]안에는 따옴표로 묶인 문자열 형식의 키, 숫자 타입의 키, 변수가 들어갈 수 있다.

const str3 = str1 + str2;

obj1.name  // "obj"
obj1["name"]  // "obj"
obj1[name]  // undefined

obj1.its-type  // error
obj1['its-type'] // "object"
obj1.1  // error
obj1[1] // 2
obj1.str3 // undefined
obj1[str3]  // 3

객체 순회

객체는 length 속성이 없기 때문에 for반복문으로 순회는 불가능하다. 대신 다음과 같은 방법이 있다.

Object.keys()

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

const obj = {
  name: 'melon',
  weight: 4350,
  price: 16500,
  isFresh: true
};
const keys = Object.keys(obj)	// ['name', 'weight', 'price', 'isFresh']
 
for (let i = 0; i < keys.length; i++) {
  const key = keys[i]	 // 각각의 키
  const value = obj[key] // 각각의 키에 해당하는 각각의 값
  console.log(value)
}

for ...in

for ( let key in obj ) { statement }

for ...in 반복문은 객체의 key를 순회한다.
배열에도 쓸 수 있는데 1. 배열의 순서를 보장하지 않고 2. 요소만 반환하는 것이 아니기 때문에 배열에는 사용하지 않는 것이 좋다.

//배열에 사용한 경우 (오류)------------
const arr = ['a', 'b', 'c'];
arr.name = 'array';

for (let idx in arr) {
  console.log(`${idx} : ${arr[idx]}`);
}
/*
0 : a
1 : b
2 : c
name : array
*/

// 객체 순회----------------------
const obj = {
  name: 'melon',
  weight: 4350,
  price: 16500,
  isFresh: true
};

for (let key in obj) {
  const value = obj[key]
  
  console.log(`${key} : ${value}`);
}
/*
name : melon
weight : 4350
price : 16500
isFresh : true
*/