[JavaScript] 객체 프로퍼티 접근, 참조 타입과 배열 확인

Introduction

객체를 new 연산자, 리터럴로 생성하는 방법과 JS에서 제공하는 기본적인 내장타입에 대해서 서 익혔다.

이번엔 만들어진 객체와 배열 프로퍼티에 접근하는 방법과 접근한 프로퍼티의 참조 타입을 확인하는 방법에 대해서 알아본다.

프로퍼티 접근 - Access Property

프로퍼티란 객체내의 속성으로 key : value로 구성된다.

대부분의 객체지향 언어에서 프로퍼티에 접근할 때 점( . )을 사용하는데 JS도 같다.

추가적으로 점( . ) 대신 문자열을 이용해서 접근할 수도 있다. 이로써 프로퍼티 key에 특수문자나 공백이 들어간 경우도 프로퍼티에 접근할 수 있다.

이런식으로 객체 내 프로퍼티에 접근한다.

1 2 3 4 5

var hak = {     name : "학학이",     age : 26 } console.log(hak.name) // 학학이 를 리턴한다.

cs

점( . ) 대신 각괄호( [] )를 표현해서 접근할 수도 있다.

// push() 라는 메소드는 Array 객체의 기본 메소드로 배열 마지막에 요소를 추가한다.
var names = []; // 리터럴
names.push("학학이");
 
// 각괄호 [] 를 이용할 수 있다.
var names2 = [];
names["push"]("학학이"); // . 과 [] 는 같은 것이 증명된다.
 
// []를 이용하면 몇가지 재미난 작업을 할 수 있다.
// 1. 동적으로 프로퍼티 정하기
var names3 = [];
var method = "push";
names[method]("학학이");
// 이게 왜 동적일까? 라는 생각이 들면 이 경우를 생각해보자
 
var names4 = [];
var method;
if(true) 
    method = "push";
else
    method = "pop";
names[method]("학학이");
// 특정 조건식에 따라 동적으로 프로퍼티를 정할 때 쓸 수 있다.

기본적으로 점( . ) 표기법을 사용하고, 특수문자나 동적 프로퍼티 정할때 각괄호( [] )를 이용한다.

참조 타입 확인 - Type Check

자바스크립트에서 변수의 자료형은 어떻게 확인할까?

typeof 연산자를 이용한다.

console.log( typeof 1 ); // Number
console.log( typeof '1' ); // String

Number, String, Boolean 리터럴에 typeof를 하면 예상된 결과가 나오는데 Array는 좀 다르다.

console.log( typeof [] ); // Object
console.log( typeof {} ); // Object

JS에서 배열은 따로 타입이 존재 하지 않는다. Object의 종류이기 때문에 typeof 연산시 Object가 반환된다.

좀 더 자세히 타입을 다루기 위해선 instanceof 연산자를 활용한다.

A instanceof B 형식으로 사용하고, A가 B의 인스턴스라면 true를 반환한다.

1 2 3 4 5 6 7 8 9 10

var array = []; var object = {}; var func = function(){ return 1 };   console.log( array instanceof Array ); // true console.log( object instanceof Object ); // true console.log( func  instanceof Function ); // true   console.log( object instanceof Array ); // false console.log( array instanceof Object ); // true 배열은 객체에 속하기 때문

cs

자바의 instanceof와 비슷하다.

배열 확인 - Array Check 

instanceof 를 이용해서 배열을 확인할 수 있지만, 상황에 따라서 의도하지 않을 결과가 나타날 수 있다.

같은 웹페이지 안에 있는 프레임 끼리 서로 값을 주고 받다 보면 배열 객체가 엉키는 경우가 있다.

그래서 확실히 배열을 확인하려면 Array.isArray() 를 사용한다.

1 2

var array = []; console.log( Array.isArray(array) ); //true

cs

Array.isArray() 는 ES5에 추가되었고, isArray() 는 배열 객체의 출처에 상관없이 배열이면 true를 반환한다.

Conclusion

이번 포스팅엔서 객체 프로퍼티에 어떻게 접근하는 지 알아봤다. 

보통 점( . )을 이용해서 접근하고 특수한 경우에 따라 각괄호( [] )를 이용했다.

참조 타입은 간단하게 typeof를 이용하지만 객체는 instanceof를 사용하는 것이 더 정확하고 어떠 객체가 배열인지 확인할 때는 Array.isArray()를 사용하는 것을 권장한다.