[JS] 객체 알아보기

객체

자바스크립트에서는 원시 타입을 제외한 모든 값이 객체입니다. JSON이라고도 하며 자바스크립트의 가장 중요한 데이터타입이라고 볼 수 있습니다. 객체를 생성하는 방법에는 총 2가지의 방법이 있습니다.

• 리터럴 방식
• 생성자 방식

 

리터럴 방식

리터럴 방식은 변수 내에 {...}을 사용하여 key와 value값을 선언하여 하나 이상의 프로퍼티를 만드는 방식입니다.

var artist = { singer: "서태지", music: "Live Wire" };

artist 변수 안에 key로 singer, music을 주었고 value는 "서태지", "Live Wire"를 주었습니다. 여기서 key는 문자열로 선언할 수도 있습니다. key와 value는 콜론(:), {} 안의 프로퍼티는 쉼표(,)로 구분합니다.
이렇게 되면 artist라는 하나의 객체가 만들어 진 것입니다.

그렇다면 선언한 객체의 프로퍼티에 대한 value는 어떻게 가져와야할까요?

바로 마침표(.) 연산자 또는 대괄호([]) 연산자를 통해 가져옵니다.

artist.singer; // 서태지
artist["music"]; // Live Wire
artist.pay; // undefined

차이점을 느끼셨나요?


가장 큰 차이점은 마침표(.) 연산자를 사용해서 가져올 때는 key값을 그대로 가져와야 하지만, 대괄호([]) 연산자를 사용할 경우 문자열로 가져온다는 것을 알 수 있습니다. 이 때 pay라는 key는 프로퍼티에 존재하지 않으니 undefined를 반환합니다.

프로퍼티 추가, 변경 및 삭제

위 예제에서 우린 객체를 생성하고 프로퍼티를 가져오는 방법을 살펴보았습니다.

위 예제의 경우 pay를 뒤늦게 전달받아서 현재 undefined인 값에 새로운 값을 추가로 넣어야 하는 상황엔 어떻게 해야할까요?

artist.pay = 20000000;

없는 value값을 원하는 값으로 초기화를 해주면 객체에 추가됩니다.


그런데 갑자기 출연료가 비싸졌다면 어떻게 변경해야할까요?

artist.pay = 30000000;

추가와 동일하게 기존 프로퍼티에 접근하여 새로운 값으로 초기화 해주면 됩니다.


그런데 코로나 바이러스가 갑자기 발생하여 노래를 못하고 가게 되어 음악을 삭제해야한다면 어떻게 해야할까요?

delete artist.music;
delete artist["music"];

delete 연산자를 사용하여 프로퍼티를 삭제할 수 있습니다.

in 연산자로 프로퍼티 확인

자 이제 아티스트의 음악이 삭제되었고 보수가 추가되었는지 확인을 해야합니다.
이럴 때 in 연산자를 이용하여 손쉽게 프로퍼티의 유무를 알아낼 수 있습니다.

console.log("pay" in artist); // true
console.log("music" in artist); // false
console.log("toString" in artist); // true -> Object 객체를 상속받고 있기 때문

in 연산자의 왼편에는 문자열로 key를 선언하고 우편에는 객체 명을 선언합니다.
아까 추가해준 pay는 true, 삭제한 music에는 false가 반환되는 것을 알 수 있습니다.


여기서 주의할 점은 in 연산자로 조사하는 대상(여기서는 artist 객체)이 그 객체가 가진 프로퍼티와 상속받은 모든 프로퍼티를 포함하고 있다는 점입니다.(상속에 대한 부분은 차후에 알아볼 예정입니다.) 현재는 그냥 개념만 알고 있어도 무방합니다.

객체 참조

생성된 객체는 메모리의 영역을 차지하는 한 덩어리가 됩니다.

쉽게 말하면 가방(메모리)에 어떤 물건(객체)가 들어가서, 그 물건(객체)은 누구에 손에 닿던지 그 물건(객체) 그대로 일 것입니다.

var stuff = artist;
stuff.pay = 10000000;
console.log(artist); // pay가 변경

위 코드를 보면 artist객체가 메모리에 올라가 있는 상태고, 그 메모리를 stuff라는 변수에 담아 프로퍼티를 수정했더니 artist객체의 프로퍼티가 수정된 모습입니다.

생성자 방식

Java와 C++ 등은 클래스(class)를 제공하고 있어 프로퍼티가 똑같은 객체를 얼마든지 쉽게 만들어 낼 수 있습니다. 하지만 자바스크립트는 클래스를 지원하지 않습니다. 물론, es5부터 클래스가 추가되었지만 클래스가 동작하는 원리는 기존 자바스크립트 방식과 동일합니다.

대신 생성자라고 하는 함수로 객체를 만들 수 있습니다.

function Soldier(group, weapon) {
  this.group = group;
  this.weapon = weapon; // this는 Soldier 객체를 가리킵니다.
}

위 함수는 군인을 만들어내는 생성자입니다. 보통은 생성자임을 알리는 함수는 첫 글자를 대문자로 나타내며 파스칼 표기법이라고 합니다. 여기서의 this는 생성자가 생성하는 객체를 가리킵니다. 즉, Soldier를 말하는 것입니다.

var army = new Soldier("army", "k2");
console.log(army); // Soldier { group: "army", weapon: "k2" }

new 연산자를 사용하여 객체로 만들어냅니다. 콘솔을 입력해보면 어떤 생성자 함수인지의 생성자 명과 객체 형식으로 프로퍼티와 값이 저장된 것을 확인할 수 있습니다.

메서드를 가진 생성자

생성자에서도 객체처럼 메서드를 가질 수 있습니다. 여기서도 메서드 내의 this는 생성될 객체를 가리킵니다.

function Soldier(group, weapon) {
  this.group = group;
  this.weapon = weapon;
  this.training = function() {
    return `${this.group}은 항상 훈련 중입니다.`; // this는 Soldier 객체를 가리킵니다.
  };
}