16. 객체

  객체란?

- 위키백과 정의

컴퓨터 과학에서 객체 또는 오브젝트(object)는 클래스에서 정의한 것을 토대로 메모리(실제 저장공간)에 할당된 것으로 프로그램에서 사용되는 데이터 또는 식별자에 의해 참조되는 공간을 의미하며, 변수, 자료구조, 함수 또는 메소드가 될 수 있다.

 

- 나무위키 정의

프로그램을 단순히 데이터와 처리 방법으로 나누는 것이 아니라, 프로그램을 수많은 '객체(object)'라는 기본 단위로 나누고 이들의 상호작용으로 서술하는 방식이다. 객체란 하나의 역할을 수행하는 '메소드(함수)와 변수(데이터)'의 묶음으로 봐야한다.

 

객체의 유형은 다음과 같이 분류할 수 있다.

• 정보를 저장(또는 전달)하기 위한 객체(변수만 포함)
• 특정 기능들을 묶어두기 위한 객체(메소드만 포함)
• 기본 객체(변수, 메소드 모두 포함)

* 메소드(method) : 객체(object) 내부에 정의된 함수.

  DOM을 이용한 요소의 속성값 변경

DOM(Document Object Model)은 HTML의 요소와 1:1로 매칭되는 자바스크립트 객체이다.

 

DOM의 요소 선택자)

• getElementsByTagName
• getElementsByClassName
• getElementById
• querySelector
• querySelectorAll

DOM을 이용한 요소의 속성값 변경)

1. 객체변수.속성 = "속성값";

<img src = "xxx.png" width="600" height="400">

=> 이미지의 너비/높이를 변경하고 싶다면?

     const img = document.getElementById("image");

     img.width = 400;

     img.height = 300;

 

2. 객체변수.setAttribute("속성명", "바꿀 속성값");

<img src="yyy.jpg" style="border: 1px solid;">

=> 이미지 파일을 변경하고 싶다면?

     img.setAttribute("src", "yyy.jpg");

     img.setArrtibute("style", "border: 2px dotted;");

     = img.style.border = "2px dotted";

  객체 활용

객체가 선언되는 모습을 우리 일상에 대입해보면 다음과 같다.

 

자동차

1) 정보(변수)

• 모델명 : 소나타
• 색상 : 빨간색, 회색, 흰색
• 문 개수 : 3, 5
• 제조사 : 현대, 기아, BMW

2) 기능(함수)

• 가속(속도) : 주어진 속도만큼 차를 가속시킨다.
• 멈춤() : 즉시 속도를 0으로 만든다.
• 조향(방향) : 주어진 방향에 따라 차의 경로를 변경한다.

이러한 점을 고려하여 객체를 실제로 선언해보면 다음 코드와 같다.

let car = {
    model : "소나타",
    color : "흰색",
    speed : 0,
    accel : function(sp){
        this.speed = sp;
    }
};

console.log(car); // {model: '소나타', color: '흰색', speed: 0, accel: ƒ}
console.log(car.color); // 흰색

car.speed = 100;
console.log(car.speed); // 100

car.accel(200);
console.log(car.speed); // 200

// 객체 저장 변수 추가 방법
car.door = 4; // 문 개수에 대한 저장 변수를 추가
console.log(car); // {model: '소나타', color: '흰색', speed: 200, accel: ƒ, door: 4}

car.break = function(){ // 브레이크 함수 추가
    this.speed = 0;
}

car.break();
console.log(car); {model: '소나타', color: '흰색', speed: 0, accel: ƒ, door: 4, …}