JS - 객체

객체

객체의 정의

1. 객체란

   클래스라는 설계도를 바탕으로 메모리에 생성된 실제 데이터 구조 (실제 조작 가능한 데이터 구조)

• 웹에서의 객체: 웹문서에서 다룰 수 있는 모든 대상들을 지칭하는 말로, 예를 들면 배열 기능의 Array, 날짜 기능의 Date 등을 객체라고 한다.

2. 객체 생성

   프로그램이 실행될 때 메모리에 어떤 데이터 구조를 만들어내는 것

이를 통해 객체는 특정 속성(데이터)과 동작(메소드)을 가지며 프로그램 내에서 사용이 가능해진다.

// 1. 클래스 정의
public class Car
{
    // 속성 (필드)
    public string color;
    public int speed;

    // 동작 (메서드)
    public void Drive()
    {
        Console.WriteLine("The car is driving at " + speed + " km/h");
    }
}

// 2. 객체 생성
Car myCar = new Car(); // 객체 생성
myCar.color = "Red";   // 속성 설정
myCar.speed = 100;     // 속성 설정
myCar.Drive();         // 메서드 호출

위 코드에서 color와 speed라는 속성 그리고 Drive()라는 메소드를 가진 Car라는 클래스를 정의하고 new연산자를 통해 Car클래스를 바탕으로 myCar라는 객체를 생성한다.
이 객체는 메모리에 할당되어 독립된 속성(color와 speed)과 메소드(Drive())르 가지게 된다.
이렇게 생성된 myCar라는 객체를 통해서 우리는 속성과 메소드에 접근하여 조작이 가능하고, 객체가 없다면 클래스는 설계도(=껍데기)에 불과하기 때문에 아무것도 조작할 수 없게 된다.

위 코드를 좀 더 디테일하게 풀이해보면, 클래스만 정의된 시점에서는 Car라는 설계도가 생성된 것으로 실제 공장에서 조립된 것은 아무것도 없다(= 메모리에 데이터가 생성되지 않음).

myCar = new Car()라는 코드를 통해 메모리에 Car 타입의 객체를 생성하는데, 이 시점에 메모리에 실제 데이터 구조가 생성되었고, myCar라는 변수는 그 객체를 가리키게 된다.
이제 myCar를 통해 color, speed 속성에 접근하고, Drive() 메소드를 호출할 수 있다.

따라서, 객체 없이 클래스만 있는 경우 (만약 new Car()를 사용하지 않고, Car 클래스만 정의해 놓는다면) Car는 설계도(껍데기)로만 존재하게 되고, 객체를 생성하지 않은 상태에서는 color, speed 같은 속성을 메모리에 할당된 실체가 없기 때문에 접근할 수 없고, 메서드도 호출할 수 없다.

즉, 객체를 요약하자면

객체: 클래스라는 설계도를 바탕으로 메모리에 생성된 실제 데이터 구조.
객체 생성: new 키워드를 사용하여 클래스를 기반으로 새로운 객체를 만듦.

는 것이다.

객체의 속성(property)과 메소드(method)

모든 객체는 관련된 속성과 메소드들이 존재한다. 여기서 속성을 C언어의 멤버변수라고한다면, 메소드는 멤버 함수라고 할 수 있다.

• 속성(property): 객체 내부에 있는 값
• 메소드(method): 속성 중 자료형이 함수(function)으로 이루어진 속성

객체 생성 방법

• 하나의 클래스로 여러 개의 객체를 생성할 수 있다.
• 객체 생성 문법

  var 객체 = new 클래스 이름()

1. Date 객체
: 날짜와 시간을 사용하게 해주는 내장 객체로, 그리니치 표준시(GMT)로 1970년 1월 1일 00:00:00을 기준으로 한다.

const date = new Date();

const year = date.getFullYear();
const month = date.getMonth() + 1;
const day = date.getDate();
const hour = date.getHours();
const min = date.getMinutes();
const sec = date.getSeconds();

console.log(`지금은 ${year}년 ${month}월 ${day}일 ${hour}시 ${min}분 ${sec}초 입니다.`);

실행 결과:

이 때 Date 객체를 사용하기 위해서는 인스턴스를 생성해야한다. 그런데 여기서 말하는 인스턴스(instance)란 무엇일까?

2. String 객체
문자열을 객체화 시켜 사용하는 것으로, new 연산자를 사용하여 인스턴스를 생성하기도 하지만, new 연산자 없이 바로 ""안에 문자열을 대입해도 결과값은 동일하다

var str1 = new String("javascript");
var str2 = "javascript";

String 객체 위치 검색 관련 메소드

• CharAt() : 지정한 위치의 문자가 무엇인지 알려주는 메소드
• charCodeAt(): 지정한 위치의 문자를 유니코드로 변환하는 메소드
• fromcharCode(): 유니코드를 문자로 변환해주는 메소드
• indexOf(): 지정한 문자열의 첫 번째 인덱스 위치를 알려주는 메소드
• lastIndexOf(): 지정한 문자열의 마지막 인덱스 위치를 알려주는 메소드

3. 윈도우 객체
: 객체 계층 구조의 최상위에 존재하며, 윈도우나 프레임을 의미한다.
Window 개겣를 기점으로 document 객체, navigator 객체, Object 객체와 같은 하위 객체들이 갈라져 나왔다.

이전에 종종 사용하던 alert()함수는 사실 window.alert()와 같이 사용해야하고, document.write()의 경우에는 window.document.write()와 같이 사용해야하지만, 위도우 객체의 경우에는 window를 생략하고 사용이 가능하다.

대표적인 윈도우 객체 메소드 중에서는 잘 알고 있는 alert() 이외에도 setTimeOut(), prompt(), open() 등 다양한 메소드가 있다.

• Open 메소드
  : 윈도우를 연다는 의미는 윈도우 팝업 창을 띈우다는 의미
  : window.open("URL", "윈도우 이름", "윈도우의 특성")
  ㄴ 윈도우 특성: 윈도우 넓이나 높이, 툴바의 여부 등을 설정할 수 있음

4. 브라우저 객체

• location 객체: 대표적으로 href, search 등이 있다.

location.host;
location.href;
location.pathname;
loaction.protocol;
location.search;

와 같은 방법으로 사용이 가능하다.

• history 객체: 방문했던 URL 주소의 재수를 저장하는 length 속성이 존재하며, 브라우저 이전 페이지 버튼 클릭 시, 이전 페이지로 이동하는 현상 등이 history 객체를 통해 이루어진다.

인스턴스(instance)란

동일한 프로그램을 여러 개를 실행하여 화면에 띄우더라도(=같은 객체) 각 프로그램이 가지고 있는 고유한 인스턴스 핸들을 통해서 프로그램을 구별하여 입출력을 구분한다.