[JavaScript] 객체 Object

객체란 무엇인가?

자바스크립트를 이루고 있는 거의 모든 것은 객체이다. 원시 타입을 제외한 나머지 값(함수, 배열, 정규표현식 등)은 객체에 속한다. 객체에서 각 요소는 프로퍼티 (key : value 쌍)으로 구성되어 있다. key는 속성 이름, value는 속성 값이 된다. value는 어떤 값이든 될 수 있고, key는 문자열이다. 

 

함수 역시 값을 반환하므로 객체 내에 프로퍼티로 존재할 수 있다. 이를 객체의 메서드(method)라고 한다. 이 프로퍼티(key:value)의 key는 메서드의 이름, value는 함수가 반환하는 결과 값이 된다.

객체 vs 배열 

배열에서는 각 요소에 접근하기 위해, 이름 없이 순서(index)로 접근한다. 

객체에서는 각 요소의 key값으로 value값에 접근할 수 있다.

객체에는 index 순서가 없기 때문에 순서로 값에 접근 할 수도, 어떤 프로퍼티 사이에 새 프로퍼티를 추가하는 것도 할 수 없다. 이를 보완한 것이 배열이고, 특별한 종류의 객체에 속한다. 그렇기 때문에 push, pop 같은 내장 메서드를 사용할 수 있는 것이다.

객체에서 값에 접근하는 방법

Dot notation 점 표기법, Bracket notation 대괄호 표기법 두 가지 방식으로 값에 접근할 수 있다.

• 점 표기법 : object.propertyName 과 같이 객체 뒤에 .이름 형식으로 프로퍼티 값에 접근하는 방식이다. 이 때 주의점은 object에 실제 존재하는 key값으로만 접근할 수 있다는 점이다. key 값이 동적으로 변화하는 경우에는 아래의 bracket notation으로 접근한다.
• 대괄호 표기법 : object['propertyName'] 혹은 object[propertyName] 으로 작성한다. 전자의 경우에는 key 값이 문자열로 정확하게 있을 때 접근할 수 있고, 후자의 경우는 대괄호 안에 key값 문자열이 저장된 변수를 넣어 접근할 수 있다. 
  또한 대괄호 안에 값으로 계산될 수 있는 식을 넣어 key를 동적으로 생성하여 접근할 수도 있다.

// 예시
// 객체 리터럴 내, 외부에서 계산될 수 있는 식을 key 값으로 사용하여 프로퍼티 생성, 추가 가능
const prefix = 'prop.';
let i = 0;

const testObj = {
  [`${prefix} = ${++i}`]: i,
  [`${prefix} = ${++i}`]: i,
  [`${prefix} = ${++i}`]: i,
};

console.log(testObj);
// { 'prop. = 1': 1, 'prop. = 2': 2, 'prop. = 3': 3 }

객체 값의 추가, 변경, 삭제

• 값의 추가 & 변경 & 삭제

const person = {
  name: 'park',
  age: 26,
};

// 추가
person.favorite = 'swimming';
// or
person['favorite'] = 'swimming';

// 변경
person['name'] = 'lee';

// 삭제 
delete person.age;

/* {name: 'lee',
    favorite: 'swimming'}*/

• 외부 변수를 추가하는 객체 리터럴 (es6)

const info = function () {
  return `${this.name} : ${this.age}`;
};

const sandeul = {
  name: 'sandeul',
  age: 3,
};

const person = {
  name: 'park',
  age: 26,
  // 외부에서 정의된 함수 이름을 표기해 메서드화
  info,
  // 외부에서 정의된 객체를 프로퍼티화
  sandeul,
};

console.log(person.info());
// park : 26

console.log(person.sandeul);
// { name: 'sandeul', age: 3 }

• 프로퍼티 존재 여부 확인

const person = {
  name: 'park',
  age: 26,
};

'name' in person // true
'favorite' in person // false

객체를 반복하는 방법

for...in 문으로 객체 프로퍼티 반복

• 이 경우 객체의 key 값을 리턴받고, 이 key값으로 해당하는 value에 접근할 수 있다.

const person = {
  name: 'hyejung',
  age: 26,
  favorite: 'swimming',
};

for (const key in person) {
  console.log(key);
}
// name age favorite

• 객체 프로퍼티는 보통 작성된 순서대로 실행된다. 다만 숫자로 작성된 정수 프로퍼티는 추가한 순서대로 실행되지 않는다. (오름차순 정렬된다.)

let codes = {
  49: '독일',
  41: '스위스',
  44: '영국',
  // ..,
  1: '미국',
};

for (let code in codes) {
  console.log(code);
}
// 1 41 44 49

• 같은 반복문을 배열에도 사용할 수 있다. 배열에서는 key 값이 없을때는 인덱스 번호를, key가 있을 때는 key를 리턴한다. 

const fruits = ['사과', '배', '딸기', '수박'];
fruits.name = 'my array';

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

// 0:사과 1:배 2:딸기 3:수박 name:my array

for...in vs for...of

• for...of 문으로 객체를 반복하려고 하면 아래와 같은 에러가 발생한다.

for (const key of person) {
  console.log(key);
}
// TypeError: person is not iterable

이유는 for...in문을 배열에서 사용할 때의 불편함, 무조건적으로 인덱스를 보장하지 않는 점을 보완하기 위해 나온 문법이 for...of 이기 때문이다. 따라서 배열의 요소를 반복할 때는 for...of를, 객체 key를 반복할 때는 for...in 문을 사용할 것을 권장한다. 

Object...() 메서드 

• Object.keys(객체) / Object.values(객체) / Objects.entries(객체)

객체에서 key, value 그리고 key와 value 를 배열 형태로 반환받는 메서드들이 있다.

const person = {
  name: 'park',
  age: 26,
  favorite: 'swimming',
};

// 객체의 key를 배열로 반환
const personKeys = Object.keys(person);
console.log(personKeys);
// [ 'name', 'age', 'favorite' ]

// 객체의 value를 배열로 반환
const personVals = Object.values(person);
console.log(personVals);
// [ 'park', 26, 'swimming' ]

// 객체의 key:value 쌍 배열로 반환
const personEntries = Object.entries(person);
console.log(personEntries);
// [ [ 'name', 'park' ], [ 'age', 26 ], [ 'favorite', 'swimming' ] ]

• 위 메서드로 반환받은 배열을 for...of문을 활용하여 하나씩 순회하며 활용할 수 있다.

// 구조분해할당 + Object.entries() 활용
for (const [key, val] of Object.entries(person)) {
  console.log(`${key} : ${val}`);
}

// name : park
// age : 26
// favorite : swimming

참고자료

https://ko.javascript.info/object

객체

https://poiemaweb.com/js-object

Object | PoiemaWeb

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object

Object - JavaScript | MDN