Search
Duplicate

Array 오브젝트(ES3 기준)

1. Array 오브젝트 개요, 배열 생성 방법, 엘리먼트 작성 방법, 배열 차원

Array 오브젝트 개요

빌트인 오브젝트 - 이미 만들어져 있다는 의미
Array(배열) 형태
[123, "ABC", "가나다"]
대괄호 안에 콤마로 구분하여 값 작성
배열 엘리먼트(Element)
[123, "ABC"]에서 123, "ABC" 각각을 엘리먼트 또는 요소라고 부릅니다.
2의 32승(4,294,967,296) - 1개
인덱스(Index)
엘리먼트 위치를 인덱스라고 부릅니다.
왼쪽부터 0번 인덱스, 1번 인덱스, ... N번 인덱스
배열 특징
엘리먼트 작성이 순서를 가지고 있습니다.
배열 전체를 작성한 순서로 읽거나 인덱스로 값을 추출할 수 있습니다.

배열 생성 방법

var arr = new Array(); var arr = Array(); var arr = [];

엘리먼트 작성 방법

var book = ["책1", "책2"];
대괄호 안에 콤마로 구분하여 다수 작성 가능
String 타입은 큰따옴표, 작은따옴표 모두 가능
JS의 모든 타입의 값, 오브젝트 사용 가능
값을 작성하지 않고 콤마만 작성하면 undefined가 설정됨

배열 차원

1차원 배열
대괄호 하나에 엘리먼트 작성
[12, 34, 56] 형태
var list = [12, 34, 56];// ---(1) for (var i = 0; i < list.length; i++){ console.log(list[i]); }; /* 12 34 56 */
JavaScript
복사
⇒ (1): new연산자를 사용한 것이 아니기에 Array Object라 부릅니다(instance가 아닙니다.)
2차원 배열
배열 안에 1차원 배열을 작성
[[12, 34, 56]] 형태
var list = [[12,34,56]]; for (var i = 0; i < list.length; i++){ var one = list[i]; for (var j = 0; j < one.length; j++){ console.log(one[j]); }; }; /* 12 34 56 */
JavaScript
복사
3차원 배열
배열 안에 2차원 배열을 작성
[[[12, 34, 56]]] 형태
var list = [[[12,34,56]]]; for (var i = 0; i < list.length; i++){ var one = list[i]; for (var j = 0; j < one.length; j++){ var two = one[j]; for (var k = 0; k < two.length; k++){ console.log(two[k]); }; }; }; /* 12 34 56 */
JavaScript
복사
2차원 이상의 배열은 비즈니스 로직의 복잡성이 과하기에 설계할 때부터 2차원 이상은 진행되지 않도록하거나 분리한 이후 진행하도록 합시다.

2. 프로퍼티 리스트

new Array() : 인스턴스 생성
Array() : 인스턴스 생성
Array 프로퍼티
length 배열의 엘리먼트 수 반환
Array.prototype
constructor : 생성자
unshift(): 배열 처음에 엘리먼트 삽입
push(): 배열 끝에 엘리먼트 첨부
concat(): 배열 끝에 값을 연결
slice(): 인덱스 범위의 엘리먼트르 ㄹ복사
join(): 엘리먼트와 분리자를 결합하여 반환
toString(): 엘리먼트를 문자열로 연결하여 반환
toLocaleString(): 엘리먼트를 지역화 문자로 변환하고 문자열로 연결하여 반환
shift(): 첫 번째 엘리먼트를 삭제하고 삭제한 엘리먼트 반환
pop(): 마지막 엘리먼트를 삭제하고 삭제한 엘리먼트 반환
splice(): 엘리먼트를 삭제하고 새로운 엘리먼트를 삽입, 삭제한 엘리먼트 반환
sort(): 엘리먼트 값을 Unicode 순서로 분류하여 반환
reverse(): 엘리먼트 위치를 역순으로 바꾸어 반환.

3. Array 인스턴스 생성, length 프로퍼티

Array 인스턴스 생성

new Array()

Array 인스턴스 생성, 반환
배열 생성 기준
파라미터에 따라 배열 생성 기준이 다릅니다.
파라미터를 작성하지 않으면 빈 배열이 생성됩니다.
작성한 순서로 엘리먼트에 설정됩니다.
new Array(3)처럼 파라미터에 숫자를 작성하면 3개의 엘리먼트 생성
var arr = new Array(1,2,3); console.log(arr);// [1,2,3] var arr = new Array(); console.log(arr);//[] var arr = new Array(3); console.log(arr);//[undefined, undefined, undefined]
JavaScript
복사

Array()

Array 인스턴스 생성, 반환을 하며 new Array()와 생성 방법 및 기능 같습니다.
인스턴스의 생성 논리는 new Array()는 new 연산자에서 생성자 함수(constructor)를 호출한다면 Array()는 직접 생성자 함수를 호출하여 인스턴스를 생성합니다.
var arr = Array(1,2,3); console.log(arr);//[1, 2, 3];
JavaScript
복사

length 프로퍼티

배열 [1, 2, 3]에서 length 값은 3이고 Array 오브젝트에 {length: 3}형태로 설정되어 있습니다.
열거 / 삭제는 할 수 없지만, 변경은 가능합니다.
length 값을 변경하면 배열의 엘리먼트 수가 변경됩니다.
var arr = [1,2,3,4,5]; arr.length = 7; console.log(arr);//[1,2,3,4,5,undefined, undefined] arr.length = 3; console.log(arr);//[1,2,3]
JavaScript
복사

4. 엘리먼트 추가/삭제 메커니즘, delete 연산자

엘리먼트 추가

배열에 엘리먼트 추가하는 방법은 삽입할 위치에 인덱스를 지정하여 삽입하거나 표현식으로 인덱스를 지정하여 추가하는 방법이 있습니다.
var arr = [1,2]; arr[2] = 4; console.log(arr);//[1,2,4]; arr[arr.length + 2] = 5; console.log(arr);//[1,2,4,undefined,undefined,5);
JavaScript
복사

delete 연산자

var 변수는 삭제가 불가능하지만 글로벌 변수는 삭제가 가능합니다.
var value = "테스트"; delete value;//false globalValue = "글로벌테스트"; delete globalValue; //true try{ console.log(globalValue); } catch(error){ console.error("존재하지 않습니다.", error); }
JavaScript
복사
{name: value} 삭제 방법
삭제할 프로퍼티의 이름을 작성합니다.
ES5에서 삭제가 불가능하게끔 설정이 가능합니다.
var book = {title: "책"}; console.log(delete book.title);//true console.log(book.title); //undefined var book2 = {title: "책2"}; delete book2;//false ---(1) book3 = {title: "책3"}; delete book3;//true
JavaScript
복사
⇒ (1): var 변수에 오브젝트를 할당하면 오브젝트 전체를 삭제할 수 없습니다.
인덱스로 배열의 엘리먼트 삭제할 수도 있습니다.
var arr = [1,2,3,4] delete arr[0]; console.log(arr);//[undefined, 2, 3, 4]
JavaScript
복사

배열 엘리먼트 삭제 메커니즘

삭제된 인덱스에 undefined 설정
var arr = [1, 2, 3, 4]; delete arr[1]; console.log(arr);//[1, undefined, 3, 4] for(var i of arr){ console.log(i); } /* 1 undefined 3 4 */
JavaScript
복사
⇒ 삭제한 곳에 undefined를 설정하는 이유는 배열안의 내용이 많다고 할 때 산발적인 엘리먼트 삭제가 진행되면 해당 부분을 뒷 엘리먼트들을 가져와 세팅해주면서 다시 세팅해줘야하는데, 이는 퍼포먼스에 저하가 생길 수 있기 때문입니다.

5. 엘리먼트 삽입, 첨부

unshift()

0번 인덱스에 파라미터 값 삽입
배열의 있던 엘리먼트는 뒤로 이동합니다.
var arr = [1,2,3,4]; arr.unshift(9); console.log(arr);//[9, 1, 2, 3, 4]
JavaScript
복사

push()

배열 끝에 파라미터 값을 첨부합니다.
var arr = [1,2,3,4]; arr.push(9); console.log(arr);//[1,2,3,4,9]
JavaScript
복사

concat()

배열에 파라미터 값을 연결하여 반환합니다.
파라미터가 1차원 배열이면 값만 반영합니다.
var value = [1,2]; var result= value.concat(3,4); console.log(result);//[1,2,3,4] result = value.concat([3,4]); console.log(result);//[1,2,3,4] result = value.concat([3],[4]); console.log(result);//[1,2,3,4]
JavaScript
복사

6. 엘리먼트 복사

slice()

배열의 일부를 복사하여 배열로 반환합니다.
첫 번째 파라미터의 인덱스부터 두 번째 인덱스 직전까지
var arr = [1,2,3,4,5]; console.log(arr.slice(1,3));//[2,3]
JavaScript
복사
true, false를 숫자로 변환합니다.
첫 번째 파라미터만 작성하면 해당 파라미터부터 배열의 length만큼 복사합니다.
첫 번째 파라미터 값이 더 클 경우 빈 배열을 반환합니다.
파라미터에 음수를 작성하면 음수에 배열의 length를 더해서 계산합니다.
var arr = [1,2,3,4,5,6]; console.log(arr.slice(true, 3));//[2,3] console.log(arr.slice(false, 3));//[1,2,3] console.log(arr.slice(3));//[4,5,6] console.log(arr.slice(3,1));//[] console.log(arr.slice(-3, -1));//[4,5]
JavaScript
복사

7. 엘리먼트 값을 문자열로 변환

join()

엘리먼트와 분리자를 하나씩 결합하여 문자열로 연결합니다.
[0] 인덱스, 분리자, [1]인덱스, 분리자
마지막 엘리먼트는 분리자를 연결하지 않습니다.
파라미터를 작성하지 않으면 콤마로 분리합니다.
파라미터에 빈 문자열 작성
var value = [1, 2, 3]; console.log(value.join("##"));//1##2##3 console.log(value.join());//1,2,3 console.log(value.join(""));//123
JavaScript
복사

toString()

배열의 엘리먼트 값을 문자열로 연결합니다.
콤마로 엘리먼트를 구분합니다.
var result = ["A","B","C"].toString() console.log(result);//A,B,C console.log([["가"], ["다"]].toString());//가,다
JavaScript
복사

toLocaleString()

엘리먼트 값을 지역화 문자로 변환합니다.
문자열을 콤마로 연결하여 반환합니다.
var value = [12.34, 56]; console.log(value.toLocaleString("zh-Hans-CN-u-nu-hanidec"));//一二.三四,五六
JavaScript
복사

8. 엘리먼트 삭제

shift()

배열의 첫 번째 엘리먼트를 반환 후 삭제합니다.
삭제한 엘리먼트 값이 undefined로 남지 않고 완전히 삭제되어 length도 하나 줄어듭니다.
빈 배열일경우 undefined가 반환됩니다.
var arr = [1, 2, 34]; console.log(arr.shift());//1 console.log(arr);//[2, 34];
JavaScript
복사

pop()

배열의 마지막 엘리먼트를 반환후 삭제합니다.
삭제한 엘리먼트 값이 undefined로 남지 않고 완전히 삭제되어 length도 하나 줄어듭니다.
빈 배열일 경우 undefined가 반환됩니다.
var arr = [1,2, 34]; console.log(arr.pop());//34 console.log(arr);//[1, 2]
JavaScript
복사

splice()

엘리먼트를 삭제하고 삭제한 엘리먼트를 반환합니다. 그 다음 삭제한 위치에 세 번째 파라미터를 삽입합니다.
파라미터를 작성하지 않을 경우 삭제하지 않습니다. 반환값은 빈 배열입니다.
var arr = [1, 2, 3, 4, 5]; console.log(arr.splice(1, 3));//[2, 3, 4] console.log(arr);//[1, 5]; var arr = [1,2,3,4,5]; console.log(arr.splice(1, 3, "A", "B"));//[2,3,4] console.log(arr);//[1, "A", "B", 5]; console.log(arr.splice());//[] console.log(arr);//[1, "A", "B", 5]
JavaScript
복사

9. sort(분류), sort()와 Unicode

sort()

엘리먼트 값을 승순으로 정렬합니다.
정렬 기준은 엘리먼트 값의 Unicode 입니다.
sort 대상 배열도 정렬됩니다.
값이 undefined이면 끝으로 이동합니다.
var arr = [4, 2, 3, 1]; console.log(value.sort());//[1,2,3,4] var arr = ["A1", "A01", "B2", "B02"] console.log(arr.sort());//["A01", "A1", "B02", "B2"] ---(1) console.log(arr);//["A01", "A1", "B02", "B2"] ---(2) var arr = [, , 1, 2]; console.log(arr.sort());//[1, 2, undefined, undefined]
JavaScript
복사
⇒ (1): 왼쪽에서 오른쪽으로 문자를 하나씩 비교하며 정렬합니다. 가령 예를들어 A1과 A01에서 A가 같으므로 다음으로 넘어가고 다음 문자에서 0과 1을 비교하여 0이 더 앞에 있기에 A01을 더 우선으로 앞에 정렬합니다.
⇒ (2): sort 대상 배열(arr)도 같이 정렬됩니다.

sort()와 Unicode

숫자에 해당하는 Unicode의 code point로 정렬합니다.
var arr = [101, 26, 7, 1234]; console.log(arr.sort());//[101, 1234, 26, 7] --- (1)
JavaScript
복사
⇒ (1): 우리가 생각하는 결과([7, 26, 101, 1234])와는 다르게 나옵니다. 그 이유는 코드 포인트로 비교하여 sort하기 때문입니다. 101과 26을 비교하면 1이 2보다 작기 때문에 101이 26보다 작은걸로 평가합니다. 그렇기 때문에 이를 해결하기 위해서는 sort()의 파라미터로 함수를 작성하여 함수안에서 정렬 해 줘야 합니다.

10. sort 알고리즘, 역순 정렬

앞(-1), 동일(0), 뒤(1)를 통해 정렬한다.
sort 알고리즘
var arr = [101, 26, 7, 1234]; arr.sort(function(one, two){return one - two}); console.log(arr);//[7, 26, 101, 1234]
JavaScript
복사
Logic
1.
sort()함수에서 callback으로 파라미터로 받은 function을 호출하면서 인자값으로 101과 26을 전달합니다.
두 개의 파라미터는 각각 one, two에 설정됩니다.
2.
one(101) - two(26)의 결과는 75라는 양수를 반환합니다.
3.
반환값이 양수일 경우 배열에서 두 값의 위치를 바꿉니다. →[26, 101, 7, 1234]
4.
다시 콜백 함수를 호출하며 101과 7을 넘겨주어 one(101) - two(7)의 결과를 반환합니다.
5.
반환값이 양수(94)기에 배열에서 두 값의 위치를 바꿉니다. →[26, 7, 101, 1234]
6.
다시 함수를 호출하여 101과 1234를 전달 후 값을 비교합니다.
7.
one(101) - two(1234)의 결과값인 -1,133이라는 음수를 반환하게되고, 배열간의 위치는 변경되지 않습니다.
8.
다시 처음으로 돌아가 바뀌는 것이 없을 때까지 배열의 엘리먼트 위치를 조정합니다.