자바스크립트(Javascript) 객체와 배열

객체는 여러 값들을 결합시킨 복합 타입.

객체생성

var emp = {}
var point = {x:0, y:0}
var circle = {x:point.x, y:point.y, radius:2}
var hh = {
    "name": "james"
}

var a = new Date();

프로퍼티

. 연산자로 접근할 수 있다.
[소유한 객체].[프로퍼티 이름]

생성

객체에 새로운 프로퍼티를 손쉽게 생성할 수 있다.

var book = {}
book.title = "spring 4.0 book"

열거

for/in loop로

프로퍼티 존재 확인

없는 프로퍼티는 undefined값.
하지만,

book.a = undefined;

의 경우엔 a라는 프로퍼티는 존재하는데 값이 undefined.

if (book.a) {
    ...
}

로 존재확인.

프로퍼티 삭제

delete 키워드로 삭제

delete book.a;

단순히 book.a에 undefined를 할당하는 것이 아닌 완전히 제거

연관 배열로서의 객체

배열에서 사용하는 [] 연산자로 프로퍼티 접근이 가능

연관배열?
동적으로 임의의 값과 임의의 문자열을 연관지어 저장할 수 있는 자료구조. map과 유사

book.name
book["name"]

위 두 식은 같다.

하나는 식별자, 하나는 문자열로 표현. --> 중요하다!

왜 중요한가?

Java처럼 타입제약이 엄격하면, 객체는 정해진 수의 프로퍼티를 갖고 프로퍼티 이름은 미리 정의되어야 한다.

Javascript는 타입제약이 느슨. 실행시간에 어떤 객체든 프로퍼티를 자유롭게 생성할 수 있다.

. 로 접근할 때 식별자 로 접근. 이는 데이터타입이 아니라서 런타임 중에 조작할 수 없다.

근데, []로 접근하면 프로퍼티 이름은 문자열로 표현. 즉 데이터타입이므로 런타임 중에 생성되고 조작할 수 있다.

e.g)

for(i = 0; i < 10; i++) {
    addr += book["from" + i];
}

처럼 조작 book.from0 ~ book.from9 까지 조작 가능

e.g) 데이터랩에서 어떤 객체가 실급검에 올라온 키워드로 프로퍼티 이름을 정한다면 미리 그 키워드를 알아낼 방법은 없다. 이럴 때 [] 연산을 통해 값을 알아낼 수 있다.

공통적으로 나타나는 객체 프로퍼티와 메서드

Javascript의 모든 객체는 Object 클래스를 상속. 여기에 따르는 공통적인 프로퍼티와 메서드가 존재한다.

constructor 프로퍼티

new로 객체를 초기화 했다면, constructor 프로퍼티는 생성한 객체를 가리킴.

var d = new Date();
d.constructor == Date;

객체의 타입을 판단하는데 사용

toString()

단순하게 [object, Object] 식으로 표시되기 때문에 직접 구현하여 사용한다.

valueOf()

객체를 숫자 같은 기본타입으로 변환할 때 호출된다.
_Object 객체의 기본 메서드는 변환작업을 하진 않지만 몇몇 내장 객체들은 자신만의 valueOf메서드를 정의하고 있다.

hasOwnProperty()

해당 객체가 프로퍼티를 소유하고 있는지 검사.
상속받은 프로퍼티면 false

propertyIsEnumerable()

hasOwnProperty 와 동일한 역할.
문자열 하나 전달받아 상속받지 않고 지역적으로 정의했는지, for/in 루프를 사용하여 열거할 수 있는지 검사.

isPrototypeOf()

메서드의 객체가 메서드의 주어진 객체의 프로토타입이면 true.

var o = {};
Object.isPrototypeOf(o);

배열

• 순서있는 값들의 집합
• 각 원소는 다른 임의의 타입을 가질 수 있음
• 다른 배열을 원소로 가질 수 있음

객체와 배열은 같은 데이터 타입
배열 = 객체 + 약간의 추가기능

var a = new Array();
var a = new Array(1,2,3,4,5,"asdf");
var a = new Array(4); // size 4인 배열

읽고 쓰기

[] 연산자로 인덱스 값을 이용해서 가져온다.
허용되는 범위의 인덱스가 아니면 문자열로 변환하여 객체 프로퍼티로 간주한다.

ar[-123.33] = 323;
// 새로운 프로퍼티를 생성하고 값에 대입하는게 아님.

새로운 원소 추가

ar[1000] = 1000;

바로 인덱스에 접근해서 추가할 수 있다. 1000 인덱스까지의 원소는 메모리에 할당하지 않는다.

var c = new Circle(...);
c[0] = "Here";

객체에 배열 원소를 추가하더라도 배열이 되진 않음.

배열 원소 삭제

delete 연산자로 삭제하면 undefined로 값 설정. 하지만 그대로 프로퍼티는 남아있음. 완전하게 지우려면 Array의 pop등의 내장함수를 이용해야 함.

배열의 길이, 배열의 크기 조절

length 로 배열의 길이 구한다.

배열의 length 프로퍼티는 읽고 쓸수 있다.
배열의 length를 작게 설정하면 축소된다. 값들은 버려진다.

크게 설정하면 undefined 된 요소들이 추가된다.

객체는 배열 원소를 할당 받을 수 있지만 length 프로퍼티는 없다

다차원배열

기본적으로 다차원배열을 지원하지 않음.
즉, 2차원 배열을 구현하려면 배열의 각 원소에 배열을 넣는 방식으로 구현해야 한다.

var table = new Array(10);

for (var i=0;i < table.length; i++) {
    table[i] = new Array(10);
}

for (var i=0; i<table.length; i++) {
    for(var j=0; j<table[i].length;j++){
        table[i][j] = i*j;
    }
}

var product = table[5][7];  // 35

배열 메서드

join()

모든 원소를 문자열로 변환. 기본값은 ,. 직접 지정할 수 있다.
split()과 반대

reverse()

배열 안의 원소 순서를 반대로 정렬하여 변환. 뒤집기

sort()

배열 안의 원소를 정렬하여 리턴. 기본은 오름차순.
어떻게 정렬할건지 정하려면 전달 인자를 통해 직접 비교함수를 명시.

비교함수는 a, b 두 전달인자를 받아 어떤 값이 먼저 나와야하는지 명시. 즉, 양수, 음수 를 리턴하도록 한다.

첫 번째 인자가 먼저 나와야 한다면 비교 함수는 0보다 작아야하고,
두 번째 인자가 먼저 나와야 한다면 비교 함수는 0보다 커야한다.
두 값이 동등하다면 (순서의 의미가 없다면) 0.

var ar = [5,2,3];
ar.sort(function(a, b) {
    return b-a;
});

홀수가 짝수보다 먼저 나오게 하려면

a.sort(function(a,b){
    if (a%2 == b%2) {
        return 0;
    } else if (a%2 == 1) {
        return -1;
    } else {
        return 1;
    }
});

concat()

원래 배열에 메서드의 모든 인자를 이어붙은 배열을 새롭게 생성하여 반환.

메서드의 인자가 배열이라면, 배열의 원소를 꺼내 이어 붙인다.

var a = [1,2,3];
a.concat(4,5);
a.concat([4, 5]);

중첩된 배열은 원소를 분리하지 않고 그대로 붙임

slice()

배열의 일부분을 반환
메서드로 전달받을 두 파라미터는 각각 a부터 b까지 요소를 의미

a.slice(2);
a.slice(2,4);
a.slice(-4, -2);

splice()

배열에 원소를 삽입, 제거할 때 사용하는 메서드.
두 전달인자를 받고(a : 시작점, b : 지정할 개수) 범위를 지정한 만큼 리턴, 원본은 리턴한 나머지만 남는다.

새롭게 배열을 만드는게 아닌 기존의 배열이 변경됨

a.splice(2, 4); // 2번 인덱스 부터 4개를 반환
a; // a.splice 만큼 제거된 배열만 남는다.

push() & pop()

스택처럼 배열의 끝부분에서 발생. 하나 또는 하나 이상의 원소를 넣을 수 있다.

unshift() & shift()

push, pop과 유사하지만 배열의 맨 앞에서 삽입하고 제거하는 점이 다르다.

unshift() 후 length가 리턴.

toString()

join() 과 동일

추가적인 배열 함수

자바스크립트 1.6 버전에 추가된 배열 함수들

• indexOf(), lastIndexOf()
• forEach()
• map()
• filter()

(https://developer.mozilla.org) 참고

배열과 유사한 객체

배열이 특별한건 length가 특별하게 작동.
때로는 정수 이름의 프로퍼티가 있는 임의 객체를 배열로 간주하는 것이 합리적을 때도 있다.

객체의 프로퍼티 이름을 정수형 인덱스로 사용, length 프로퍼티를 별도로 추가하여 마치 배열처럼 사용 가능

var o = {};
var i = 0;
for (i = 0; i < 5; i++) {
    o[i] = i*i;
}

o.length = i;