[JavaScript] 자바스크립트 객체(Object) 이해하기 - 1

[JavaScript] 자바스크립트 자료형(DataType) 이해하기에서 자바스크립트에 존재하는 7가지 자료형에 대해서 살펴봤었는데, 그중에 Primitive type 6가지를 제외한 마지막 나머지 1가지. 객체에 대해서 조금 더 살펴보자.

 

자료형 7개 중에서 단 1가지의 종류라서 언뜻 보면 별로 중요하지 않은 것처럼 보이지만 반대로 생각하면 객체는 독립적으로 유일한 데이터 형태인 만큼 굉장히 중요한 요소이다. 실제로도 자바스크립트는 Primitive Type 의 값을 제외한 모든 것들이 이 객체로 이루어져 있는 객체 기반 스크립트 언어다.

 

- 객체 만드는 방법

자, 그럼 이제 진짜로 객체에 대해서 살펴보자. 객체는 중괄호를 열고 닫는 것으로 만들 수 있다.

const myObject = {};

이밖에도 객체를 생성하는 방법은 몇 가지가 더 있지만,

이 형식을 가장 많이 사용한다.

일반적으로 객체는 처음 만들 때 그 값들을 초기화 해주는데,

객체는 중괄호 내부에 key: value모양으로 값을 가질 수 있고

여러 개의 값들은 쉼표로 구분한다.

const myObject = {
  name: 'bigtop',
  age: 345,
  phoneNumber: '010-1234-5678',
  address: 'Somewhere in KOREA',
};

 

자료형에서도 언급했었지만, key에는 String과 Symbol type만 사용할 수 있다.

const myObject = {
  name: 'bigtop',
  age: 345,
  phoneNumber: '010-1234-5678',
  address: 'Somewhere in KOREA',
  1234567890: 'Number'
};

실제로 위 코드에서 마지막 1234567890 부분처럼 key에 숫자 값을 넣어도 큰 문제는 없지만 이것은 Number type이 아니라 String type으로 취급된 값이다. 이 방법은 객체의 값들에 접근하는 방법을 하나 잃어버리는 방식이기 때문에 가능은 하지만, 권장되지 않는다.

const myObject = {
  name: 'bigtop',
  age: 345,
  'phone number': '010-1234-5678',
  address: 'Somewhere in KOREA',
};

또 한 가지, key의 값이 String인데 왜 따옴표가 없을까 싶지만, String만 가능하다는 규칙 때문에 생략이 가능하다.

하지만 위 코드의 phone number 처럼 중간에 공백(띄어쓰기)을 사용해야 하는 경우에는 따옴표를 표기해주어야 하는데, 이 방법도 역시 위와 마찬가지로 객체의 값들에 접근하는 방법을 하나 잃어버리는 방식이기 때문에 가능은 하지만, 권장되지 않는다.

 

한편 value에는 어떤 값이든 모든 타입의 자료형을 데이터로 사용할 수 있다, 

const myObject = {
  name: {
    firstName: 'bigtop',
    lastName: 'Kim'
  },
  age: 345,
  phoneNumber: '010-1234-5678',
  address: 'Somewhere in KOREA',
};

그렇기 때문에 심지어 이렇게 위 코드에서 name 처럼 객체 안에 또 객체를 넣을 수도 있다. 이런 구조를 조금만 활용하면 객체는 정말 무수히 복잡한 형태로 활용될 수 있다.

- 용어정리

잠깐 용어 정리를 하자면, 계속해서 말하고 있는 key: value모양의 한 쌍을 속성. 프로퍼티라고 말한다.

그리고 name, age, phoneNumber, address를 키(key)라고 부르고,

'bigtop', 345, '010-1234-5678', 'Somewhere in KOREA' 부분을 값(value)라고 부른다.

뭔가 말장난 같지만 추가적으로, 키와 값을 속성과 연결 지어서 키는 속성명, 값은 속성 값이라고도 부른다.

 

그런데 가만히 보면 var, let, const 같은 변수 선언 키워드가 없고 등호가 콜론으로 바뀌었을 뿐, 뭔가 모양이 변수선언과 크게 다르지 않아보인다.

조금 억지를 부려서 가볍게 생각하면 객체는 key: value모양을 하고 있는 여러 변수들의 묶음 상자라고 볼 수 있다.

 

 

- 나머지는 다음에..

객체는 내용들이 많다 보니 이렇게 만들어진 객체의 속성들을 다루는 부분은 다음 편에..