lessons 27~28. 배열

2023.03.05

자바스크립트 스터디 8회차

공부 사이트: https://poiemaweb.com/

 

 

27. 배열

1) 배열 생성 방법

① 배열 리터럴

const empptyArr = [];
console.log(emptyArr.length);

const arr = ['zero','one','two','three','four','file'];

console.log(arr[1]);
console.log(arr.length);

배열 리터럴은 객체 리터럴과 달리 property key가 없고, property value만이 존재한다.

value에 접근하기 위해 대괄호 표기법을 사용하며 대괄호 내에 접근하고자 하는 요소의 인덱스를 넣어준다.

(객체는 대괄호 표기법/마침표 표기법 사용)

 

배열 리터럴의 프로토타입 객체는 Array.prototype이고, 객체 리터럴의 프로토타입 객체는 Object.prototype이라는 차이가 있다.

poiemaweb js-array

 

 

② 생성자 함수

생성자 함수에 몇 개의 매개변수를 전달하느냐에 따라 결과가 다르다.

// 생성자 함수에 매개변수 1개 전달 => length
const arr1 = new Array(5);
console.log(arr1);

// 생성자 함수에 매개변수 2개 이상 전달 => 요소
const arr2 = new Array(1,2,3);
console.log(arr2);

 

2) 배열 요소의 추가/삭제

배열도 동적으로 요소를 추가할 수 있다. 인덱스를 사용하여 필요한 위치에 값을 할당하면 된다.

const arr = [];
arr[1] = 1;
arr[5] = 5;

console.log(arr);
console.log(arr[5]);

 

3) 배열의 순회

객체의 프로퍼티를 순회할 때 for in문을 사용하듯, 배열도 객체이기에 for in문을 사용할 수는 있다.

그러나 배열 대상으로 for in문 사용 시 배열 요소 뿐만아니라 불필요한 프로퍼티가 출력될 수 있고, 요소 순서들을 보장하지 않으므로 다른 반복문 사용하는 것을 권장한다.

→ forEach 메소드, for문, for of문

const arr = ['zero','one','two','three','four'];
arr.test = 10;

// for in: 불필요한 test 프로퍼티 출력
for(const key in arr) {
	console.log('key: ' + key, 'value: ' + arr[key]);
}

// forEach 메소드
arr.forEach((item, index) => console.log(index,item));

// for문
for(let i=0; i<arr.length;i++){
	console.log(i,arr[i]);
}

// for of 문
for(const item of arr){
	console.log(item);
}

 

---

[TIP] forEach 메소드

주어진 함수를 배열 요소 각각에 대해 실행한다.

// forEach 메소드
arr = ['홍길동', '고길동', '홍길빵'];
arr.forEach(func);

function func(item){
     console.log('my name is ' + item);
}

console.log();

// 화살표 함수
// element 변수는 배열의 각 요소들을 순환하며 => 이후 구문을 실행한다.
arr.forEach(element => console.log('my name is ' + element));

※ 화살표 함수: 함수 표현식보다 단순하고 간결한 방식. 본문이 한 줄인 함수 작성 시 유용함. 

---

 

4) Array Property

Array.length

배열의 길이를 나타내는 프로퍼티. 그러나 희소 배열은 배열 요소의 개수와 length 프로퍼티 값이 일치하지 않음

---

[TIP]  희소 배열

배열의 요소가 연속적이지 않은 배열을 의미한다. 희소 배열은 배열의 요소 개수보다 length 프로퍼티 값이 항상 크다.

(대충 희소행렬이랑 비슷한 형태인 듯)

---

 

5) Array Method

Array.isArray()

- 주어진 인수가 배열이면 true/아니면 false

 

Array.from()

- 유사 배열 객체/이터러블 객체를 변환하여 새로운 배열 생성

＃유사 배열 객체: 배열이 아닌데도 length 프로퍼티 사용 가능한 객체

＃이터러블 객체: 반복 가능한 객체. Array, String, Map, Set, Generator 등..

 

Array.of()

- 전달된 인수를 요소로 갖는 배열 생성.

- Array 생성자 함수와 다른 점은, 전달된 인수가 1개여도 해당 인수를 요소로 갖는 배열을 생성한다는 것.

 

Array.prototype.indexOf()

- 원본 배열에서 인수로 전달된 요소를 검색하여 인덱스 반환.

- 인수가 하나면 해당 인수 검색하여 인덱스 반환, 인수가 두 개면 두번째 인수는 검색을 시작할 인덱스.

const arr = ['사과','딸기','포도','배','사과'];

// 처음 발견된 위치(index)
console.log(arr.indexOf('사과'));
// 존재하지 않는 요소는 -1 출력
console.log(arr.indexOf('멜론'));
// 두 번째 인수는 검색 시작 인덱스
console.log(arr.indexOf('사과',3));

 

Array.prototype.concat()

- 인수로 전달된 원본 배열의 마지막 요소로 추가한 새로운 배열 반환

const arr = ['사과','딸기','포도','배','사과'];

const result = arr.concat('바나나');
console.log(result);
console.log(arr); //원본 배열 미변경

 

Array.prototype.join()

- 원본 배열의 모든 요소를 문자열로 변환한 후 인수로 연결한 문자열 반환.

- 인수 생략 가능. (기본값 ,)

const arr = ['사과','딸기','포도','배','사과'];

let result = arr.join();
console.log(result);

result = arr.join(' ');
console.log(result);

result = arr.join('쪼아');
console.log(result);

 

Array.prototype.push()

- 인수로 전달받은 모든 값을 원본 배열의 마지막 요소로 추가하고 변경된 length 값 반환.

- 원본 배열을 직접 변경하며, 성능면에서 좋지 않음.

const arr = ['사과','딸기','포도','배','사과'];

const result = arr.push('바나나');
console.log(result);
console.log(arr); //원본 배열 변경

※ push 메소드를 사용해서 배열 마지막에 요소를 추가하는 방법보단, length 프로퍼티를 사용해서 직접 요소를 추가하는 방법이 더 빠르다.

const arr = ['사과','딸기','포도'];

//push 메소드 통한 요소 추가
const result = arr.push('바나나');
console.log(result);
console.log(arr);

// length 프로퍼티 통한 직접 요소 추가 <<더 빠르다!
arr[arr.length] = '멜론';
console.log(arr);

 

Array.prototype.pop()

- 원본 배열에서 마지막 요소를 제거하고 제거한 요소 반환. 원본 배열을 직접 변경

- pop과 push 통해 스택을 쉽게 구현할 수 있다.

 

Array.prototype.reverse()

- 배열 요소의 순서를 반대로 변경. 원본 배열 직접 변경

 

Array.prototype.shift()

- 배열에서 첫 요소를 제거하고 제거한 요소 반환. 원본 배열 직접 변경

 

Array.prototype.slice() 

- 인자로 지정된 배열 부분을 복사하여 반환. 

- slice(start,end): start 부터 end 이전 요소까지 복사

- 이 메소드를 이용하여 유사 배열 객체를 배열로 변환할 수 있다.

// 함수 호출 시 전달된 인수를 배열로 만든 후 reduce 통해 합 반환
function sum(){
	// arguments: 함수 호출 시 전달된 인수들 정보를 담고있는 이터러블한 유사배열객체.
	const arr = Array.prototype.slice.call(arguments);
	console.log(arr);
	
	//reduce(callback, initialValue): 배열의 각 요소에 대해 함수를 실행하고 누적된 값을 출력
        // initialValue: callback의 최초 호출에서 첫 번째 인수에 제공하는 값. 기본값은 배열 첫요소
	// pre: 누적된 리턴값, cur: 현재값
	return arr.reduce(function(pre, cur){
		return pre + cur;
	});
}

console.log(sum(1,2,3,4,5));

 

 

Array.prototype.splice()

- 기존 배열 요소를 제거하고 그 위치에 새로운 요소 추가. 원본 배열 직접 변경

- splice(start, deleteCount, items): start부터 deleteCount만큼 요소를 제거하고 items로 대체한다. items를 지정하지 않을 경우 요소의 삭제만 진행한다.

 

 

 

28. 배열의 진실

자바스크립트에서의 배열은 일반적인 의미의 배열이 아니라, 그를 흉내낸 특수한 객체이다.

인덱스를 프로퍼티 키로 가지고, length 프로퍼티를 가진 특수 객체이다. 배열의 요소는 프로퍼티 값이 된다. 

-	차이점
일반적인 배열	- 인덱스로 배열 요소에 빠르게 접근할 수 있음 - 특정 요소 탐색, 요소 삽입/삭제 시 느림
자바스크립트의 배열	- 해시 테이블로 구현된 객체이므로, 인덱스로 배열 요소에 접근 시 느림. - 특정 요소 탐색, 요소 삽입/삭제 시 빠름

 

자바스크립트의 배열은...

요소를 위한 각 메모리 공간은 동일한 크기를 갖지 않아도 되며, 요소가 연속적이지 않을 수도 있다.

→ 희소 배열(sparse array)

 

동일한 크기의 메모리 공간을 갖고 요소가 연속적으로 나열된 배열

→ 밀집 배열(dense array)

 

당연히 희소 배열보다 밀집 배열이 성능이 좋고 빠르며, 희소 배열은 메모리 낭비가 심하다.