JeroCaller

쌓여만 가는 빈 캔

3 분 소요

들어가기에 앞서…

자바스크립트에도 객체라는 것이 존재하고, 이를 사용자가 직접 정의하거나 사용할 수 있다. 이러한 점은 파이썬과 동일하다. 그러나 객체에 대한 표현법이 파이썬과는 조금 다른 점이 있을 것이다.

파이썬에서는 “클래스의 인스턴스(객체)를 생성한다”라는 표현을 쓰지만, 자바스크립트에서는 ‘객체의 인스턴스를 생성한다.’와 같은 표현이 쓰인다. 파이썬을 먼저 접한 사람이라면 이 표현이 “로스엔젤레스에서 LA까지 가는 데에 걸리는 시간은?“ 이라는 표현처럼 어딘가 어색하다는 느낌을 받을 것이다. 객체나 인스턴스나 사실 똑같은 개념이기 때문이다.

두 언어 모두 객체 지향을 지원하지만, 차이점이 있다. 파이썬과 같이 클래스 기반 언어가 있는가 하면, 자바스크립트의 경우는 “프로토타입(prototype)” 기반 언어이다. 즉, 객체를 생성하는 방법이 조금 다르다.

파이썬에서는 class라는 키워드를 통해 인스턴스에 대한 청사진을 먼저 설계해놓고, 이를 토대로 인스턴스(객체)를 생성한다. 반면 프로토타입 기반 언어의 경우, 원본 객체(이를 prototype이라 한다)를 직접 복제해서 새로운 인스턴스(객체)를 생성하는 방식이다. 비유를 들자면, 클래스 기반 언어의 경우, 클래스라는 공장에서 자동차라는 인스턴스를 찍어내는 개념이지만, 프로토타입 기반 언어의 경우, 어떤 자동차로부터 직접 그 자동차를 복제하여 새로운 자동차 인스턴스를 생성하는 것과 같다.

즉, 객체가 생성되는 출처가 서로 다르다. 이러한 이유로, 자바스크립트에서는 ‘클래스로부터 인스턴스를 생성한다’란 표현을 쓰지 않고, 대신 ‘객체로부터 인스턴스를 생성한다’라는 표현이 가능한 것이다.

ES6부터는 자바스크립트에도 클래스 문법을 지원한다고 한다. 그러나, 그렇다고 해서 자바스크립트의 기반 자체가 클래스 기반으로 넘어간 게 아니라, 단지 클래스 문법이 추가되어 클래스 기반 언어에 익숙한 사람들이 사용할 수 있게 된 것일 뿐, 자바스크립트가 프로토타입 기반이라는 점은 변하지 않았다고 한다. (그래서 추가된 클래스 문법을 보고 ‘문법적 설탕(syntactic sugar)’이라는 표현을 쓰기도 한다. 자바스크립트가 “클래스는 거들 뿐!”이라고 말하고 있는 것 같다…)

자바스크립트에서는 위에서 언급한 이유로 인해, 클래스 문법을 직접 사용하지 않는 한 ‘객체’를 ‘클래스’와 같은 취급을 하는 표현이 있을 수 있다.

자바스크립트에서의 객체 종류

자바스크립트에는 여러 가지 종류의 객체들이 존재한다.

  • 문서 객체 모델 (Document Object Model, DOM) : 객체라는 개념을 통해 웹 문서를 다루는 방법. 웹 문서 자체도 객체이다. 또한, 웹 문서 내 사진, 텍스트 등의 모든 resource들도 객체이다.
  • 브라우저 관련 객체 : 웹 브라우저에서의 정보들도 객체이다.
  • 내장 객체 : 자바스크립트 자체에 이미 정의되어 있는 내장 객체. Array, Date 등 기능, 목적에 따른 다양한 내장 객체들을 지원한다.

인스턴스 생성법

파이썬에서는 my_var = MyClass(123); 와 같이 클래스 자체를 사용하는 게 아니라, 클래스로부터 인스턴스를 생성하여 이를 변수에 할당했다. 마찬가지로, 자바스크립트에서는 객체를 사용하기 위해 객체 자체를 가져오는 게 아니라, 그 객체의 인스턴스를 생성하여 사용한다. (자바스크립트에서의 “객체”는 “클래스”라고 생각하는 게 덜 헷갈릴 것이다)

객체의 인스턴스 생성법은 new 키워드와 그 뒤에 객체명() 을 입력하면 된다. 다음은 자바스크립트 내장 객체 중 하나인 배열 객체 Array 객체를 인스턴스화하여 이를 변수에 할당하고, 이 변수를 사용하는 예제이다.

let arr1 = [1, 2, 3, 4];
let arr2 = new Array(1, 2, 3, 10);  // Array 객체의 인스턴스화.

console.log(arr1);
console.log(typeof arr1);

console.log(arr2);
console.log(typeof arr2);

// 직접 대괄호([])로 배열을 할당했을 때의 그 배열과, 
// Array() 배열 객체는 서로 같은 객체인 것 같다. 
console.log(typeof arr1 === typeof arr2);
console.log(arr1 === arr2);

[ 1, 2, 3, 4 ]
object
[ 1, 2, 3, 10 ]
object
true
false

객체명인 Array 뒤에 괄호 ()를 붙이고, 만약 해당 객체에 입력값을 전달해야 한다면 괄호 안에 작성하면 된다. 위 예제에서, Array(1, 2, 3, 10); 은, [1, 2, 3, 10]의 배열 객체를 생성하겠다는 것과 동일하다.

Property and method

파이썬에서, 클래스 내부에는 인스턴스 변수와 메서드로 구성되어 있듯, 자바스크립트에서는 객체 내부에는 property와 method로 구성되어 있다. property는 파이썬의 인스턴스 변수처럼 어떠한 정보를 담은 속성이고, method는 파이썬의 메서드처럼 어떠한 기능을 할 수 있는 ‘함수’와도 같다.

자바스크립트에서, 어떤 인스턴스의 property, method를 호출하여 사용하고자 한다면, 인스턴스명.method() 와 같이 인스턴스명 바로 뒤에 마침표를 작성한 뒤, 원하는 method 또는 property명을 입력하면 된다. 다음은 Array 객체의 인스턴스를 생성하고, 해당 인스턴스에 존재하는 property와 method를 호출하여 사용하는 예제이다.

let arr = new Array();  // Array 객체의 인스턴스 생성.
console.log(arr);  
/*
Array 객체의 인스턴스의 property 중 하나인 length 호출. 
해당 property에는 배열의 현재 길이가 숫자로 저장되어 있다. 
*/
console.log(arr.length);  

/*
Array 객체의 인스턴스의 method 중 하나인 push() 호출.
해당 method는 배열의 맨 뒤에 추가 요소를 삽입하는 기능을 가진다. 
*/
arr.push(3);
console.log(arr);
console.log(arr.length);

[]
0
[ 3 ]
1

객체 내 정의되어 있는 property는 객체 내 변수와도 같아서, 호출 시 해당 property 이름만 작성하면 되지만, method의 경우, 함수와도 같아서 호출하려면 뒤에 괄호를 반드시 작성해야 한다.

References

[1] PoiemaWeb

[2] [JS 프로토타입] 자바스크립트의 프로토타입 훑어보기

[3] velog

[4] 프로토타입 기반 프로그래밍

[5] 고경희 - Do it! 한 권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석

This content is licensed under CC BY-NC 4.0

댓글남기기

참고