[TIL] JavaScript 객체

오늘의 공부

저번주 배열에 이어 오늘은 객체를 학습했다. 객체는 다른 값을 가질 수 있지만, 동일한 데이터 타입을 사용할 때 관리하거나 의미있는 데이터를 담을 필요가 있을 때 사용한다. 객체 내에는 데이터, 함수 등 많은 데이터를 담을 수 있다.

객체

객체를 생성하는 것은 변수를 선언하는 것과 동일하게 생성한다. 어떠한 웹 페이지를 운영하게 된다면 회원가입시 필요한 데이터를 담을 수 있는 변수를 선언할 필요가 있을 것이다.

const info = [
  'Song Hyunwoo',
  'qwe123', 
  'Korea', 
  '010-0000-0000'
];

위와 같이 배열 속에 데이터를 담는다면 데이터가 필요할 때 각 인덱스 위치를 미리 알고 호출해야하며, 데이터도 정확히 위치해야 한다. 더불어서 가독성도 떨어진다.

const info = {
  key: 'value',
  name: 'Song Hyunwoo',
  id: 'qwe123', 
  location: 'Korea', 
  phone: '010-0000-0000',
  method: function() {
  	alert(`Hi, ${name}!`)
  }
};

위와 같이 객체를 통해 데이터를 담으면 키만 알면 값을 호출할 수 있다. 객체의 데이터는 키: 값 형태로 작성한다. 이를 프로퍼티라고 한다. 값에는 함수를 담을 수 있다. 이러한 형태의 프로퍼티를 메소드라고 한다. 메소드는 지금까지 써왔는데, 이러한 형태로 이루어진다는 것을 알 수 있다.

객체에 있는 프로퍼티를 호출하는 방법들이 있다. 위에 선언한 객체를 호출하면 다음과 같다.

cosole.log(info.name); // 'Song Hyunwoo' Dot notation
cosole.log(info.['phone']); // '010-0000-0000' Bracket notation

info.location = 'Incheon';

delete info.id;
delete info.key;
delete info.method;

cosole.log(info)

//	{
//  name: 'Song Hyunwoo',
//  location: 'Incheon', 
//  phone: '010-0000-0000',
//  }

for...in

for...in과 문법은 유사하다. for...in은 이름을 가진 속성, 상속된 모든 열거 가능한 속성들을 반환하고, 임의의 순서로 반복하기 때문에 배열에 사용하는 것은 옳지 않다.
for...in은 객체가 가진 속성을 확인할 수 있기 때문에 실질적 디버깅을 위해 사용할 수 있다. 키-값 쌍이 선호되는 데이터를 담는 경우 특정 키 유무를 확인하는데 사용할 수 있다.

const object = { a: 1, b: 2, c: 3 };

for (const property in object) {
  console.log(`${property}: ${object[property]}`);
}

// "a: 1"
// "b: 2"
// "c: 3"

for...in / for...of

for...of는 콘솔에 출력시 배열 인덱스만 출력하는 반면, for...in은 인덱스, 속성, 프로토타입의 속성까지 출력한다.

Object.prototype.objCustom = function () {};
Array.prototype.arrCustom = function () {};

let iterable = [3, 5, 7];
iterable.foo = "hello";

for (let i in iterable) {
  console.log(i); // 0, 1, 2, "foo", "arrCustom", "objCustom"
}

for (let i of iterable) {
  console.log(i); // 3, 5, 7
}

Object.keys, values, entries

일반 객체를 순회하기 위해선 위의 메소드를 활용할 수 있다. 메소드를 사용하면 해당하는 데이터를 배열로 반환한다.

const obj = { a: 1, b: 2, c: 3 };

Object.keys(obj) // ['a', 'b', 'c'] 키를 반환
Object.values(obj) // [1, 2, 3] 값을 반환
Object.entries(obj) // 0: (2) ['a', 1] 3개의 프로퍼티 반환
					// 1: (2) ['b', 2]
					// 2: (2) ['c', 3]
					// length: 3

for (let value of Object.values(obj)) {
  alert(value); // 1, 2, 3
}

마무리

오늘 객체와 관련한 많은 문제를 풀었다. 키를 호출할 때 전달인자를 받아서 객체를 조작하고 값을 출력하는 훈련이 된 것 같다. 오늘 풀면서 반복문이나 조건문 boolean을 출력하는 것에 대한 기본기가 조금 떨어진다고 느꼈다.

  for (let key in obj2) {
    if (!(key in obj1)) {

for...in문 일부이다. obj2 객체에 obj1 객체와 동일한 키가 없으면 조건문 구문이 반복되도록 하고 싶었는데, !를 저렇게 사용할 생각을 못했다.

    if (obj1[key]) !== obj2[key])

같이 이상한 코드만 써놓고 애먼 의사코드만 쳐다보다가 결국 레퍼런스를 봤다. !로 감싼 조건식을 봤을 때 받은 느낌이 미묘했다. 코플릿에서 알고리즘? 과 비슷한 문제들을 풀면서 당일에 보고 주말에 한 번씩 돌려보는 정도로 했는데, 이해를 완벽하게 해서 누군가에게 설명할 수 있을 만큼 풀어봐야겠다.

참조 - MDN
javascript-info
JavaScript - 호이스팅, for in/ for of 차이|작성자 늘푸른 하늘은 빛나