자바스크립트에서 Object란 무엇인가? 배경부터 등장 후까지!

Javascript

자바스크립트에서 Object란 무엇인가? 배경부터 등장 후까지!

JANNNNNN 2024. 9. 29. 19:26

자바스크립트에서 객체(Object)는 여러 값(데이터)와 함수(메서드)를 하나로 묶어주는 매우 유용한 데이터 타입입니다! 객체는 키-값(key-value) 쌍의 집합으로 이루어지는데요. 각각의 키는 고유한 식별자 역할을 합니다. 여기서 객체는 무엇이고 어떻게 사용하는지 어떤 특징이 있는지 알아보도록 하겠습니다. 객체에 대해 알아보고 마지막에 객체(Object)가 어떻게 탄생하게 되었는지, 그리고 객체의 등장으로 무엇이 편리해졌는지도 함께 알아보도록 할게요👍

📘 1. 객체(Object) 생성

객체를 만드는 방법은 매우 간단합니다. 중괄호 {} 안에 키-값 쌍을 작성하면 됩니다.

let Dog = {
  name: '말티즈', // 키: 'name', 값: '말티즈'
  color: 'white', // 키: 'color', 값: 'white'
  dance: function() { // 메서드
    return `${this.name}는 하얀색입니다.`; 
  }
};

위 코드는 Dog라는 객체를 생성하고, 세 가지 속성(name, color, dance)을 포함하고 있습니다. 이때 this 키워드는 객체의 속성에 접근할 수 있는 방법입니다.(추후에 자세하게 다룰 예정)

⭐️ 중요: this의 역할

객체 내부에서 메서드(function)를 작성할 때 this는 해당 객체를 가리킵니다. this를 사용하면 객체의 속성을 동적으로 참조할 수 있습니다.

📘 2. 객체 속성에 접근하기

객체의 속성에 접근하는 방법은 크게 두 가지입니다.

점 표기법: 객체이름.속성이름
대괄호 표기법: 객체이름['속성이름']

console.log(Dog.name); // 출력: '말티즈'
console.log(Dog['name']); // 출력: '말티즈'

대괄호 표기법은 속성 이름이 문자열로 동적으로 결정될 때 유용합니다.

const key = 'name';
console.log(Dog[key]); // 출력: '말티즈'

⭐️ 중요: 점 표기법 vs 대괄호 표기법

점 표기법은 간단하고 자주 사용되지만, 대괄호 표기법은 속성 이름이 변수로 지정되거나 특수 문자가 포함된 경우에 필요합니다.

📘 3. 동적으로 속성 추가 및 수정

객체의 속성을 동적으로 추가하거나 수정할 수 있습니다.

dog2['name'] = '고양이'; // 값 변경하기
dog2['newcat'] = '페르시안'; // 존재하지 않는 값을 넣으면 새로 생성됨

위 코드에서는 객체 dog2에 속성 newcat을 추가하고, 기존의 name 속성의 값을 변경했습니다.

⭐️ 중요: 속성 삭제

delete 키워드를 사용하여 객체의 속성을 삭제할 수 있습니다.

delete dog2['newcat']; // 삭제

📘 4. 객체 리터럴 속성 축약 (ES6)

속성의 이름과 변수명이 같을 때, 객체를 생성하는 새로운 문법을 사용하면 더욱 간결하게 코드를 작성할 수 있습니다.

const name = '포메라니안';
const dog3 = {
  name, // 위와 동일: name: name
};

📘 5. const로 선언된 객체

객체를 const로 선언하면 객체 자체를 변경할 수는 없지만, 내부 속성은 수정할 수 있습니다.

const pome = {
  name: '포메라니안',
  type: 'dog',
};

pome['type'] = '귀여운 강아지'; // 속성 수정 가능

pome = {}처럼 전체 객체를 재할당하려고 하면 오류가 발생하지만, 속성은 변경 가능합니다.

⭐️ 중요: const 객체와 속성 변경

const로 선언된 객체는 재할당할 수 없지만, 객체 내부의 프로퍼티는 변경할 수 있습니다.

📘 6. 객체의 모든 키와 값 가져오기

모든 키를 가져오기: Object.keys()
모든 값을 가져오기: Object.values()

console.log(Object.keys(pome)); // 출력: ['name', 'type']
console.log(Object.values(pome)); // 출력: ['포메라니안', '귀여운 강아지']

📘 7. 객체의 메서드

객체는 속성뿐만 아니라 함수도 포함할 수 있습니다. 객체 내부에 정의된 함수를 메서드라고 부릅니다.

const Dog = {
  name: '말티즈',
  dance: function() {
    return `${this.name}가 춤을 춥니다.`;
  }
};

this를 사용하여 객체의 속성에 접근하고, 동적으로 값을 반환할 수 있습니다.

✨ 결론: 객체의 특징 요약

객체는 키-값 쌍의 집합으로, 다양한 속성과 메서드를 포함할 수 있습니다.
this 키워드는 객체 내에서 해당 객체를 참조하며, 속성에 동적으로 접근할 수 있게 해줍니다.
속성을 추가, 수정, 삭제할 수 있으며, 객체의 모든 키와 값을 쉽게 가져올 수 있습니다.
const로 선언된 객체는 전체 재할당이 불가능하지만, 내부 속성은 변경 가능합니다.

⭐️ 중요: 헷갈릴 수 있는 부분 정리

this의 사용: 메서드 내부에서 객체를 참조할 때 사용합니다.
객체 수정: const로 선언한 객체도 내부 속성은 변경이 가능합니다. 그러나 초기화는 불가능합니다.
점 표기법 vs 대괄호 표기법: 속성 이름이 변수로 지정될 때는 대괄호 표기법을 사용합니다.

객체는 자바스크립트에서 데이터를 효율적으로 관리하고 다루는 핵심적인 개념입니다. 이러한 특징을 이해하고 잘 활용하면 코드의 가독성과 유지보수성을 높일 수 있습니다. 💡

📚 1. 객체(Object)가 나오게 된 배경

초기의 프로그래밍에서는 주로 변수와 배열을 사용해 데이터를 관리했습니다. 예를 들어 강아지의 이름과 색상을 지정한다고 가정해볼게요.

let dogName = '말티즈';
let dogColor = 'white';

이처럼 데이터를 각각의 변수에 저장할 수 있지만, 정보의 양이 많아질수록 관리하기 어려워집니다. 특히 한 개의 개체(강아지)에 대한 다양한 속성을 하나로 묶어 관리하고 싶을 때에는 문제가 생깁니다. 그리고 강아지가 여러 마리라면 어떻게 할까요??

여기에서 배열/리스트를 사용하면 된다고 생각하실 수 있겠지만, 배열은 요소에 순서로 접근하기 때문에 이 값이 어떤 정보인지를 알기가 어렵다는 단점이 있습니다.

let dog = ['말티즈', 'white'];

배열의 첫 번째 요소가 이름이고 두 번째가 색상이라는 것을 항상 기억해야하는 불편함이 생기게 되는 것이죠.(데이터를 접근할 때 인덱스로 접근하므로)

⭐️ 중요: 변수와 배열의 한계

데이터가 많아질수록 관리가 어렵고, 코드의 가독성이 떨어집니다.
각 데이터의 의미(이름, 색상 등)를 직접 기억하거나 주석으로 표시해야 합니다.

🎯 2. 객체(Object)의 등장

이러한 문제를 해결하기 위해 객체(Object)가 등장했습니다. 객체는 키-값 쌍을 사용하여 다양한 정보를 하나의 구조로 묶을 수 있게 해줍니다. 이로써 각 데이터가 어떤 의미를 가지는지 쉽게 알 수 있게 되었죠.

let Dog = {
  name: '말티즈',
  color: 'white',
  dance: function() {
    return `${this.name}가 춤을 춥니다.`;
  }
};

위 예제에서 Dog 객체는 name, color, dance라는 여러 속성을 하나로 묶고 있습니다. 이제 우리는 '말티즈'라는 이름이 어떤 정보를 나타내는지 헷갈릴 필요 없이 Dog.name을 통해 쉽게 접근할 수 있답니다! 이전에 비해 객체지향적으로도, 코드를 읽기에도 정말 편리해졌죠?

💡 3. 객체(Object)로 인한 편리함

객체의 등장으로 다음과 같은 점이 편리해졌습니다

데이터 구조화: 하나의 개체에 대한 여러 속성을 하나의 객체로 묶어 구조화할 수 있습니다.
코드 가독성 향상: 변수와 배열을 사용하던 때보다, 객체의 키-값 쌍은 정보의 의미를 명확하게 나타내므로 코드의 가독성이 높아집니다.
동적 속성 관리: 필요에 따라 속성을 동적으로 추가, 수정, 삭제할 수 있어 확장성이 뛰어납니다.
메서드 사용: 객체 내에 메서드(함수)를 추가하여 그 객체에 대한 동작을 정의할 수 있습니다. 이는 프로그래밍을 더욱 객체 지향적으로(OOP) 만들었습니다.

예를 들어, 강아지의 이름을 바꾸거나 색상을 동적으로 추가할 수 있습니다.

Dog.name = '푸들'; // 이름 변경
Dog.size = 'small'; // 새로운 속성 추가

📌 결론

객체는 많은 양의 관련 데이터를 하나로 묶고, 그 데이터를 다루는 동작(메서드)까지 포함할 수 있도록 해주는 자바스크립트의 핵심 기능입니다. 객체를 사용하면 복잡한 데이터를 구조적으로 관리할 수 있어 코드를 더 쉽게 작성하고 이해할 수 있게 해줍니다.

이렇게 객체(Object)의 탄생 배경과 편리해진 점을 이해하면, 객체가 자바스크립트에서 얼마나 중요한 역할을 하는지 더 명확하게 느낄 수 있을 거예요. 😊