[기초 이론] Data Type: Object

시작하며

JavaScript의 객체는, 다른 프로그래밍 언어와 마찬가지로 현실 세계에서 객체(사물)라고 부르는 것과 비교할 수 있다. JavaScript 객체의 개념은 현실에서 인식 가능한 사물로 이해가 가능하다. JavaScript 에서 객체는 속성과 타입을 가진 독립적인 개체(Entity)이다. 현실의 컵과 비교해본다면, 컵은 '색', '디자인', '무게', '소재' 등의 속성을 가진 객체라고 할 수 있다. 마찬가지로 JavaScript 객체 역시 특징을 결정짓는 속성을 가질 수 있다.

 

Object

객체는 관련된 데이터와 함수(일반적으로 여러 데이터와 함수로 이루어지는데, 객체 안에 있을 때는 보통 프로퍼티와 메서드라고 부른다)의 집합이다. 여타 JavaScript 의 요소 들과 마찬가지로, 객체를 생성하는 것은 변수를 정의하고 초기화하는 것으로 시작한다. 

const player = {
    name: 'sumin',
    age: 99
};

예제를 보며 개념을 잡고 가자면 player 라는 변수를 선언해준 후 { 중괄호 }; 를 이용해 객체를 열어준 다음, 그 안에 객체의 속성(Property)을 콤마로 구분시켜 준다. 속성에는 키(Key)와 값(Value)가 존재한다. 위에서 키는 'name', 'age' 이고, 값은 String 속성인 'sumin', Number 속성인 99로 이루어져있다.

Variable VariableName = {
    'first property': first value,
    'second property': second value
};

참고로 키는 문자열만 가능하지만 따옴표는 필요없다. 하지만 위와 같이 띄어쓰기가 들어간 경우에는 감싸줘야 한다. 값은 무엇이 들어가든 상관없다. 'sumin' 처럼 String도 가능하고 99처럼 Number도 괜찮다. 심지어 객체 안에 또 객체가 들어가도 괜찮다! 자주 쓰이는 건 함수가 들어가는 것인데 우리는 이것을 메서드라고 부른다.

객체안의 속성에 접근하는 법

console.log(pleyer); // > {name: 'sumin', age: 99)
console.log(pleyer.name); // > sumin

변수에 마침표를 붙여 객체 안의 속성에 접근할 수 있다. 객체에 할당되지 않는 속성은 undefined 로 출력된다.

player['name'] = 'sumin';
player['age'] = 99;

Array 에서 다뤘던 속성 접근자로 불리는 대괄호 표기법을 사용해서도 접근할 수 있다. 객체를 때때로 연관배열(Associative Array) 라고 부르기도 하는데, 속성은 자신에 접근할 수 있는 문자열 값과 연관되어 있기 때문이다.

let propertyName = 'name';
player[propertyName] = 'sumin';

propertyName = 'age';
player[propertyName] = '99';

변수에 저장된 문자열 값으로도 접근이 가능하다.

추가 및 수정

player.isKorean = true;
console.log(pleyer); // > {name: 'sumin', age: 99, isKorean: true);

player.name = 'choensumin';
console.log(pleyer); // > {name: 'cheonsumin', age: 99, isKorean: true);

player.age = player.age + 1;
console.log(pleyer); // > {name: 'cheonsumin', age: 100, isKorean: true);

 

Object.create 메서드 사용해보기

함수로 들어가기 전에 MDN 에 나와있는 Object.create 메서드를 잠깐 사용해보도록 하겠다. Object.create() 메서드로 객체를 생성할 수도 있다. 이 메서드는 생성자 함수 정의 없이도 생성할 객체의 프로토타입을 지정할 수 있으므로 유용할 수도 있다.

const animal = {
    type: '무척추동물', // 속성 기본값
    displayType: function() { // 동물 종류를 출력할 메서드
        console.log(this.type);
    }
};

// invertebrate 라는 이름의 동물 타입 객체 생성
const invertebrate = Object.create(animal);
invertebrate.displayType(); // 출력: 무척추동물

// fish 라는 이름의 동물 타입 객체 생성
const fish Object.create(animal);
fish.type = '물고기'; // 재할당
fish.displayType(); // 출력: 물고기

 

결론

오브젝트는 이해하기 어렵지 않았지만 아직 프로퍼티나 메서드 같은 용어 정리가 어렵다. 코딩 챌린지로 오브젝트 메서드, 이벤트를 직접 작문해본 나로썬 그렇게 어렵지 않은 개념이었다.