JavaScript 객체

객체

객체란 속성을 가진 독립적인 개체(entity)이다.

다시 말해서 객체는 속성으로 구성된 집합이다.

자바스크립트는 객체기반의 프로그래밍 언어로 자바스크립트를 구성하는 대부분은 객체이다.

객체는 리터럴 표기, 생성자 함수, Object.create로 생성할 수 있다.

 

리터럴 표기법

const a = {
  fruit: "apple",
  color: "red",
};

변수명 = { "속성": "값" } 형태로 객체를 생성할 수 있다.

 

생성자 함수

function Fruit(fruit, color) {
  this.fruit = fruit;
  this.color = color;
}

const b = new Fruit("banana", "yellow");

속성이 같고 값이 다른 객체를 여러 개 생성해야 할 때 유용한 생성 방법이다.

템플릿처럼 틀을 정해두고, 그 틀에 원하는 값들을 넣어 동일한 속성의 객체들을 쉽게 만들 수 있다.

생성자 함수는 대문자로 시작하고 this 키워드로 속성을 정의하여 생성될 인스턴스를 가리키게 해야 한다.

또한 new 연산자를 활용하여 새로운 객체를 생성한다.

 

Object.create

const c = Object.create(b);
c.fruit = "cherry";
c.color = "red";

Object.crate는 자바스크립트에 내장되어있는 함수로 생성자 함수처럼 동일한 속성값을 갖는 객체를 생성할 수 있다.

 

속성

속성은 키와 값 사이의 연결관계이다.(key-value)

객체의 키를 통해 그 값을 가져올 수 있으며, 속성에는 값뿐만 아니라 함수(method)도 할당 가능하다.

객체에서 속성을 접근하는 방법은 마침표 표기법, 대괄호 표기법 두 가지가 있다.

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

const a = {
  fruit: "apple",
  color: "red",
};

console.log(a.fruit); // apple
console.log(a["color"]); // red

 

속성 나열

속성을 나열하는 방법에는 대표적으로 Object.keys(), Object.getOwnPropertyNames(), for ... in 3가지가 있다.

const obj = Object.create(
  {},
  {
    a: { value: 1, enumerable: true },
    b: { value: 2, enumerable: false },
  }
);

// 객체 자신의 열거 가능한 속성만 나열
console.log(Object.keys(obj)); // a

// 객체 자신의 모든 속성을 나열(열거 불가능한 속성 포함)
console.log(Object.getOwnPropertyNames(obj)); // b



const parent = {
  age: 55,
};

function Child(name) {
  this.name = name;
}

Child.prototype = parent;
const child = new Child("Kim");

console.log(Object.keys(child)); // name

// 객체의 프로토타입 체인의 속성까지 나열
for (const key in child) {
  console.log(key); // name \n age
}

 

속성 추가 / 제거

속성 추가는 마침표 또는 대괄호를 통해 속성을 선언하듯이 추가할 수 있고, 속성 제거는 delete를 통해 진행할 수 있다.

const kim = {
  name: "minje",
};

console.log(kim); // { name: 'minje' }

kim.gender = "male";
kim["age"] = 25;

console.log(kim); // { name: 'minje', gender: 'male', age: 25 }

delete kim.age;
console.log(kim); // { name: 'minje', gender: 'male' }

 

객체 복사

정의된 객체를 다른 변수에 그대로 할당할 경우, 같은 메모리 주소가 할당된다.

예를 들어 객체 a를 다른 변수 b에 할당할 경우, b에서 속성을 편집하면 a의 속성도 편집이 된다.

const a = {
  fruit: "apple",
  color: "red",
};

const b = a;
b.color = "green";

console.log(a); // { fruit: 'apple', color: 'green' }
console.log(b); // { fruit: 'apple', color: 'green' }

위와 같이 객체를 복사할 경우 원하지 않은 속성 값의 변경이 이루어질 수 있다.

따라서 객체를 복사할 때는 의도에 맞는 방법을 잘 선택해서 진행해야 한다.

 

얕은 복사

얕은 복사는 객체의 1차원적인 속성 값만 복사하고, 중첩된 객체는 주소만 복사하는 방법이다.

Object.assign()과 스프레드 연산자를 통해서 얕은 복사를 할 수 있다.

const kim = { name: "Kim", age: 26, address: { city: "Seoul" } };

const lee = Object.assign({}, kim);

const park = { ...kim };

lee.name = "lee";
lee.address.city = "Busan";

console.log(kim); // { name: 'Kim', age: 26, address: { city: 'Busan' } }

lee와 park은 각각 Oject.assign()과 스프레드 연산자를 사용하여 kim을 얕게 복사하였다.

그리고 lee의 속성 중 name과 address.city를 변경한 후 kim을 출력한 결과

name은 Kim 그대로 유지되었지만 address.city는 Busan으로 변경된 것을 볼 수 있다.

 

깊은 복사

깊은 복사는 객체의 모든 속성을 새로운 메모리에 복사하여 원본과 복사한 객체가 완전히 독립적으로 복사하는 방법이다.

재귀함수(lodash 라이브러리의 cloneDeep)를 활용하거나 JSON.parse(JSON.stringify())로 깊은 복사를 할 수 있다.

const _ = require("lodash");

const kim = { name: "Kim", age: 26, address: { city: "Seoul" } };

const lee = _.cloneDeep(kim);

const park = JSON.parse(JSON.stringify(kim));

lee.name = "lee";
lee.address.city = "Busan";

console.log(kim); // { name: 'Kim', age: 26, address: { city: 'Seoul' } }

얕은 복사와는 달리 name과 address 모두 기존 값을 유지하는 것을 확인할 수 있다.