자바스크립트 객체

객체

객체(obeject)는 프로그램에서 인식할 수 있는 모든 대상을 가리킵니다.

현실에 존재하는 대상이라면 어떠한 것도 컴퓨터에서 인식할 수 있는 객체로 바꿔서 표현할 수 있습니다.

객체는 변수와 함수가 모여 만든 하나의 꾸러미로써 함수보다 더 복잡하고 정교한 데이터들을 하나의 객체 안에 담아서 활용할 수 있게 됩니다. 
객체에는 프로퍼티(property)와 메서드(method)가 있습니다. 프로퍼티는 객체의 특징이나 속성을 나타내고, 메서드는 객체에서 할 수 있는 동작을 표현합니다.
객체 안에 변수는 property, 함수는 method라고 부릅니다. 새로운 객체를 만드는 문법은 다음과 같습니다. 

let 객체명 = new Object()
let 객체명 = {};

새로운 객체를 생성하고 객체의 값을 추가하고 그 값을 출력하겠습니다. 

let obj1 = {}; // 빈 객체 생성
obj1.kor = 100;
obj1.eng = 99;
obj.math = 100;
document.write(obj.math);

객체명 obj1에 새로운 객체를 생성하고, obj1 객체에 kor 프로퍼티의 값으로 100을 지정했습니다. 같은 방법으로 eng, math라는 프로퍼티의 값을 지정하고 obj1 객체에서 math 프로퍼티의 값을 출력해 보았습니다. 

 

객체를 생성하는 다른 방법은 빈 객체를 만들고 추가하는 것이 아니라 처음부터 값을 생성하는 방법이 있습니다.

let obj2 = 
{
	kor : 100,
    	eng : 99,
    	math : 100
}
document.write(obj2.math);

프로퍼티 값은 콜론(:)을 이용하여 입력하고 각 프로퍼티는 콤마(,)로 구분합니다. 현재 생성한 객체를 보면 프로퍼티만 나열을 했습니다.

이제 함수도 추가해 보겠습니다. 함수는 각 과목의 평균을 계산하는 기능을 작성하겠습니다.

let obj3 = 
{
	kor:100,
    	eng:90,
    	math:100,
    	average: function() {
    	let avg = (this.kor + this.eng + this.math) / 3;
        return avg;
       }
 }
      document.write(obj.average());

작성한 코드를 보면 average라는 프로퍼티의 값으로 함수를 작성하고 함수 안에서 변수 명 avg에 obj3 객체의 각 프로퍼티의 값을 더하여 3으로 나눈 후 저장합니다. 변수 명 avg에 저장된 값 return으로 출력하고 있습니다. 이때 this.kor의 의미는 함수 안에서 obj3 객체 자체를 this로 선택하고 선택한 객체에서 kor이라는 프로퍼티의 값을 추출한 것입니다. 그리고 객체 내 함수를 실행할 때 단순히 프로퍼티를 확인할 때와 다르게 total이라는 프로퍼티는 함수가 저장되어 있기 때문에 obj3.average()이라고 함수를 실행하듯이 뒤에 괄호를 입력한 것을 볼 수 있습니다.

 

객체는 참조 형태로 사용해야 합니다. 즉, 객체 자체가 아니라 인스턴스(instance)의 형태로 만들어서 사용해야 합니다. 자바스크립트 안에 정의된 객체는 그대로 두고 객체와 똑같은 속성과 기능을 만들 수 있습니다. 자바스크립트의 객체가 틀이라면 그 틀을 기본으로 해서 계속 같은 모양으로 찍어 내는 것이 인스턴스입니다. 그리고 그 인스턴스에 식별자를 붙여 사용합니다. 객체의 인스턴스를 만들 때는 new라는 예약어를 사용합니다. new 뒤에 만들려고 하는 객체 이름을 써주면 됩니다.

var now = new Date(); // Date 인스턴스 만들고 변수에 저장
document.write("현재 시각은 " + now);
document.write("현재 시각은 " + now.toLocalString());

현재 날짜와 시간 정보를 로컬형식으로 바꿔주는 toLocalString() 메서드를 이용하면 평소 보던 시간 형식으로 나옵니다.

인스턴스는 객체의 프로퍼티와 메서드를 그대로 물려받아서 똑같이 사용합니다. 프로퍼티와 메서드를 표시하려면 인스턴스명 뒤에 마침표(.)를 붙이고 객체의 프로퍼티나 메서드 이름을 작성합니다. 이때 메서드는 함수와 같은 역할을 하므로 함수 이름 옆에 괄호를 넣습니다.
자바스크립트에서 객체는 데이터를 저장하고 처리하는 기본 단위입니다. 

자바스크립트에서 사용하는 객체는 3가지

첫 번째 문서 객체 모델(DOM)이 있습니다. 웹 문서 자체도 객체이고 그 안에 삽입되어 있는 이미지와 링크, 텍스트 필드 등도 모두 객체입니다. 웹 문서에 삽입하는 요소는 document, image, link 객체가 있습니다.
두 번째 브라우저 관련 객체입니다. 웹 브라우저에서 사용하는 정보도 객체로 나타낼 수 있습니다. 사용하는  브라우저 정보를 담고 있는 navigator 객체를 비롯해 history, location, screen 객체가 있습니다.
세 번째 내장 객체입니다. 웹 프로그래밍을 할 때 자주 사용하는 요소는 자바스크립트 안에 미리 객체로 정의되어 있는데, 이것이 내장 객체입니다.