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.
다시 처음으로 돌아가 바뀌는 것이 없을 때까지 배열의 엘리먼트 위치를 조정합니다.
