자바스크립트 객체

자바스크립트 객체(Object) – JavaScript 7

by

자바스크립트 객체

자바스크립트 언어는 흔히 진정한 객체 지향 프로그래밍 언어가 아니다. 자바스크립트는 사실 진짜 클래스를 사용하지는 않는다 같은 이야기들이 있습니다. 그러니까 C++ 이나 자바와 같이 진성 OOP와 비교하면 내부 구조라던가 지원사항이 완벽하지 않다라고 하는데요.

OOP는 이론만 해도 대학교 한학기 강의가 필요한 방대한 내용입니다. 여기서 그런 이야기를 밑도 끝도 없이 꺼낼 수는 없지만 대체적으로 OOP의 특징은 [코드 재사용성] [캡슐화 – 은닉] [상속] [다형성] 등이 있죠.

자바스크립트는 그냥 함수형으로 사용해도 무관합니다. 허나 객체지향 프로그래밍의 기본은 충분히 지원합니다. 예제를 통해 알아보겠습니다.

객체 생성 예제

Object 의 인스턴스를 new 키워드로 생성합니다.

여기다가 멤버변수를 할당하면 되는데요. 역시 동적 타이핑이니까 myObj.information 처럼 바로 생성이 됩니다. 다음에 myFunction 함수를 생성하는데요. 여기에 this 라는 포인터(참조변수)가 나옵니다. this 는 인스턴스 없으면 그냥은 사용할 수 없는 변수입니다. 이것을 myObj.dispayInfo 이름으로 myFunction 에 연결시킵니다.

약간 이해가 어려울 수 있는데요. myFunction 함수를 다시 displayInfo 라는 멤버이름에 저장하는 것 입니다. 이제 displayInfo 를 호출하면 myFunction 이 호출되는데 이 안에서 쓰인 this 참조는 myObj의 인스턴스를 말합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<body>

    <div id="box1"></div>
    <div id="box2"></div>
    <input type="button" value="Basic Button"
    onclick="myObj.displayInfo()"/>

    <script src="scmain.js"></script>

</body>
</html>
// empty object creation
myObj = new Object();

myObj.information = 'my new object';

function myFunction () {
    showInfo(this.information);
};

myObj.displayInfo = myFunction;

function showInfo(myText){
    // innerText control
    var elem = document.getElementById('box1');
    elem.style.color = "green";
    elem.innerText = myText;
}

// call the new method
myObj.displayInfo();

// this doesn't work because of (this.information)
// myFunction();

myObj.information = 'Button Clicked!';
Object 객체 생성하기
Object 객체 생성하기

showInfo 는 브라우저에서 ID가 box1인 객체에 출력하는 코드입니다. 보통 div 를 사용합니다.

최초에 정의한 information 에 담긴 문자열을 출력합니다.

객체 생성하기(생성자 함수)

함수를 사용하여 자바스크립트 객체를 생성해 보겠습니다.

다른 객체 지향 프로그래밍 언어에 경험이 있다면 적응하는 시간이 조금 걸립니다. function 을 사용해서 객체를 만드는데 이렇게 보면 또 자바 같은 코드와 비슷하기도 합니다.

// object constructor function

function myObjectCon(){
    // properties
    this.name = 'default object';
    this.level = 1;

    this.display = () => {
        console.log("name : " + this.name);
        console.log("level : " + this.level);
    }
    // like a setter
    this.setInfo = (name, level) => {
        this.name = name;
        this.level = level;
    }
}

// create an instance

var person1 = new myObjectCon();
person1.display();

person1.setInfo('John', 2);
person1.display();

[실행값]
name : default object
level : 1
name : John
level : 2

프로토타입 키워드(prototype)

프로토타입 키워드를 사용하면 기존의 객체에 멤버와 메소드를 추가할 수 있습니다. 이로써 객체를 재사용하기 쉬워집니다. 사용법은 객체에 도트연산자. prototype 키워드를 쓰고 새부 내용을 정의하면 됩니다.

기존의 인스턴스에도 적용이 되는 부분도 편리한데요. 그때그때 필요한 메소드를 prototype으로 바로 정의해도 된다는 뜻입니다.

// using prototype

myObjectCon.prototype.newProp = 'new Prop';

console.log(person1.newProp);

myObjectCon.prototype.helloAgain = () => {
    console.log("Hello! Prototype!");
}

person1.helloAgain();

[실행]
new Prop
Hello! Prototype!

자바스크립트를 깊이있게 이해하기 위해서 prototype에 대하여 이해할 필요가 있습니다.

여기서는 상속의 예를 들어보겠습니다. 상속(inheritance)은 기존의 객체에서 속성과 메소드를 그대로 가져오는 것 입니다. 자바 라면 class 자식클래스 extends 부모클래스 이런 형식이겠지만 자바스크립트는 조금 다릅니다.

바로 prototype 를 사용하는데요. 이것에 대해서 한번에 다 이해할 필요는 없습니다. 객체를 다루면서 계속 나오는 주제가 될 것 입니다. 아무튼 지금은 이 prototype 을 쓰는 장점이 있기 때문에 쓴다 정도로 이해하면 충분합니다.

function A(id, name){
    this.id = id;
    this.name = name;

    this.showInfo = () => {
        console.log("id : " + this.id + " name : " + this.name);
    }
}

function B(text){
    this.text = text;
    this.showB = () => {
        console.log("B text : " + this.text);
    }
}

B.prototype = new A(101, 'A1 func');

var myChild = new B('this is B text');

myChild.showInfo();
myChild.showB();

console.log(myChild.id);
console.log(myChild.name);

[실행결과]

id : 101 name : A1 func
text : this is B text
101
A1 func

위 예제에서는 A를 B에서 상속하고 있습니다. 그런데 상속하는 과정이 B.prototype 처럼 두 단계로 나눠집니다. 자바나 C++의 상속 문법과 뭔가 많이 달라 보입니다.

물론 자바스크립트를 처음 언어로 선택한 사람들에겐 또 다른 의미에서 외계어 처럼 보일 지도 모릅니다. 중요한 것은 문법은 달라질 수 있지만 그 안에 깔려있는 구조와 원리를 알면 새로운 언어에 적응하는데 어렵지 않습니다.

어차피 자바스크립트도 하다보면 다른 언어와 연결되게 되있습니다. 구조를 한번에 알아내긴 어렵겠지만 그래도 언어를 배우면서 그 안에 들어있는 의미를 파악하려고 노력해야 합니다.

A를 B가 상속하면 B는 A의 모든 속성과 메소드를 사용할 수 있다는 것 정도는 기억해 둡니다. 다른 언어에서도 문법만 다를 뿐 비슷한 OOP개념을 갖습니다.

리터럴 표기로 객체 생성

리터럴 표기로 객체를 생성하는 방법도 있습니다.

아래처럼 중괄호를 사용하여 속성과 값을 : 로 구분해서 작성합니다. 물론 함수도 작성할 수 있습니다. : 콜론을 사용한 객체 정의도 많이 사용하고 또 프레임워크에서도 많이 사용하기 때문에 알아둡니다.

var myScore = {
    math: 70,
    English: 85,
    Hangul: 90,
    showScore: function(){
        console.log(this.math + ", " + this.English + ", " + this.Hangul);
        console.log("sum : " + (this.math+this.English+this.Hangul));
    }
}

myScore.showScore();

[객체]

70, 85, 90
sum : 245

요약

자바스크립트 객체(Object)에 대하여 소개를 해봤습니다.

프로토타입에 대한 개념은 자바스크립트에서 중요합니다. MDN에 의하면…

JavaScript는 흔히 프로토타입 기반 언어(prototype-based language)라 불립니다.— 모든 객체들이 메소드와 속성들을 상속 받기 위한 템플릿으로써 프로토타입 객체(prototype object)를 가진다는 의미입니다. 프로토타입 객체도 또 다시 상위 프로토타입 객체로부터 메소드와 속성을 상속 받을 수도 있고 그 상위 프로토타입 객체도 마찬가지입니다. 이를 프로토타입 체인(prototype chain)이라 부르며 다른 객체에 정의된 메소드와 속성을 한 객체에서 사용할 수 있도록 하는 근간입니다.

MDN 인용

프로토타입이 일종의 베이스 클래스와 서브 클래스를 이어주는 역할을 합니다. 객체지향 용어로 말하면 상속이겠고 여기서는 프로토타입 체인이라 말하고 있습니다.

아직은 다소 혼란스럽겠지만 끈기 있게 공부하면 그 의미를 알 수 있을 것 입니다.

아래 MDN 문서와 동영상(영문)을 참고하면 좋습니다.

이전 학습
다음 학습

참고문서

Object – JavaScript | MDN (mozilla.org)

Object prototypes – Web 개발 학습하기 | MDN (mozilla.org)

9.19: Prototypes in Javascript – p5.js Tutorial – YouTube

Leave a Comment