[TIL] 객체란 무엇이며, 객체가 필요한 이유는? (JavaScript)

객체란?

• 하나의 변수에 여러 속성을 저장할 수 있도록 해주는 자바스크립트의 참조형 데이터 타입 중 하나
• 아래 이미지처럼 Key(속성 이름)과 Value(속성 값)이 한 쌍의 Property(속성)으로 연결되어 있으며, 배열과 달리 순서가 중요하지 않다.
  • 객체를 만들기 위해서는 평소처럼 변수를 선언한 다음, 중괄호로 Key-Value의 속성 쌍을 묶어주면 된다. (= Object Literal 방식)

© 위코드

배열 예시

예를 들어 다음과 같은 배열이 있다고 생각해보자.

let person1 = ['곽철용', 'AB형', 'ENFP', '바닐라라떼'];

위 배열에는 특정 사람의 이름과 혈액형, MBTI, 좋아하는 커피에 대한 정보가 담겨있다.
우리가 원하는 정보를 얻기 위해서는 해당 배열에 있는 Index number를 기억해야 한다.

 

또 다른 사람이 있다고 생각해보자.

let person2 = ['아이스아메리카노', 'INTP', '홍혁팔', 'O형'];

person2는 person1의 정보와는 다른 순서로 값이 뒤섞여 있다. 사람이 두 명일 때는 괜찮지만, 100명이라면 어떻게 될까? 자료를 처리하기 힘들어지지 않을까? 그래서 나온 개념이 바로 객체다.

 

객체 예시

const myself = {
  name: 'Code Kim',
  location: {
    country: 'South Korea',
    city: 'Seoul'
  },
  '한국 나이': 32,
  cats: ['냥순', '냥돌']
};

name이라는 속성에 'Code Kim'이라는 값이 할당된 객체를 myself라는 이름의 변수에 저장해주고, Code Kim이라는 사람에 대한 각종 정보를 속성의 이름과 값으로 같은 배열 안에 함께 저장해줌으로써 배열과는 다른 방식으로, Index number에 구애받지 않고 자료를 처리할 수 있다는 점이 배열과 객체의 가장 큰 차이점이다. (즉, 객체로 표현하면 요소 간에 정해진 순서가 없기 때문에 Index number를 기억하지 않아도 된다.)

 

(참고) 속성 이름은 따옴표가 없이도 String(문자열)로 인식되기 때문에 따옴표가 굳이 필요하지 않은 경우에는 따옴표를 사용하지 않는다. 다만, '한국 나이'에 들어간 공백이나 한글과 같이 식별자에 허용되지 않는 문자가 들어간 속성 이름을 정의할 때는 반드시 문자열 표기(따옴표)를 사용해야 한다.

---

객체에 저장된 데이터에 접근하기

객체에서는 우리가 원하는 정보의 Key(속성 이름)만 알면 정보(Value; 속성 값)에 접근할 수 있다.
그 정보에 접근하는 방식으로는 Dot Notation과 Bracket Notation 두 가지의 방식이 있다.

(1) Dot Notation 방식

myself.name;      // "Code Kim"
myself.location;  // {city: "Seoul", country: "South Korea"}
myself.cats;      // ["냥순", "냥돌"]

myself.'한국 나이';  // Uncaught SyntaxError: Unexpected string

• Dot Notation 방식을 사용하면, 기본적으로 속성 이름(Key)에 따옴표 없이 속성 값에 접근할 수 있다.
• 단, 앞선 객체 예시에서와 같이 식별자에 허용되지 않는 문자가 속성 이름에 들어가 있는 경우에는 Dot Notation 방식으로 속성 값에 접근할 수 없다.
  
  • 이처럼 특별한 경우가 아니라면, 일반적으로는 Dot Notation을 많이 사용하는 편이다!

(2) Bracket Notation 방식

myself['name'];      // "Code Kim"
myself['location'];  // {city: "Seoul", country: "South Korea"}
myself['cats'];      // ["냥순", "냥돌"]

myself['한국 나이'];  // 32

let myAge = '한국 나이';
myself[myAge];  // 32
myself.myAge;   // undefined

• Bracket Notation 방식을 사용하면, 기본적으로 대괄호 안에서 속성 이름(Key)에 따옴표를 붙인 채로 속성 값에 접근할 수 있다.
• 또한, 속성 이름을 문자열로 인식하여 할당받은 변수를 통해서 속성 값에 접근할 수도 있다.
  (Dot Notation 방식에서는 변수를 통해서 속성 값에 접근하는 것이 불가능!)

---

객체가 필요한 이유는?

1. 자바스크립트는 객체(Object) 기반의 스크립트 언어이며, 자바스크립트를 이루고 있는 거의 "모든 것"이 객체다. 원시 타입(Primitives)을 제외한 나머지 값들(함수, 배열, 정규표현식 등)은 모두 객체이기 때문에 자바스크립트에서 객체는 필수 불가결한 존재다.
2. 객체는 데이터를 의미하는 프로퍼티(Property)와 데이터를 참조하고 조작할 수 있는 동작을 의미하는 메소드(Method)로 구성된 집합이다. 객체는 데이터(프로퍼티)와 그 데이터에 관련되는 동작(메소드)을 모두 포함할 수 있기 때문에 데이터와 동작을 하나의 단위로 구조화할 수 있어 유용하다.
3. 관련 있는 정보들을 서로 연결하는 데에 객체를 활용하면, 데이터(Value)와 문자열(Key)을 연관 지어서 저장할 수 있기 때문에 코드를 유지 보수할 때에도 매우 편리하다.
   • 간단한 코드에서는 이를 쉽게 느낄 수 없겠지만, 코드가 복잡해지고 데이터가 많아질수록 유지 보수가 훨씬 편리해진다는 걸 느낄 수 있을 것이다.