[JavaScript] ④ 자바스크립트 객체란 무엇일까?

자바스크립트는 객체 기반 언어다. 자바스크립트는 객체 기반 프로그래밍 언어이며, 원시 값을 제외한 모든 값은 객체다. 즉, 함수, 배열, 정규 표현식 등이 모두 객체다. 객체는 프로퍼티(property)로 구성되며, 프로퍼티는 키(key)와 값(value)로 구성된다. 프로퍼티의 값이 함수일 경우 이를 메소드(method)라 한다.

객체의 의해

비유를 통해 우선 객체의 개념을 이해해보자. 우리는 실생활에서 객체의 예시를 살펴볼 수 있다. 집에서 키우는 고양이, 사용 중인 키보드, 스마트폰 등이 모두 객체다. 이러한 객체들은 상태(state)를 갖거나 행동(behavior)을 한다. 예를 들어, 고양이의 경우 이름, 눈동자 색, 종, 꼬리 모양 등의 상태와 더불어 꾹꾹이, 뛰어 오르기, 잠자기 등의 행동을 한다.

 

정리하자면 객체란 키와 값(또는 함수일 경우 메소드)으로 구성된 '것'이라 할 수 있다. 다른 말로 하자면, 키와 값 형태로 데이터를 저장할 수 있으며, 관련 동작들을 변수에 저장할 수 있는 데이터 타입을 의미한다.

객체 선언 방법

자바스크립트에서 객체는 다음과 같이 변수 이름을 선언한 다음 {} 안에 key: values , 형태로 선언한다.

let cat = {
    name: "Jiyou",
    age: 3
};

객체 사용 방법

객체의 키 값에 접근하기

위의 예시를 바탕으로 cat 객체의 이름과 나이에 접근해 보자. 우리는 객체의 이름 뒤에 .를 찍고 접근하고자 하는 키를 입력해 이에 해당하는 값을 얻을 수 있다. 또한 객체의 키 값을 대괄호 안에 넣어서도 동일하게 접근할 수 있다.

cat.name; // "Jiyou"
cat.age; // 3

cat['name']; // "Jiyou"
cat['age']; // 3

객체의 키에 접근하기

그렇다면 키에는 어떻게 접근할 수 있을까? 이때는 Object.keys(cat);을 사용하면 된다. 결과적으로 cat 객체의 키들이 배열로 반환된다. 특정한 키에만 접근하고자 할 때는 Object.keys(cat)[0];과 같이 인덱스를 지정해주면 된다.

Object.keys(cat); // -> ["name", "age"];
Object.keys(cat)[0]; // -> "name"

객체 내 메소드 생성하기

cat 객체 안에 함수인 메소드를 포함할 수도 있다. 앞서 언급했듯, 메소드는 프로퍼티 값이 함수인 경우를 의미한다. 즉, 객체 내에서 특정 일을 수행하는 하나의 동작을 구현할 수 있다.

let cat = {
    name: "Jiyou",
    age: 3,
    meow() {
        alert("meow!")
    }
};

cat.meow(); // "meow!"

객체 안에 객체 생성하기

우리는 다음과 같이 객체 안에 또 다른 객체를 선언할 수도 있다.

let cat = {
    name: "Jiyou",
    age: 3,
    color: {
        eyes: "black",
        body: "white"
  }
};

cat.color.eyes // "black"