[Javascript]자바스크립트 객체 완벽 가이드: 선언, 사용법, 복사

자바스크립트에서 객체(Object)는 매우 중요한 개념입니다. 객체는 다양한 데이터를 하나의 구조로 묶어 관리할 수 있게 해 줍니다. 이 글에서는 자바스크립트 객체에 대한 기본 개념부터 고급 활용법까지를 자세히 설명하겠습니다.

≣ 목차

• 객체의 기본 개념🔍
• 자바스크립트 객체 생성 및 사용💡
• 객체 프로퍼티 접근과 수정🔧
• 객체의 특성과 const 선언📑
• 객체의 키와 값 추출🔐
• 객체 복사와 참조🔗
• 핵심 내용👀

자바스크립트에서 객체와 배열의 주요 차이점은 데이터 구조에 있습니다. 객체는 키-값 쌍으로 구성되어 있어서 각 데이터에 이름을 지정할 수 있습니다. 반면, 배열은 순서가 있는 리스트 형태로 데이터를 저장합니다. 객체는 각 데이터에 고유한 식별자(키)를 부여하고, 배열은 순서에 따라 인덱스로 접근할 수 있습니다.
배열에 관한 내용은 아래 포스팅을 참고해 주세요👀

[자바스크립트]JavaScript 배열 완벽 가이드: 배열 메소드와 활용법 총정리

---

01. 객체의 기본 개념🔍

자바스크립트 객체는 데이터를 구조화하고 저장하는 데 사용하는 기본 단위입니다. 객체는 속성(프로퍼티)과 메서드(함수)로 구성되며, 각각의 속성은 키와 값의 쌍으로 이루어져 있습니다. 자바스크립트 객체의 기본 개념을 이해하는 것은 웹 개발의 핵심입니다.

객체의 정의

객체는 키와 값의 쌍으로 구성된 데이터 구조입니다. 키는 문자열이고, 값은 어떤 타입이든 가능합니다. 자바스크립트에서는 객체 리터럴 표기법을 사용하여 쉽게 객체를 만들 수 있습니다.

const person = {
  name: 'John',
  age: 30,
  city: 'New York'
};

위의 예제에서 person 객체는 name, age, city라는 세 가지 속성을 가지고 있습니다.

---

02. 자바스크립트 객체 생성 및 사용💡

자바스크립트에서 객체를 생성하는 방법은 다양합니다. 객체 리터럴, 생성자 함수, ES6 클래스 문법 등을 사용할 수 있습니다.

1. 객체 리터럴을 사용한 객체 생성

객체 리터럴은 가장 간단하고 널리 사용되는 방법으로, 중괄호 {}를 사용하여 객체를 생성하는 것입니다. 이 방법은 객체를 직접 정의하고 초기화할 때 유용합니다.

예시: 객체 리터럴을 사용한 객체 생성

// 객체 리터럴로 객체 생성
let person = {
  name: "John",
  age: 30,
  greet: function() {
    console.log(`Hello, my name is ${this.name}.`);
  }
};

console.log(person); // { name: "John", age: 30, greet: [Function: greet] }

person.greet(); // Hello, my name is John.
"

특징

• 중괄호 {} 내부에 key: value 형태로 프로퍼티를 정의합니다.
• 각 프로퍼티는 쉼표로 구분됩니다.
• 함수(메서드)를 포함할 수 있으며, 함수는 일반 함수 선언 또는 ES6 화살표 함수로 정의할 수 있습니다.
• 객체 리터럴을 사용하면 객체를 간편하게 정의하고 초기화할 수 있습니다.

추가 예시: 계산된 속성 이름 (Computed Property Names)

계산된 속성 이름(computed property names)을 사용하면 객체 리터럴 내에서 프로퍼티 이름을 동적으로 정의할 수 있습니다.

let propertyName = "age";

let person = {
  name: "John",
  [propertyName]: 30,
};

console.log(person); // { name: "John", age: 30 }

주의사항

• 객체 리터럴을 사용하여 객체를 생성할 때는 단일 인스턴스만 생성됩니다. 즉, 클래스나 생성자 함수를 사용하여 여러 인스턴스를 생성하는 것과는 다릅니다.
• 객체 리터럴은 코드의 가독성을 높이고 간편하게 객체를 정의할 수 있어 매우 유용합니다.

객체 리터럴의 활용

• 단순한 데이터 구조: 간단한 구조의 데이터를 표현할 때 유용합니다.
• 객체 초기화: 초기 값이 있는 객체를 효율적으로 생성할 수 있습니다.
• JSON 데이터: JSON과 유사한 형태의 데이터를 자바스크립트 객체로 변환할 때 활용될 수 있습니다.

---

2. 생성자 함수를 사용한 객체 생성

생성자 함수는 객체를 생성하고 초기화하는 함수입니다. 일반 함수와 유사하게 정의되지만, 일반적으로 첫 글자를 대문자로 시작하여 구별합니다. 생성자 함수는 new 연산자와 함께 호출되어 객체를 인스턴스화합니다.

예시: 생성자 함수를 사용한 객체 생성

// 생성자 함수 정의
function Person(name, age) {
  this.name = name;
  this.age = age;
}

// 인스턴스 생성
let person1 = new Person("John", 30);
let person2 = new Person("Jane", 25);

console.log(person1); // Person { name: "John", age: 30 }
console.log(person2); // Person { name: "Jane", age: 25 }

특징

• 생성자 함수 내부에서 this 키워드를 사용하여 객체의 프로퍼티를 정의하고 초기화합니다.
• new 연산자를 사용하여 생성자 함수를 호출할 때, 새로운 객체가 생성되고 this는 이 새로운 객체를 가리킵니다.
• 생성자 함수는 일반 함수와 동일하게 메서드도 정의할 수 있습니다.

---

3. ES6 클래스 문법을 사용한 객체 생성: new Object()

ES6에서 도입된 클래스는 객체지향 프로그래밍의 클래스 개념과 유사하게 자바스크립트에서 객체를 생성하는 문법적 설탕(syntactic sugar)입니다. 클래스를 사용하면 생성자 함수보다 더 간결하고 명확한 코드를 작성할 수 있습니다.

예시: 클래스를 사용한 객체 생성

// 클래스 정의
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  
  sayHello() {
    console.log(`Hello, my name is ${this.name}.`);
  }
}

// 인스턴스 생성
let person1 = new Person("John", 30);
let person2 = new Person("Jane", 25);

console.log(person1); // Person { name: "John", age: 30 }
console.log(person2); // Person { name: "Jane", age: 25 }

person1.sayHello(); // Hello, my name is John.
person2.sayHello(); // Hello, my name is Jane.

특징

• 클래스는 class 키워드를 사용하여 정의됩니다.
• constructor 메서드는 객체가 생성될 때 호출되며, 객체의 초기화를 담당합니다.
• 클래스 내부에서 메서드는 함수 선언만으로 정의할 수 있습니다.
• 클래스는 상속을 지원하므로, 기존 클래스를 확장하여 새로운 클래스를 정의할 수 있습니다.

선택 기준

1. 가독성과 유지보수성: 클래스는 일반적으로 가독성이 높고 직관적입니다. 코드를 읽고 이해하기 쉽게 만들어줍니다.
2. 상속과 확장: 클래스는 상속을 통해 코드의 재사용성을 높일 수 있습니다. 상속 관계가 필요한 경우 클래스를 사용하는 것이 유리합니다.
3. ES6 지원 여부: 최신 자바스크립트 환경에서는 클래스를 사용하는 것이 권장됩니다. 또한, 클래스는 모듈화와 결합성을 더 잘 다룰 수 있습니다.

---

03. 객체 프로퍼티 접근과 수정🔧

객체의 속성에 접근하는 방법은 두 가지가 있습니다: 점 표기법(dot notation)과 대괄호 표기법(bracket notation)입니다.

1. 점 표기법 (Dot Notation)

점 표기법은 객체의 속성명을 직접 점(.) 뒤에 붙여서 접근하는 방식입니다. 이 방법은 속성명이 유효한 변수명 규칙을 따라야 합니다.

let person = {
  name: "John",
  age: 30,
  address: {
    city: "New York",
    zipcode: "10001"
  }
};

console.log(person.name); // "John"
console.log(person.age); // 30
console.log(person.address.city); // "New York"
console.log(person.address.zipcode); // "10001"

---

2. 대괄호 표기법 (Bracket Notation)

대괄호 표기법은 객체의 속성명을 문자열 형태로 대괄호([]) 안에 넣어 접근하는 방식입니다. 이 방법을 사용하면 객체 속성명으로 변수를 사용할 수 있고, 특수 문자나 공백이 포함된 속성명에 접근할 수 있습니다.

let person = {
  name: "John",
  age: 30,
  "home address": "123 Main St"
};

let propertyName = "name";

console.log(person[propertyName]); // "John"
console.log(person["age"]); // 30
console.log(person["home address"]); // "123 Main St"

동적 속성 접근

대괄호 표기법은 속성명을 동적으로 결정할 수 있는 장점이 있습니다. 위 예제에서 propertyName 변수에 저장된 속성명을 이용해 접근할 수 있습니다. 이는 프로그래밍할 때 유용하게 사용될 수 있습니다.

let person = {
  name: "John",
  age: 30,
};

let propertyName = "age";

console.log(person[propertyName]); // 30

존재하지 않는 속성에 접근할 때

점 표기법으로 존재하지 않는 속성에 접근하면 undefined가 반환됩니다. 반면에 대괄호 표기법에서는 존재하지 않는 속성에 접근하면 undefined가 반환됩니다.

---

객체의 속성 수정, 추가, 삭제

자바스크립트에서 객체의 속성을 다루는 방법은 간단하지만 중요합니다. 객체의 속성을 수정, 추가, 삭제할 수 있는 방법을 알아보겠습니다.

1. 속성 수정 (Property Modification)

기존 객체의 속성 값을 변경하는 것을 속성 수정이라고 합니다. 점 표기법과 대괄호 표기법 모두 사용 가능합니다.

let person = {
  name: "John",
  age: 30,
};

person.age = 31; // 점 표기법
person["name"] = "Jane"; // 대괄호 표기법

console.log(person); // { name: "Jane", age: 31 }

---

2. 속성 추가 (Property Addition)

객체에 새로운 속성을 추가할 수 있습니다. 이미 존재하는 속성에 대해서도 동일한 방법으로 추가할 수 있습니다.

let person = {
  name: "John",
  age: 30,
};

person.address = "123 Main St"; // 점 표기법
person["email"] = "john@example.com"; // 대괄호 표기법

console.log(person); // { name: "John", age: 30, address: "123 Main St", email: "john@example.com" }

---

3. 속성 삭제 (Property Deletion)

객체에서 속성을 삭제할 때는 delete 키워드를 사용합니다. 점 표기법과 대괄호 표기법 모두 사용 가능합니다.

let person = {
  name: "John",
  age: 30,
  address: "123 Main St",
};

delete person.age; // 점 표기법
delete person["address"]; // 대괄호 표기법

console.log(person); // { name: "John" }

주의사항

• delete 키워드로 삭제된 속성은 객체 내부에 더 이상 존재하지 않습니다.
• 삭제된 속성을 접근하면 undefined가 반환됩니다.
• 배열의 요소 삭제와는 다르게, 객체 속성 삭제는 메모리에서 해당 속성을 제거하지 않습니다. 객체의 다른 참조에서는 여전히 접근할 수 있습니다.

---

04. 객체의 특성과 const 선언📑

자바스크립트에서 const 키워드를 사용하여 변수를 선언하면 해당 변수는 재할당이 불가능합니다. 하지만 객체의 경우, const로 선언한 후에도 객체 내부의 프로퍼티는 변경할 수 있습니다. 이는 객체 자체가 메모리에 할당된 주소를 가리키는 값이 const로 선언되기 때문입니다. 객체 자체의 메모리 주소가 변하지 않으며, 그 안의 내용(프로퍼티)만 변경 가능합니다.

const icecream = {
  flavor: "민트 초코",
  color: "민트",
};

console.log(icecream); // { flavor: "민트 초코", color: "민트" }

// 객체의 프로퍼티는 변경 가능
icecream.color = "초코";
console.log(icecream); // { flavor: "민트 초코", color: "초코" }

// 객체 자체를 재할당하려고 하면 오류 발생
// icecream = {}; // TypeError: Assignment to constant variable.

// 객체의 새로운 프로퍼티 추가도 가능
icecream.newFlavor = "바닐라";
console.log(icecream); // { flavor: "민트 초코", color: "초코", newFlavor: "바닐라" }

위 예제에서 볼 수 있듯이, icecream 객체는 const로 선언되었지만, 객체 내부의 프로퍼티들은 자유롭게 수정할 수 있습니다. 그러나 객체 자체를 다른 객체로 변경하려고 하면 오류가 발생합니다.

이러한 동작은 객체가 기본적으로 참조 타입이기 때문에 발생하는 것입니다. 객체가 할당된 변수는 객체의 메모리 위치(참조)를 가리키며, const는 이 참조 값을 변경할 수 없게 만듭니다. 따라서 객체의 내용(프로퍼티)은 수정할 수 있지만, 다른 객체로의 완전한 재할당은 불가능합니다.

이 특성을 이해하면서 const로 선언한 객체를 안전하게 사용하고, 객체 내부의 변경이 필요한 경우에는 프로퍼티 수정을 활용하는 것이 좋습니다.

---

객체의 키와 값 추출🔐

자바스크립트에서 객체의 키와 값은 다양한 방법으로 추출할 수 있습니다. 주로 Object.keys(), Object.values(), Object.entries() 메서드를 사용하여 객체를 조작할 수 있습니다.

1. Object.keys(): 객체의 키(key) 추출

Object.keys() 메서드는 객체의 모든 키를 배열로 반환합니다.

let person = {
  name: "John",
  age: 30,
  city: "New York",
};

let keys = Object.keys(person);

console.log(keys); // ["name", "age", "city"]

---

2. Object.values(): 객체의 값(value) 추출

Object.values() 메서드는 객체의 모든 값들을 배열로 반환합니다.

let person = {
  name: "John",
  age: 30,
  city: "New York",
};

let values = Object.values(person);

console.log(values); // ["John", 30, "New York"]

---

3. Object.entries(): 키(key)와 값(value)의 쌍 추출

Object.entries() 메서드는 객체의 각 키와 값의 쌍을 [key, value] 형태의 배열로 반환합니다.

let person = {
  name: "John",
  age: 30,
  city: "New York",
};

let entries = Object.entries(person);

console.log(entries);
// [
//   ["name", "John"],
//   ["age", 30],
//   ["city", "New York"]
// ]

---

주의사항

• Object.keys(), Object.values(), Object.entries() 메서드는 모두 객체의 열거 가능한(enumerable) 속성만 반환합니다.
• 상속받은 프로퍼티나 열거할 수 없는(non-enumerable) 프로퍼티는 포함되지 않습니다.
• 반환된 배열의 순서는 객체의 프로퍼티를 정의한 순서와 동일합니다.

---

객체 복사와 참조🔗

자바스크립트에서 객체는 참조 타입(reference type)이므로 변수에 할당될 때 객체 자체가 복사되는 것이 아니라 객체의 참조(메모리 주소)가 복사됩니다. 따라서 객체를 복사하면 복사된 변수와 원본 변수는 같은 객체를 참조하게 됩니다. 이 개념을 이해하기 위해 여러 방법을 살펴볼 수 있습니다. 객체 복사와 참조는 메모리 관리와 객체의 상태 변경에 중요한 영향을 미칩니다.

객체의 참조

자바스크립트에서 객체는 변수에 할당될 때 객체 자체가 복사되는 것이 아니라 객체의 참조(메모리 주소)가 복사됩니다. 따라서 한 변수를 통해 객체를 변경하면 다른 변수에서도 변경된 객체를 참조할 수 있습니다.

let originalObj = {
  name: "John",
};

let cloneObj = originalObj; // 참조 복사

cloneObj.name = "Jane";

console.log(originalObj.name); // "Jane"
console.log(cloneObj.name); // "Jane"

위의 예시에서 originalObj와 cloneObj는 동일한 객체를 참조하므로 하나의 객체를 수정하면 다른 변수에서도 수정된 내용을 볼 수 있습니다.

자바스크립트에서 객체를 복사하고 참조하는 방법은 객체의 구조와 복잡성에 따라 다릅니다. 얕은 복사는 객체의 최상위 레벨 프로퍼티들만 복사하며 내부 객체는 참조를 유지합니다. 깊은 복사는 내부 구조까지 재귀적으로 복사하여 완전히 독립적인 새로운 객체를 만듭니다.

---

1. 얕은 복사 (Shallow Copy)

객체의 최상위 속성들만 복사되는 방식입니다. 내부 객체나 배열은 참조로 복사됩니다.

방법 1: Spread 연산자 사용

let originalObj = {
  name: "John",
  age: 30,
  address: {
    city: "New York",
    zipcode: "10001"
  }
};

// Spread 연산자를 이용한 얕은 복사
let cloneObj = { ...originalObj };

console.log(cloneObj === originalObj); // false
console.log(cloneObj); // { name: "John", age: 30, address: { city: "New York", zipcode: "10001" } }

// 내부 객체는 동일한 객체를 참조
console.log(cloneObj.address === originalObj.address); // true

방법 2: Object.assign() 메서드 사용

let originalObj = {
  name: "John",
  age: 30,
  address: {
    city: "New York",
    zipcode: "10001"
  }
};

// Object.assign() 메서드를 이용한 얕은 복사
let cloneObj = Object.assign({}, originalObj);

console.log(cloneObj === originalObj); // false
console.log(cloneObj); // { name: "John", age: 30, address: { city: "New York", zipcode: "10001" } }

// 내부 객체는 동일한 객체를 참조
console.log(cloneObj.address === originalObj.address); // true

---

2. 깊은 복사 (Deep Copy)

깊은 복사는 객체의 모든 구조를 재귀적으로 복사하여 완전히 새로운 객체를 만드는 방식입니다. 객체의 모든 레벨에서 복사가 이루어집니다.

방법 1: 재귀적 함수 사용

function deepCopy(obj) {
  let result = Array.isArray(obj) ? [] : {};
  
  for (let key in obj) {
    if (typeof obj[key] === 'object' && obj[key] !== null) {
      result[key] = deepCopy(obj[key]); // 재귀적으로 내부 객체 복사
    } else {
      result[key] = obj[key]; // 기본 타입 값 복사
    }
  }
  
  return result;
}

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

let deepClone = deepCopy(obj);

console.log(deepClone); // { a: 1, b: { c: 2 } }

console.log(obj === deepClone); // false
console.log(obj.b === deepClone.b); // false (내부 객체도 새로운 객체로 복사됨)

방법 2: 외부 라이브러리 사용 (lodash의 _.cloneDeep() 예시)

const _ = require('lodash');

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

let deepClone = _.cloneDeep(obj);

console.log(deepClone); // { a: 1, b: { c: 2 } }

console.log(obj === deepClone); // false
console.log(obj.b === deepClone.b); // false (내부 객체도 새로운 객체로 복사됨)

---

주의사항

• 얕은 복사는 객체의 내부 객체는 참조를 공유하지만, 깊은 복사는 모든 내부 객체까지 새로운 복사본을 만듭니다.
• 깊은 복사는 재귀적으로 모든 속성을 복사하기 때문에 성능적인 측면에서 비용이 많이 들 수 있습니다.
• 객체가 복잡하고 중첩된 경우에는 깊은 복사를 사용하는 것이 안전합니다.

객체를 복사할 때는 복사의 깊이와 성능 요구 사항을 고려하여 적절한 방법을 선택하는 것이 중요합니다. 얕은 복사는 간단하게 구현할 수 있지만, 내부 객체의 변경이 원본에도 영향을 줄 수 있습니다. 깊은 복사는 모든 구조를 완벽하게 복제하지만, 처리 시간이 길어질 수 있습니다.

---

핵심 내용👀