[JavaScript] 객체 (Object)

JavaScript

 

객체(Object)

실생활에서 우리가 인식할 수 있는 사물들을 객체라고 합니다. 데이터를 여러개 타입으로 가지고 있는 집합.

위에서 아래로 한 문장씩 읽어가며 실행되는 프로그램 : 절차지향 프로그래밍 기법(대표 언어 C)
장점 : 개발자가 눈으로 보기에 편하다. 속도가 빠르다. 게임개발에 사용되기도 한다.
단점 : 여러명이서 나눠서 개발하기가 어렵다.

자바스크립트 = 절차지향과 객체지향을 같이 따른다. 둘 다 할 수 있는 언어이다.
자바스크립트는 객체와 class개념 대신해서 생성자와 함수로 대체해서 사용했었다. 그러다가 지금은 class가 있는 척 하며 사용하고있다.

 

ex) 만약 자동차를 떠올린다면...? 명사와 동사로 설명이 가는하다면 객체가 된다.

명사로 그리는 방법
색상(노랑,빨강), 바퀴 갯수(4개), 번호판의 숫자 ...

동사로 그리는 방법
앞으로 간다, 뒤로 간다, 좌회전한다, 우회전한다.

클래스(설계도)            ----------->         메모리         ----------->           참조변수로 사용

<성적> <- 클래스
학번
이름
국어점수
영어점수  <- 변수(명사)
...

총점을 낸다
평균을 낸다
학점을 낸다  <- 함수(동사)

클래스(설계도)를 메모리에 올려놓은 상태를 object라고 한다. 그것을 불러올 때 참조변수를 사용하여 불러온다.

let dog = { };  <-- 중괄호를 사용하면 객체를 만드는 것이고, 어떤 값을 넣느냐에 따라서 표현하는 것이 달라진다.
                            dog가 참조변수 역할을 한다.

 

object와 instance는 둘 다 메모리에 올라가있는 형태인데, object는 추상적인 개념이고 instance는 실제적인 개념이다.

예를 들면 car(자동차)라는 클래스가 있으면 (모닝, 스파크, 티볼리)는 객체라 부르고 모닝은 자동차의 인스턴스다. 라고 표현할 수 있다. 

const Car = {"모닝", "스파크", "티볼리"} // 객체
const 모닝 = new Car(); // 인스턴스

 

 

const dog2 = {
    name: "루시",
    family: "포메리안",
    color: "white",
    age: 9,
    weight: 2.5
};

 

변수이름.키값
변수이름['키값'] <-- 자동화를 하기 위함

for(let i in dog2){
    console.log(i + " : " + dog2[i]);
}

name: 루시
family: 포메리안
color: white
age: 9
weight: 2.5

이렇게 출력된다.

라고 쓰면 // 키값 : 밸류값 으로 출력된다.

 

프로퍼티(property)

자바스크립트의 기본 타입은 객체입니다. 객체란 이름과 값으로 구성된 프로퍼티의 정렬되지 않은 집합입니다.
프로퍼티의 값으로 함수도 올 수 있는데, 이를 프로퍼티 메소드라고 부릅니다.

const dog2 = {
    name: "루시",		--> 필드(프로퍼티)
    family: "포메리안",
    color: "white",
    age: 9,
    weight: 2.5
    play: function(){			---> 메소드(프로퍼티 메소드)
    	console.log('잘~논다');
    }
};

console.log(dog2.play()); 함수 호출 // 잘~논다
console.log(dog2.play); 변수를 그냥 호출하기때문에 함수가 그대로 다 호출된다.
// (){ console.log('잘~논다'); }

첫 번째 문장은 함수를 불러내서 출력하기 위해서 사용한 것이고, 두 번째 문장은 함수를 변수의 값으로 호출하여 사용한 것이다. 두 번째 같은 경우 잘못된 것이 아니라, 저런 방식을 통하여 다른 객체에서 불러와 재사용이 가능하기 때문에 잘 기억하고 있어야한다.

 

객체의 생성

 

1. 리터럴 표기법을 이용한 객체의 생성

자바스크립트에서 객체를 생성하는 가장 쉬운 방법입니다.

const 객체이름 = {
    프로퍼티명1:프로퍼티값1,
    프로퍼티명2:프로퍼티값2,
    ....
}

 

2. 생성자를 이용한 객체의 생성

new 연산자를 사용하여 객체를 생성하고 초기화 할 수 있습니다. 이 때 사용되는 메소드를 생성자라고 하며, 이 메소드는 새롭게 생성되는 객체를 초기화하는 역할을 합니다.

function 생성자명(매개변수1, 매개변수2 ..){
    프로퍼티명1 = 값1;
    프로퍼티명2 = 값2;
    ...
    프로퍼티명n() {  };
}

const 객체명1 = new 생성자명(값1, 값2 ..);
const 객체명2 = new 생성자명(값1, 값2 ..);

 

* 상속

자바스크립트는 프로토타입 기반의 객체 지향 언어입니다. 프로토타입 기반이기 때문에 상속의 개념이 클래스기반의 객체지향 언어와는 다릅니다. 자바스크립트에서는 현재 존재하고 있는 객체의 프로토타입을 사용하여 해당 객체를 복사하고 재사용하는 것을 상속이라고 부릅니다.

 

* 프로토타입(prototype)

자바스크립트의 모든 객체는 프로토타입이라는 객체를 가지고 있습니다. 모든 객체는 그들의 프로토타입으로부터 프로퍼티와 메소드를 상속받습니다. 이처럼 자바스크립트의 모든 객체는 최소한 하나 이상의 다른 객체로부터 상속을 받으며, 상속되는 정보를 제공하는 객체를 프로토타입이라고 합니다.

const tr1 = new triangle(15, 15);    // 생성자(triangle)을 만들면 템플릿같은  triangle.prototype 생성한다.

* 자바스크립트에 내장된 모든 생성자나 사용자 정의 생성자는 Object.prototype과 자신의 생성자 객체를 프로토타입으로 가집니다.
만약에 dog이나 triangle 등등의 객체를 만들면 Object.prototype이 자동으로 기능을 각 객체마다 넣어준다.

tr1 <--------------- triangle.prototype
     <--------------- Object.prototype 모두를 tr1이 상속하고 있다.

 

자바의 클래스는 파일로 저장되어 있는 아이다.
자바스크립트는 함수이기 때문에 메모리에 먼저 떠있다. 

 

3. 클래스를 이용한 객체의 생성

const 클래스명 = class {
    constructor(매개변수1, 매개변수2, ..){
        프로퍼티명1 = 값1;
        프로퍼티명2 = 값2;
        ....
    }
    메소드명(매개변수1, 매개변수2..){
        문장...
    }
}

const 객체명 = new 클래스명(값1, 값2..);

내부적으로는 클래스를 썼다고 한들 생성자 객체를 만드는 것과 동일하다. 나중에 추가된 개념이다.

** constructor 는 자동으로 실행이 된다.