객체의 프로퍼티에 접근하기

프로퍼티란?

javaScript에서 "프로퍼티"는 객체의 속성을 나타냅니다. 객체는 키-값 쌍의 집합이며, 각 키에 해당하는 값이 해당 객체의 프로퍼티입니다. 프로퍼티는 객체의 상태를 나타내거나 동작을 제어하는 데 사용됩니다.
객체의 프로퍼티는 다양한 데이터 타입일 수 있습니다. 예를 들어, 문자열, 숫자, 배열, 함수 등 어떤 데이터 타입이든 프로퍼티 값으로 사용할 수 있습니다. 함수 역시 객체의 프로퍼티가 될 수 있습니다.

ㅤ

객체의 프로퍼티에 접근하는 방법!

점 표기법과
괄호 표기법

점 표기법은 객체 밖에 선언된 프로퍼티 값으로 연결된 변수를 인식하지 못한다.

let object = { name: " journey"}
let myname = "name";
console.log(object.myname); //none
console.log(object[myname]); //"journey"

ㅤ
ㅤ
ㅤ

그렇다면 객체 안밖에 중복되는 키값(변수)가 있는 경우는?

let object = {
name: " journey"
myname: "yeojoung"}
let myname = "name";
console.log(object.myname); // "yeojoung"
console.log(object[myname]); //"journey"

ㅤ
ㅤ

중첩 객체의 프로퍼티에 접근하는 경우?

let object = {
name: {myname: "yeojoung"}}
let myname = "name";
console.log(object.name.myname); 
console.log(object[myname]["myname"]);  

ㅤㅤ
ㅤ
ㅤ
ㅤ

괄호타입

괄호타입은
변수로 접근하거나 (객체 밖 키값과 연결된 변수 가르킴)
문자열로 접근하거나 (객체 내 키값 가르킴)

var person = {
  'first-name': 'Ung-mo',
  'last-name': 'Lee',
  gender: 'male',
  1: 10
};
.
.
console.log(person);
.
console.log(person.first-name);    // NaN: undefined-undefined
console.log(person[first-name]);   // ReferenceError: first is not defined
console.log(person['first-name']); // 'Ung-mo'
.
console.log(person.gender);    // 'male'
console.log(person[gender]);   // ReferenceError: gender is not defined
console.log(person['gender']); // 'male'
.
console.log(person['1']); // 10
console.log(person[1]);   // 10 : person[1] -> person['1']
console.log(person.1);    // SyntaxError`

객체의 키/값에 접근하는법

object.keys

해당 메서드는 객체의 키를 문자열로 받아 배열로 저장한다.

for-in

for-in 문은 객체의 문자열 키(key)를 순회하기 위한 문법이다. 배열에는 사용하지 않는 것이 좋다. 이유는 아래와 같다.

객체의 경우, 프로퍼티의 순서가 보장되지 않는다. 그 이유는 원래 객체의 프로퍼티에는 순서가 없기 때문이다. 배열은 순서를 보장하는 데이터 구조이지만 객체와 마찬가지로 순서를 보장하지 않는다.

배열 요소들만을 순회하지 않는다.

for-of

해당 배열의 요소를 문자열로 저장한다.
for–in 문은 객체의 프로퍼티를 순회하기 위해 사용하고 for–of 문은 배열의 요소를 순회하기 위해 사용한다.

obj[objKeys[i]]

만약 해당 객체의 값이 getElementById("")일 경우, 값은 태그 그 자체다. (1)
= <span id = "">0000</span>

만약 해당 객체의 값이 .value일 경우, 값은 소위 textcontent이다. (2)
= 0000

여기서, (1) obj[objKes[i]].textcontent = (2) obj[objKeys[i]]