(Javascript) 자바스크립트 기초문법 (3) 객체

안녕하세요 영감을 주는 개발자 방민방민입니다.

오늘은 JavaScript에서 객체에 대하여 알아보고자 합니다.

이 내용은 JavaScript 에 있어서 굉장히 이론적인 객체 내용만을 다루고자 합니다. 

자바에서도, Ruby, Rails 에서도 객체 객체 ,,, 하는데 도대체 객체가 무엇인지 항상 어려웠습니다. 

이번 포스팅을 통해서 저도 객체에 대해서 조금 더 완벽하게 이해해 보고자 합니다. 

이 글을 읽게되는 여러분들도 이 포스팅을 통해 객체에 대한 개념을 확실하게 잡을수 있도록 노력해보겠습니다!

본 포스팅은 "프론트엔드 개발자를 위한 자바스크립트 프로그래밍" 교재를 바탕으로 만들어 졌습니다.

그러면 시작해 볼까요??

1. JavaScript에서의 객체

객체지향 ( Object - Oriented: OO) 언어는 일반적으로 클래스를 통해서 같은 형태의 객체를 여러개 생성 할 수 있습니다. 이게 무슨소리야!? 하실 수 있겠습니다만 이렇게 생각하면 쉽습니다. 

붕어빵을 만들 때, 붕어빵틀이 클래스이고, 그 틀을 통해 만들어낸 각각의 붕어빵들은 하나하나의 객체가 됩니다. 

그림으로 표현하면 아래와 같습니다.

하지만 JavaScipt (ECMAScript)에서의 객체는 다른 클래스 기반 언어와 조금 다릅니다.

JavaScript 에서의 객체는 특별한 순서없는 값의 배열이 됩니다. 이때 그 값들은 함수가 될수도, 변수가 될수도 있습니다.

2. JavaScript 객체에 대한 이해

JavaScript 에서 객체를 이해하기 위해서 간단한 객체 선언 예제를 통해 이를 알아보도록 하겠습니다.

자바 스크립트에서 객체를 만드는 가장 간단한 방법은 Object 인스턴스를 생성하고 여기에 변수나 함수를 추가하는 방법입니다.

아래와 같이 새로운 new Object person을 선언하고, 그에 대한 각각의 변수 또는 함수를 선언해 줌으로써 전체 하나의 person 객체를 완성시킵니다.

var person = new Object();
person.name = "Bangmin";
person.age = 29;
person.job = "Student";

person.sayName = function(){
	alert(this.name);
};

person.sayName();

이와같은 객체 선언 방식은 아래와 같이 객체 리터럴 패턴으로 더 많이 사용됩니다.

var person ={
	name: "Minseok",
  age:29,
  job:"student",
  sayName: function(){
  alert(this.name);
  }
};

person.sayName();

이렇게 객체 리터럴 패턴으로 작성된 객체는 마치 배열에 각각의 변수와 함수를 각각 해쉬(이름)와 대응하여 저장하는 형태와 비슷합니다.

age 라는 해쉬와 29가 대응

job 이라는 해쉬와 student가 대응

sayName 이라는 해쉬와 function 기능이 대응하는 형태입니다.

2. JavaScript 객체 프로퍼티

JavaScript 에서 프로퍼티는 아래의 4가지 속성을 가지고 있습니다.

Configurable - delete를 통해 삭제하거나, 속성을 바꾸거나, 접근자 프로퍼티로 변환할 수 있음. 기본적으로 true입니다.(false 로 한번 변환시 재 변환 불가)

Enumberable - for-in 루프에서 해당 프로퍼티를 반환함. 기본적으로 true

Writable - 프로퍼티 값을 바꿀 수 있음. 기본적으로 true

Value - 실제 데이터값 기본적으로는 undefined

아래와 같이 선언된 객체에서 name 이라는 프로퍼티에 Value 속성에는 "Minseok" 가 저장된 상태입니다.

var person ={
	name: "Minseok",
}

프로퍼티의 속성을 바꾸기 위해서는 Object.defineProperty(객체이름,프로퍼티이름,{서술자}) 의 메소드를 사용합니다.

아래와 같이 writable 을 false 로 바꾼 뒤에는 person.name 의 value 를 바꿀 수 없습니다.

var person ={
	name: "Minseok",
}
alert(person.name);
person.name = "changed"; //name 이 변화함
alert(person.name);

Object.defineProperty(person,"name",{
writable: false,
value: "Bangmin"
})
alert(person.name);
person.name = "changed";//name 이 변화하지 않음
alert(person.name);

3. JavaScript 객체 접근자 프로퍼티

JavaScript 에서 접근자 프로퍼티는 4가지입니다.

Configurable - delete를 통해 삭제하거나, 속성을 바꾸거나, 접근자 프로퍼티로 변환할 수 있음. 기본적으로 true입니다.(false 로 한번 변환시 재 변환 불가)

Enumberable - for-in 루프에서 해당 프로퍼티를 반환함. 기본적으로 true

get - 프로퍼티를 읽을 때 호출할 함수이며 기본적으로 undefined

set - 프로퍼티를 바꿀 때 호출할 함수이며 기본적으로 undefined

아래의 경우 book 이라는 객체에는 _year 객체가 존재합니다. 이때 _(밑줄) 은 주로 객체를 메소드를 통해서만 접근하고 싶을 때 사용합니다. 

Object.defineProperty를 통해서 year 라는 프로퍼티를 생성하고 이에 접근할때는 get 메소드를 통해 this._year 을 반환해주고, _year을 바꿀때 또한 year 프로퍼티를 통해 set 메소드를 이용하여 바꾸어 줍니다.

var book ={
  _year: 2004,
  edition:1
};

Object.defineProperty (book, "year",{
	get: function(){
  return this._year;
},
	set: function(newValue){
  	if(newValue> 2004)
    {
    	this._year = newValue;
      this.edition += newValue-2004;
    }
  }
});

book.year=2005;
alert(book.year);

4. JavaScript 객체 다중 프로퍼티

객체의 다중 프로퍼티를 접근할때에는 Object.defineProperties(객체이름, {프로퍼티 이름 : { 변경 내용}, 프로퍼티 이름: {변경내용} ...)함수를 사용합니다. 

아래 예제를 통해 그 내용을 확인해 보겠습니다.

var book = {}

Object.defineProperties(book, {
_year: {//_year 라는 데이터 프로퍼티의 값을 정의
	value:2004
},

edition: {//edition 라는 데이터 프로퍼티의 값을 정의
	value:1
},

year: {// year 라는 접근 프로퍼티의 get과 set 을 정의
	get: function(){
  	return this._year
  },
  set: function(newValue){
 		if(newValue>2004){
    	this._year = newYear;
      this.edition +=newValue - 2004;
    }
  }
}
});

alert(book.year);

이 코드는 book 이라는 객체의 _year 과 edition 두가지의 데이터 프로퍼티와 접근 프로퍼티 year 을 동시에 생성하고 정의합니다.

5. JavaScript 객체 프로퍼티 속성 읽기

객체의 프로퍼티 속성을 읽고 싶을때는 Object.getOwnPropertyDescriptor() 메소드를 사용합니다.

var book = {}

Object.defineProperties(book, {
_year: {//_year 라는 데이터 프로퍼티의 값을 정의
	value:2004
},

edition: {//edition 라는 데이터 프로퍼티의 값을 정의
	value:1
},

year: {// year 라는 접근 프로퍼티의 get과 set 을 정의
	get: function(){
  	return this._year
  },
  set: function(newValue){
 		if(newValue>2004){
    	this._year = newYear;
      this.edition +=newValue - 2004;
    }
  }
}
});

var descriptor = Object.getOwnPropertyDescriptor(book, "_year");
alert(descriptor.value); //2004
alert(descriptor.configurable);//false
alert(typeof descriptor.get);//undefined

var descriptor = Object.getOwnPropertyDescriptor(book, "year");
alert(descriptor.value);//undefined
alert(descriptor.configurable);//false
alert(typeof descriptor.get);//function

위의 예제에서 descriptor 라는 변수에 book 객체의 _year 프로퍼티의 값들을 받아옵니다. 

그리고 descriptor 변수를 통해 각각 value 와 configurable, get 에 접근합니다.

어렵습니다....

여기까지 자바스크립트에서의 객체에 대하여 알아보았습니다.

많이 어려운 부분인것 같습니다 만 조금씩 천천히 따라가 보면 어렵지 않을것이라고 생각됩니다.

이러한 자바스크립트에서의 객체에 대한 부분은 반드시 코드카데미를 통해 실제 실습을 하며 본인이 직접 코딩을 하며 그 내용에 대하여 깊게 이해해볼 필요가 있을 것입니다.

실습에 대한 내용은 기초실습을 통해 다루어 보도록 하겠습니다.

그러면 여기까지 영감을 주는 개발자 방민방민이었습니다.