■ Front-End ■/JavaScript

[JavaScript] 학습정리 - 8.객체

한길(One Way) 2023. 3. 1.

자바스크립트는 객체 기반 함수형 스크립트 언어이며 웹에서 중요한 위치를 차지하고 있다.

 
이번에는 자바스크립트의 객체에 대해서 알아보자. 자바스크립트의 객체에는 내장 객체 (Built-in Object), BOM브라우저 객체 모델 객체, DOM(문서 객체 모델) 객체, 사용자 정의 객체, Number, String, Date, Math, RegExp... 와 같은 것들이 있다.

 


자바스크립트에서 기본 데이터 타입은 number, string, boolean, null, undefined가 있다. 이들을 제외한 다른 값,  배열, 함수 정규표현식 등은 모두 객체다.

 
그 모습과 작동방식은 여타 객체지향 언어와 다르며 자바스크립트 만의 잘 설계된 코드가 보편적으로 사용되기 시작되었다. 자바스크립트의 객체는 클래스가 필요 없고 이름과 값이 있는 속성들을 포함하는 컨테이너라고 할 수 있다.


자바스크립트에서는 새로운 객체를 생성할 때 객체 리터럴이라는 편리한 표기법을 제공한다. 속성값은 어떠한 표현식도 가능하며 심지어 객체리터럴도 가능하다. (중첩된 객체)

var man = {
    name : "Oneway", 
    hopeAge : 24,
    sayHello : function() { alert("Hello") }
}; 

man.name = "한길";
man["hopeAge"] = 20;
man.sayHello();

   
자바스크립트에서는 한 객체에서 새로운 객체를 생성할 수 있고 다른 객체에서 상속받을 수도 있다. 모든 객체에 들어 있는 constructor 프로퍼티는 항상 객체를 생성한 함수를 가리킨다.

function Human() {}
var me = new Human();
var you = new me.constructor();
alert( me.constructor == you.constructor );


객체의 타입을 검사하는 방법은 typeof 연산자를 사용하는 것과 constructor 프로퍼티를 참조하는 방법이 있다.

첫 번째, typeof 연산자를 사용

if ( typeof num == "string" )
    num = parseInt( num );
if ( typeof arr == "string" )
    arr = arr.split(",");


두 번째, constructor 프로퍼티를 참조 (간단)

if ( num.constructor == String )
    num = parseInt( num );
if ( arr.constructor == Array )
    arr = arr.join(',');


hasOwnProperty 메서드는 객체가 매개변수 name과 같은 이름의 속성이 있는지를 확인할 때 사용한다.

obj.hasOwnProperty(name)


객체리터럴 방식과 new 연산자를 사용하여 객체를 생성하고서 공통적인 프로퍼티와 메서드를 확인해 보자.

var obj1 = {}; 
var obj2 = new Object();


아래의 두 그림을 보시면 기본적으로 hasOwnProperty(), toString(), valueOf()... 와 같은 메서드가 보인다.


객체리터럴 방식으로 객체를 생성해도 new 연산자를 사용하여 객체를 생성해도 공통의 메서드가 존재한다.

 

728x90

댓글