일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- primitive type
- sinopia
- RESTful
- sanghaklee
- NPM
- {}
- API
- Linux
- dict
- AWS
- javascript
- GIT
- 인프런
- Travis CI
- Gitbook
- node.js
- 개인정보수정
- REST
- Lodash
- Coveralls
- nginx
- PowerMock
- Unit-test
- JaCoCo
- ubuntu
- python
- ATOM
- java
- Code-coverage
- ECMAScript2015
Archives
- Today
- Total
이상학의 개발블로그
[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 |
점( . ) 대신 각괄호( [] )를 표현해서 접근할 수도 있다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | // 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]("학학이"); // 특정 조건식에 따라 동적으로 프로퍼티를 정할 때 쓸 수 있다. | cs |
기본적으로 점( . ) 표기법을 사용하고, 특수문자나 동적 프로퍼티 정할때 각괄호( [] )를 이용한다.
참조 타입 확인 - Type Check
자바스크립트에서 변수의 자료형은 어떻게 확인할까?
typeof 연산자를 이용한다.
1 2 | console.log( typeof 1 ); // Number console.log( typeof '1' ); // String | cs |
Number, String, Boolean 리터럴에 typeof를 하면 예상된 결과가 나오는데 Array는 좀 다르다.
1 2 | console.log( typeof [] ); // Object console.log( typeof {} ); // Object | cs |
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()를 사용하는 것을 권장한다.
'JavaScript' 카테고리의 다른 글
[JavaScript] Null check, 빈 값 체크 v2019 (0) | 2019.07.03 |
---|---|
[ECMAScript6 / ES6] 아름다운 JavaScript를 위한 ES6 (0) | 2017.11.24 |
[JavaScript] 내장 타입 인스턴스화 (0) | 2016.07.26 |
[JavaScript] 원시 타입과 참조 타입 (2) | 2016.04.13 |
[JavaScript] Null check, 빈 값 체크 (0) | 2015.12.28 |
Comments