5장-1,2) 참조 타입 - Object 타입, Array 타입

참조 값(객체)이란 특정 '참조 타입'의 인스턴스이다.

ECMAScript에서 참조 타입은 데이터와 기능을 그룹으로 묶는 구조이다.

참조 타입을 '클래스'라 부르는 것은 잘못된 표현이다.

참조 타입은 객체가 가져야 할 프로퍼티와 메서드를 정의한다는 점 때문에 '객체 정의'라 불리기도 한다.

(ECMAScript는 객체 지향 언어이지만 클래스나 인터페이스 같은 구조를 갖고 있지 않다.

객체(참조 값)는 특정 참조 타입의 '인스턴스'이다.

객체를 생성할 때는 new 연산자 뒤에 '생성자'(객체를 생성하는 함수)를 쓴다.

ex)

var person = new Object();

-> 참조 타입 Object의 인스턴스를 생성해서 변수 person에 할당한다.

5.1 Object 타입

객체 생성법

1. new 연산자와 Object 생성자

var person = new Object();    // var person = {}; 와 동일

2. 객체 리터럴 표기법

프로퍼티를 여러 개 쓸 때 가독성을 확보하는 용도로만 쓰는 것을 권장.

함수에 옵션 매개변수를 여러 개 넘길 때 많이 이용된다. (옵션 매개변수: 필수 매개변수를 제외한 매개변수)

var person = {

name: "sovovy",

"age": 15,        // 문자열 사용 가능

5: true            // 숫자는 자동으로 문자열로 바뀜.

};

프로퍼티 접근법

점과 대괄호를 이용해 접근할 수 있다.

대괄호 표기법의 장점

1. 변수를 이용해 프로퍼티에 접근할 수 있다. (이 경우에만 이용하는 것을 권함.)

2. 문법에러를 일으키는 문자를 이용할 수 있다.

3. 키워드 및 예약어를 이용할 수 있다.

5.2 Array 타입

여러가지의 타입의 데이터들을 섞어 넣을 수 있다.

동적으로 크기를 조절한다.

배열 생성법

1. new 연산자와 Array 생성자 (new 생략 가능)

var colors = new Array(20);                // length 프로퍼티가 20인 배열

var colors = new Array("red", "blue");

값을 하나만 넘기는 경우 혼란스러울 수 있다.

var colors = new Array(3);            // length가 3

var colors = new Array("Gray");        // 문자열 하나를 갖는 배열

2. 배열 리터럴 표기법

var colors = [];          // 빈 배열

var colors = ["red"];     // 문자열 하나를 갖는 배열

var colors = [1,];        // 데이터가 하나 혹은 두 개가 들어 있는 배열    (이렇게 하지 마십시오.)

var colors = [,,];        // 데이터가 두 개 혹은 세 개가 들어 있는 배열    (이렇게 하지 마십시오.)

배열의 Length

배열의 길이보다 큰 인덱스에 값을 지정하면 배열의 길이가 자동으로 늘어난다.

length 프로퍼티는 값을 변경할 수 있다.

배열 마지막에 데이터를 추가할 때 용이하다.

5.2.1 배열 감지

객체와 배열을 구분하는 방법

1. instanceof 연산자

문제: 실행 컨텍스트가 하나뿐이라고 가정한다.

프레임이 두 개 있으면 전역 컨텍스트가 두 개 있는  것이고, Array 생성자도 두 개 있는 것이다.

한 프레임에서 배열을 전달하면 전달받은 프레임에서 instanceof를 이용하면 실패한다.

두 프레임에서의 생성자가 다르기 때문이다.

2. Array.isArray() 메서드 // Array.isArray(value)

위의 방법의 문제를 우회하기 위한 메서드이다.

실행 컨텍스트와 무관하게 배열인지 아닌지를 확인할 수 있다.

5.2.2 변환 메서드

객체에는 모두 toLocaleString(), toString(), valueOf() 메서드가 있다.

배열에서 호출했을 때 toString()과 valueOf()는 같은 값을 반환한다.

ex)

alert(colors.toString());         // red,blue,green

alert(colors.valueOf());        // red,blue,green

alert(colors);                 // red,blue,green

=> alert는 문자열을 받으므로 배열에서 toString()을 호출한다.

toLocaleString()은 다른 두개의 메서드와 같은 값을 반환할 때도 있고 그렇지 않을 때도 있다.

join() 메서드

배열을 쉼표가 아닌 다른 구분자를 이용하여 문자열로 나타낼 수 있다.

console.log([1,2,3].join("_"));    // "1_2_3" 반환 (undefined 혹은 매개변수를 전달하지 않으면 쉼표를 사용한다.)

5.2.3 스택 메서드

배열을 다른 데이터 구조인 듯이 동작하게 하는 메서드가 있다. (push(), pop() 메서드)

스택은 'LIFO (Last-In-First-Out)'구조인데 데이터를 삭제하면 맨 처음 추가한 데이터를 삭제하는 구조이다.

스택에서 데이터 삽입과 제거는 스택의 맨 위 한 지점에서만 발생한다.

push(): 매개변수 수에 제한이 없다. 매개변수를 배열에 추가한 후, 변경된 배열의 길이를 반환한다.

pop(): 배열의 마지막 데이터를 제거하고 제거한 데이터를 반환한다.

5.2.4 큐 메서드

큐는 'FIFO (Fisrt-In-First-Out)'의 데이터 구조이다.

데이터를 맨 마지막에 추가하고 제거할 때는 맨 앞에서 제거한다.

추가하는 메서드는 스택과 마찬가지로 push()를 이용하면 된다.

제거하는 메서드는 shift()가 있다.

shift(): 배열의 첫 번째 데이터를 꺼내서 반환한다.

큐의 반대 메서드

unshift(): 배열의 맨 앞에 데이터를 추가한 후, 변경된 배열의 길이를 반환한다. push의 반대라고 생각하면 된다.

5.2.5 정렬 메서드

reverse()

배열의 데이터 순서를 뒤집어서 저장한다. 반환값은 순서를 뒤집은 배열이 반환된다.

sort()

데이터를 문자열로 변환한 후 이를 비교하여 순서를 판단한다.

-> [0, 1, 5, 10].sort()를 하면 [0, 1, 10, 5]가 반환된다.

비교 함수를 넘겨 순서를 조절할 수 있다.

ex)

function compare(v1, v2){

if(v1 < v2){

return -1;

}else if(v1 > v2){

return 1;

}else{

return 0;

}

}

[0, 1, 5, 10].sort(compare);    // [0, 1, 5, 10]

// compare의 반환값이 true인 경우 두 변수의 값을 바꾼다.

// 고로 숫자 타입이나 Date 객체처럼 valueOf()를 호출할 때 숫자형 값을 반환하는 객체에서는 두 매개변수의 차이값을 반환해도 된다.

5.2.6 조작 메서드

concat()

현재 배열에 배열 혹은 데이터를 덧붙여서 새로운 배열을 생성해 반환한다.

매개변수를 넘기지 않으면 복사본 배열을 반환한다. (배열은 포인터값을 가지므로 그대로 대입하면 같은 값을 가리킨다.)

매개변수 수에 제한이 없다.

slice()

현재 배열의 일부를 갖는 새 배열을 생성한 후 반환한다.

매개변수를 넘기지 않으면 복사본 배열을 반환한다.

slice(index1, index2)

-> index1부터 index2 -1 까지의 배열 값을 갖는 새 배열을 반환한다.

-> index1만 있는 경우 index1부터 배열의 끝까지.

-> 음수인 경우는 배열의 길이에 해당 값을 더한 숫자를 사용한다. (끝을 기준으로 자를 때)

splice()

배열 메서드 중 가장 강력한 메서드일 것 이다.

배열 중간에 데이터를 삽입하는 메서드이다.

다음과 같은 방법으로 사용한다.

1. 삭제

splice(arg1, arg2): 인덱스 arg1부터 arg2개의 데이터를 삭제한다.

2. 삽입

splice(arg1, 0, arg3...): 인덱스 arg1에서 (0개의 데이터를 삭제하고) arg3...데이터를 삽입한다.

3. 대체

삽입과 삭제를 조합

splice(arg1, arg2, arg3...): 인덱스 arg1에서 arg2개의 데이터를 삭제하고 arg3...데이터를 넣어 대체한다.

5.2.8 반복 메서드

ECMAScript5에서 5개 추가하였다.

이 메서드들은 모두 두 개의 매개변수를 받는다.

첫 번째 매개변수: 배열의 각 데이터에서 실행할 함수

두 번째 매개변수: (옵션) 함수를 실행할 스코프 객체 (this값에 영향을 미친다.)

콜백 함수는 모두 데이터, 데이터의 인덱스, 배열 자체의 세 가지 매개변수를 받는다.

every()

배열의 모든 데이터에서 콜백 함수를 호출하고 반환 값이 전부 true이면 true를 반환한다.

filter()

배열의 모든 데이터에서 콜백 함수를 호출하고 반환값이 true인 데이터만 새 배열에 저장하여 반환한다.

forEach()

배열의 모든 데이터에서 콜백 함수를 호출하며 반환값이 없다.

map()

배열의 모든 데이터에서 콜백 함수를 호출하고 콜백 함수의 반환값들을 새 배열에 저장하여 반환한다.

some()

배열의 모든 데이터에서 콜백 함수를 호출하고 반환값 중 하나라도 true이면 true를 반환한다.

ex)

var someResult = arr.some(function(item, index, array){

return item>2;

});

5.2.9 감소 메서드

배열을 순회하며 콜백 함수를 실행하고 값을 하나 만들어 반환한다.

두 메서드 모두 두 개의 매개변수를 받는다.

첫 번째 매개변수: 배열의 각 데이터에서 실행할 콜백 함수

두 번째 매개변수: (옵션) 감소 작업을 시작할 초기 값

콜백 함수는 이전 값, 현재 값, 현재 값의 인덱스, 현재 배열의 네 가지 매개변수를 받으며

자동으로 다음 데이터에서 실행하는 콜백 함수의 첫 번째 매개변수가 반환된다.

콜백 함수를 처음 호출할 데이터는 배열의 두 번째 데이터이다. (콜백 함수의 두 번째 매개변수, array[1])

reduce()

이 작업을 배열의 앞부터 시작하여 끝까지 진행한다.

reduceRight()

이 작업을 배열의 끝에서 시작하여 앞까지 진행한다.

ex)

var val = [1, 2, 3, 4, 5];

var sum = val.reduce(function(prev, cur, index, array){

return prev + cur;

// 1: prev: 1, cur: 2

// 2: prev: 3(1+2), cur 3

// 3: prev: 6(3+3), cur 4

// 4: prev: 10, cur 5

//     return 15

});

[출처: 프론트엔드 개발자를 위한 자바스크립트 프로그래밍]