자바스크립트 객체 key, value 값 출력

문자열에서 가장 많이 쓰인 문자를 찾는 MaxChar 함수를 공부하는 와중에, for of 문을 돌리면 배열 안에 key : value 형식으로 쌓이는 형태를 발견했다. 아무리 노력해도 이해가 힘들었는데, 객체에 대한 이해가 부족하다고 생각이 들었다.

🔍 객체란 ?

• 자바스크립트를 구성하는 대부분의 것들이 객체라고 생각하면 된다.
• 원시값을 제외한 객체 타입(함수, 배열 등등)의 값은 다양한 타입의 값을 가진다.
• 객체는 0개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티라는 것은 key와 value로 이루어져있다.
• 자바스크립트에서는 모든 값을 프로퍼티 값이 될수 있으므로, 함수도 프로퍼티 값으로 사용할 수 있고(일급 객체) 이를 일반 함수와 구분하기 위해 메서드라고 부른다.

const person = {
  name : 'Person', //프로퍼티, name은 key, 'Person'은 value
  age : 20 		  //프로퍼티, age는 key, 20은 value
};

const add = {
  num = 0; // 프로퍼티
  increase : function() { // 메서드 
    this.num++;
  }
};
// function increase (){} 식으로 작성하면 key : value 형식에 어긋나기 때문에 이렇게는 작성 할 수 없음.

❗️ 프로퍼티 접근 방법 ❗️

• 프로퍼티에 접근하는 방법은 마침표 표기법(.) 과 대괄호 표기법([...])이 있다.

const number = {
  one : 1,
  two : 2,
  three : 3,
  four : 4,
  five : 5
}

console.log(number.one);	// 1
console.log(number['one']); // 1

❗️ 객체 반복문 ❗️

const number = {
  one: 1,
  two: 2,
  three: 3,
  four: 4,
  five: 5,
};

for(let x in number){
  console.log(x);
}

// one, two, three, four, five


for(let x in number){
  console.log(number[x]);
}

// 1, 2, 3, 4, 5

❗️ 이렇듯 객체 반복문인 for in문을 이용해서 x값을 반복하면 key, 객체[key] 를 반복하면 value 값이 나온다 ❗️