[Javascript] Array 오브젝트 (2) - 인스턴스 생성, 프로퍼티 (ES3)

Array 인스턴스 생성

1. new Array()

✓ Array 인스턴스 생성, 반환

✓ 배열 생성 기준 : 파라미터
→ 파라미터 작성 ✕ : 빈 배열

var arr = new Array();
console.log(type of arr);	// new Array()로 생성한 인스턴스 타입은 ogject
console.log(arr.length);	// 엘리먼트가 없으므로 0 출력

[실행 결과]
object
0

→ 작성한 순서로 엘리먼트에 설정

var arr = new Array(10,20);	// 값을 콤마로 구분하여 다수 작성
console.log(arr);
var arr2 = new Array([30,40]);	// 배열로 작성하면 1차원을 더한 차원이 됨.
console.log(arr2);

[실행 결과]
[10,20]
[[30,40]]

→ 1개의 숫자 작성 : 엘리먼트의 개수

var arr = new Array(4);		// 숫자 하나를 작성하면 엘리먼트의 수가 됨.
console.log(arr);		// 엘리먼트에는 undefined가 설정

[실행 결과]
[undefined, undefined, undefined, undefined]

2. Array()

✓ Array 인스턴스 생성, 반환
→ new Array()와 생성 방법 및 기능 동일

✓ 인스턴스 생성 논리
→ new Array() - new 연산자에서 생성자 함수를 호출하여 인스턴스 생성
→ Array() - 직접 생성자 함수를 호출하여 인스턴스 생성

---

프로퍼티 (ES3)

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

---

알고리즘 문제를 풀다 헷갈리는 메소드만 정리해보았다!

1. push()

구분	데이터 (값)
data	첨부 기준
파라미터	[item1 [, item2 [,...]]] opt
반환	첨부 후의 length

// 배열 끝에 파라미터 값을 첨부
var arr = [1, 2];
arr.push(345, 67);
console.log(arr);

[실행 결과]
[1, 2, 345, 67]

---

2. shift()

구분	데이터 (값)
data	대상
파라미터	사용 ✕
반환	삭제한 엘리먼트

// 배열의 첫 번째 엘리먼트 삭제
// 삭제한 엘리먼트 값이 undefined로 남지 않고 완전히 삭제됨
// length 값이 하나 줄어든다.
var arr = [1,2,3];
console.log(arr.shift());
console.log(arr);

[실행 결과]
1
2, 3

// 빈 배열이면 undefined가 반환
var arr = [].shift();
console.log(arr);

[실행 결과]
undefined

---

3. pop()

구분	데이터 (값)
data	대상
파라미터	사용 ✕
반환	삭제한 엘리먼트

// 배열의 마지막 엘리먼트 삭제
// 삭제한 엘리먼트 값이 undefined로 남지 않고 완전히 삭제됨
// length 값이 하나 줄어든다.
var arr = [1,2,3];
console.log(arr.pop());
console.log(arr);

[실행 결과]
3
1, 2

// 빈 배열이면 undefined가 반환
var arr = [].pop();
console.log(arr);

[실행 결과]
undefined

---

4. slice()

구분	데이터 (값)
파라미터	시작 인덱스, 디폴트: 0
	끝 인덱스opt, 디폴트: length
반환	[결과]

// 배열의 일부를 복사하여 배열로 반환
// 첫 번째 인덱스부터 두 번째 인덱스 🚨직전까지
var arr = [1, 2, 3, 4, 5];
var result = arr.slice(1,3);	// 복사 대상 원본은 바뀌지 않음. 
console.log(result);
console.log(arr);

[실행 결과]
[2, 3]
[1, 2, 3, 4, 5]

// true, false를 숫자로 반환
var arr = [1, 2, 3, 4, 5];
console.log(arr.slice(true,3));
console.log(arr.slice(false,3));

[실행 결과]
[2, 3]
[1, 2, 3]
         
// 첫 번째 파라미터만 작성
console.log([1, 2, 3, 4, 5].slice(2));
// 첫 번째 인덱스부터 끝까지 반환

[실행 결과]
[3, 4, 5]

// 첫 번째 값 > 두 번째 값
console.log([1, 2, 3, 4, 5].slice(4, 3));
// 빈 배열 반환

[실행 결과]
[]

// 파라미터 값이 음수
var arr = [1, 2, 3, 4, 5];
console.log(arr.slice(-4,-2));
// length 값을 더한다.
// -4 + 5 = 1
// -2 + 5 = 3

[실행 결과]
[2, 3]

---

5. splice()

구분	데이터 (값)
data	대상
파라미터	시작 인덱스, 디폴트: 0
	삭제할 엘리먼트 수
	추가할 엘리먼트 : [item 1[,...]]opt
반환	[결과]

// 엘리먼트를 삭제하고 삭제한 엘리먼트 반환
// 첫 번째 인덱스부터 두 번째 인덱스 개수를 삭제
var arr = [1,2,3,4,5];
console.log(arr.splice(1,3));	// 1번 인덱스부터 엘리먼트 3개 삭제
console.log(arr);		// 뒤의 엘리먼트가 앞으로 당겨진다.

[실행 결과]
[2, 3, 4]
[1, 5]

// 삭제한 위치에 세 번째 파라미터 삽입
var arr = [1,2,3,4,5];
console.log(arr.splice(1, 3, "A", "B"));
console.log(arr);

[실행 결과]
[2, 3, 4]
[1, A, B, 5]

// 파라미터에 아무것도 작성하지 않는다면?
var arr = [1,2,3,4,5];
console.log(arr.splice());	// 삭제하지 않음.
console.log(arr);		// 삭제한 것이 없으므로 빈 배열 반환

[실행 결과]
[]
[1, 2, 3, 4, 5]

---

6. join()

구분	데이터 (값)
data	기준
파라미터	분리자opt, 디폴트: 콤마(,)
반환	연결한 문자열

// 엘리먼트와 분리자를 하나씩 결합하여 문자열로 연결
// 마지막 엘리먼트는 분리자 연결 ✕
var arr = [1,2,3];
var result = arr.join("$$");
console.log(result);
console.log(typeof result);

[실행 결과]
1$$2$$3
string

// 파라미터를 작성하지 않으면 콤마로 분리
var arr = [1,2,3];
var result = arr.join();
console.log(result);

[실행 결과]
1,2,3

// 파라미터에 빈 문자열 작성
// 데이터로 HTML의 마크업을 만들어 한 번에 표시할 때 사용 ex) <table>
var arr = [1,2,3];
var result = arr.join("");	// 엘리먼트 값만 연결하여 반환
console.log(result);			

[실행 결과]
123

---

7. sort()

구분	데이터 (값)
data	대상
파라미터	함수opt
반환	sort 결과

// 엘리먼트 값을 승순으로 정렬
var arr = [4, 3, 2, 1];
console.log(arr.sort());

[실행 결과]
[1, 2, 3, 4]

// 정렬 기준 : 엘리먼트 값의 Unicode
var arr = ["A1", "A01", "B2", "B02"];
console.log(arr.sort());
/*
왼쪽에서 오른쪽으로 문자 하나씩 비교
A01과 A1에서 A가 같으므로 다음 문자 비교
0과 1중 코드 포인트가 앞에 있는 0이 앞으로 정렬
*/

[실행 결과]
[A01, A1, B02, B2]

// 🚨 sort 대상 배열도 정렬됨.
var arr = [4, 3, 2, 1];
console.log(arr.sort());
console.log(arr);

[실행 결과]
[1, 2, 3, 4]
[1, 2, 3, 4]

// 값이 undefined이면 끝으로 이동
var arr = [, , 1, 2];
console.log(arr.sort());

[실행 결과]
[1, 2, undefined, undefined]