자바스크립트 딥 다이브 27장 배열 part-1

houndhollis·2024년 4월 29일
0

일본갔다 와서 바로 적을려는 나는 훌룡한거 같다

배열이란?

배열은 여래 개의 값을 순차적으로 나열한 자료구조다. 배열은 사용 빈도가 매우 높은 가장 기본적인 자료구조다.

자바스크립트는 배열을 다루기 위한 유용한 메서드를 다수 제공한다. 배열은 사용 빈도가 높으므로 배열 메서드를 능숙하게 다룰 수 있다면 코딩에 매우 도움이 된다.

const arr = ['apple', 'banana', 'orange'];

배열이 가지고 있는 값을 요소라고 부른다.

즉 원시 값은 물론 객체, 함수, 배열 등 자바스크립트 에서 값으로 인정하는 모든 것은 배열의 요소가 될 수 있다.

배열에서 자신의 위치를 나타내는 0 이상의 정수인 인덱스를 갖는다. 인덱스는 배열의 요소에 접근할 때 사용한다. 대부분의 프로그래밍 언에서 인덱스는 0부터 시작한다.

arr[0] // 'apple'
arr[2] // 'orange'

이런식으로 대괄호 내에 접근하고 싶은 요소의 인덱스로 뽑을수 있다.

배열은 인덱스와 length 프로퍼티를 가지고 있다. 그래서 for문을 돌릴수가 있다.

배열은 객체지만 일반 객체와는 구별되는 독특한 특징이 있다.
가장 명확한 차이는 값의 순서와 length 프로퍼티 이다. 인덱스로 표현되는 값의 순서와 length 프로퍼티를 갖는 배열은 반복문을 통해 순차적으로 값에 접근하기 적합한 자료구조다.


자바스크립트 배열은 배열이 아니다.

자료구조에서 말하는 배열은 동일한 크기의 메모리 공간이 빈틈없이 연속적으로 나열된 자료구조를 말한다. 이러한 배열을 밀집배열 이라고 한다.

이처럼 배열은 인덱스를 통해 효율적으로 요소에 접근할 수 있다는 장점이 있다. 하지만 정렬되지 않은 배열에서 특정한 요소를 검색하는 경우 배열의 모든 요소를 처음부터 특정 요소를 발견할 때까지 차례대로 검색 해야 한다.

// 선형 검색을 통해 배열에 특정 요소가 있는지 확인
function linearSearch(array, target) {
	const length = array.length;
  	for(let i = 0; i < length; i++) {
    	if (array[i] === target) return i;
    }
  
  	return -1;
}

console.log(linearSearch([1,2,3,4,5,6], 3)); // 2
console.log(linearSearch([1,2,3,4,5,6], 0)); // -1

자바스크립트의 배열은 지금까지 살펴본 자료구조에서 말하는 일반적인 의미의 배열과 다르다, 즉 배열의 요소를 위한 각각의 메모리 공간은 동일한 크기를 갖지않아도 되며, 연속적으로 이어져 있지 않을 수도 있다.

-> 배열이 연속적으로 이어져 있지 않는 배열을 희소배열 이라고 한다.

자바스크립트의 배열은 일반적인 배열의 동작을 흉내 낸 특수한 객체다.

  • 일반 배열: 인덱스로 요소에 빠르게 접근할 수 있다. 하지만 요소를 삽입 또는 삭제 하는 경우에는 효율적이지 않다.
  • 자바스크립트 배열은 해시 테이블로 구현된 객체이므로 인덱스로 요소에 접근하는 경우 배열보다 성능적인 면에서 느릴수 밖에 없는 구조적인 단점이 있다. 하지만 요소를 삽입 또는 삭제하는 경우에는 일반적인 배열보다 빠른 성능을 기대할 수 있다.

대부분의 모던 자바스크립트 엔진은 배열을 일반 객체와 구별하여 좀 더 배열처럼 동작하도록 최적화하여 구현했다. 실제로 일반 객체보다 배열이 약 2배 정도 빠르다는 것을 알 수 있다.


length 프로퍼티와 희소 배열

length 프로퍼티는 요소의 개수, 즉 배열의 길이를 나타내는 0 이상의 정수를 값으로 갖는다. length 프로퍼티의 값은 빈 배열일 경우0이며, 빈 배열이 아닐 경우 가장 큰 인덱스에 1을 더한 것과 같다.

[].length // 0
[1, 2, 3].length // 3
const arr = [1,2,3];
console.log(arr.length); // 3

arr.push(4)
console.log(arr.length); // 4

arr.pop();
console.log(arr.length); // 3

// 이건 신기 할꺼같다.

arr.length = 3;
console.log(arr); // [1,2,3]
// 줄어든 것을 확인할 수 있다.

그렇다고 없는 length 1인 배열 길이에 3을 넣는다고 빈자리가 채워지진 않는다.

// 희소 배열
const sparse = [, 2, , 4];
console.log(sparse.length); // 4
console.log(sparse); // [empty, 2, empty, 4]

일반적인 배열의 length는 배열 요소의 개수, 즉 배열의 길이와 언제나 일치한다. 하지만 희소 배열은 length 와 배열 요소의 개수가 일치하지 않는다. 희소 배열의 length 는 희소 배열의 실제 요소 개수보다 언제나 크다.


배열 생성

객체와 마찬가지로 배열도 다양한 생성 방식이 있다. 가장 일반적이고 간편한 배열 생성 방식은 배열 리터럴을 사용하는 것이다.

const arr = [1,2,3];

이런식 선언이 가장 간편하다.

Array 생성자 함수

Object 생성자 함수를 통해 객체를 생성할 수 있듯이 Array 생성자 함수를 통해 배열을 생성할 수도 있다.
Array 생성자 함수는 전달된 인수의 개수에 따라 다르게 동작하므로 주의가 필요하다.

  • 전달된 인수가 1개이고 숫자인 경우 length 프로퍼티 값이 인수인 배열을 생성한다.
const arr = new Array(10);

console.log(arr); // [empty * 10]
console.log(arr.length); // 10

이때 생성된 배열은 희소 배열이다. length 프로퍼티 값은 0이 아니지만 실제로 배열의 요소는 존재하지 않는다.

오늘 조금 피곤하고 집중이 안되어서 여기까지..! part 2 금방 올리기로...!

profile
한 줄 소개

0개의 댓글