[JS Deep Dive] 27장 - 배열 (1)

 

1. 배열이란?

여러 개의 값을 순차적으로 나열한 자료구조

 

2. 배열의 특징

• 요소 : 배열이 가지고 있는 값 -> 자바스크립트의 모든 값(원시값, 객체, 함수, 배열 등) 은 배열의 요소가 될 수 있다. 
• 인덱스 : 배열에서 자신의 위치를 나타내는 값 -> 배열의 요소에 접근할 때 사용한다.
• length 프로퍼티 : 배열은 요소의 개수, 즉 배열의 길이를 나타내는 Length 프로퍼티를 가진다. 
• 배열은 '객체'타입이다.

const arr = ['hi','bye','long']

arr[0] // 'hi'
arr.length //3

//대괄호 내에 요소의 인덱스 지정 
//인덱스는 0부터 시작

 

순서와 Length 프로퍼티 를 가지고 있기 때문에
순차적 요소 접근, 역순 접근, 특정 위치부터 접근할수도 있다. 

 

3. 배열의 생성

• 생성자 함수는 Array, 프로토타입객체는 Array.prototype 이다. 

3-1. 배열리터럴

• 객체리터럴과 달리 프로퍼티 키가 없고 값만 존재

//배열리터럴
const a = [];
const b = [1, 2, 3];

 

배열 리터럴 내부에서 Spread Syntax(스프레드 문법)을 사용하여 기존의 배열을 활용한 새로운 배열을 생성할 수 있다.

const a=['hi','bye','long'];
const b=['my','love','you'];

const c = [...a,...b];
//[ 'hi', 'bye', 'long', 'my', 'love', 'you' ]

 

요소를 하나도 추가하지 않으면 배열의 길이, 즉 Length 프로퍼티 값이 0인 빈 배열이 된다.

const arr =[];
console.log(arr.length);
//0

 

배열 리터럴에 요소를 생략하면 희소 배열이 됨

const arr =[1, , 3];
console.log(arr); //[1,empty,3]
console.log(arr[1]) //undefined

 

 

3-2. Array 생성자 함수

const a = new Array();
console.log(a);

//[ <10 empty items> ]

 

new 연산자를 사용하지 않아도 동일하게 동작

const b = Array(1, 2, 3); // [1, 2, 3]

 

• 최대 갯수를 벗어나면 RangeError 가 발생
• 전달된 인수가 음수이면 에러 발생
• 전달된 인수가 없으면 빈 배열 생성 = (배열 리터럴의 [])

숫자가 아닌경우 인수를 요소로 갖는 배열 생성

new Array({});//[{}]

3-3. Array.of 메서드로 생성

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

-array 생성자 함수와의 차이점은 인수가 1개일때에도 해당 요소를 가지는 배열을 생성함

const b = Array.of(10); //[ 10 ]
const c = new Array(10); //[ <10 empty items> ]

 

3-4. Array.from 메서드로 생성

유사 배열 객체(array-like objects) 또는 이터러블을 인수로 전달받아 배열을 생성

const c = Array.from('abc'); 
// ['a', 'b', 'c']

const d = Array.from({length:2,0:'a',1:'b'}) //['a','b']
// 유사배열객체를 반환하여 배열 생성

 

 

Array.from

-첫번째 인자 :배열로 만들 이터러블한 객체

-두번째 인자: 생성한 배열의 모든 원소에 대해 수행할 맵핑 함수

즉 두번째 인수로 전달한 콜백 함수를 통해 값을 만들면서 요소를 채울 수 있음

 

const a = 'Hello World';
const b = Array.from(a, v => v.toLowerCase()); // ['h', 'e', 'l', 'l', 'o', ' ', 'w', 'o', 'r', 'l', 'd']

 

// 맵핑 함수의 첫 번째 인자 언더스코어(_) 는 특별한 인자가 아니라,
// 불필요한 인자의 공간을 채우기 위한 용도

const arr = Array.from(Array(10), (_, index) => index + 1);

console.log(arr);

/*
[
  1, 2, 3, 4,  5,
  6, 7, 8, 9, 10
]
*/

 

유사배열 객체
마치 배열처럼 인덱스로 프로퍼티값에 접근 o,
length 프로퍼티를 가지느느 객체
-마치 배열처럼 for 문으로 순회가능

const arrLike = {
	'0':'apple',
    '1':'banana',
    '2':'orange',
    length:3
};

 

 

---

 

4. 밀집배열/희소배열

 

-밀집배열 (dense array) 

• 일반적인 자료구조에서 말하는 배열
• 동일한 크기의 메모리 공간이, 하나의 데이터타입으로 통일되어 있으며, 빈틈없이 연속적으로 나열되어 있다.
• 따라서 인덱스를 통해 단 한번의 연산으로 임의의요소에 접근 할 수 있다.
• 이는 매우 효율적이고 고속으로 동작한다.
• => 임의접근(random access), 시간복잡도O(1)
• 하지만 특정 요소를 검색하거나 삽입, 삭제하는 경우에는 효율적이지 않음(왜냐면 배열에 요소를 삭제하거나 삽입하면 연속적으로 유지하기 위해서 요소를 이동시켜야 하기 때문이다.)

 

 

 

-희소배열 (sparse array)

• 배열의 요소를 위한 각각의 메모리 공간은 동일한 크기를 갖지 않아도 되며, 연속적으로 이어져 있지 않을수도있다.
• 배열의 요소가 연속적으로 이어져 있지 않은 배열
• 정렬되지 않은 배열에서 특정한 요소를 검색하는 경우 배열의 모든 요소를 처음부터 특정 요소를 찾을 때까지 차례대로 검색해야한
• => 선형검색(linear search), 시간복잡도O(n)
• 특정 요소를 검색하거나 삽입, 삭제하는 경우에는 일반적인 의미의 배열보다 효율적이기도 하다. 

즉 자바스크립트 배열은 해시테이블로 구현된 객체이므로
인덱스로 배열 요소에 접근하는 경우에는 일반적인 배열보다 느리지만
특정 요소를 검색하거나 요소를 삽입, 삭제하는 경우에는 일반적인 배열보다 빠르다.

자바스크립트는 희소배열을 문법적으로 허용한다.

 

📌 어쨌든 배열을 생성할 경우에 희소배열을 생성하지 않도록 주의하자

배열에는 같은 타입의 요소를 연속적으로 위치시키는 것이 최선

 

5. length 프로퍼티

(1) 빈 배열일 경우 0, 아닐 경우 가장 큰 인덱스+1

[].length //0
[1,2,3].length //3 (0부터 시작이니까)

 

(2) 배열에 요소를 추가하거나 삭제하면 자동 갱신

=> 배열의 길이를 바탕으로 결정되지만 임의의 숫자값을 명시적으로 할당할 수 있음

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

arr.push(4)//요소추가
console.log(arr.length) //4 
//자동갱신됨

 

 

(3) 만약 현재 length 프로퍼티의 값보다 작은 숫자값을할당하면 길이가 줄어듬

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

//1

 

(4) 그렇다고 큰 숫자값을 할당한다고 해서 길이가 늘어나지는 않음 => 프로퍼티의 값만 변경됨

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

//[ 1, 2, 3, <2 empty items> ]

 

=> 이렇게 되면 실제 배열에는 아무런 변함이 없다.

=> 값 없이 비어있는 요소를 위해 메모리 공간을 확보하지 않으며 빈 요소를 생성하지도않는다.

 

 

6. 배열 요소의 추가와 갱신,삭제

• 이미 존재하는 요소에 값을 재할당하면 요소값이 갱신됨
• 인덱스로 요소에 접근하여 명시적으로 값을 할당하지 않는 요소는 생성되지 않음
• 만약 정수 이외의 값을 인덱스처럼 사용하면 요소가 생성되는 것이 아니라 프로퍼티가 생성됨
• 이때 추가된 프로퍼티는 length 프로퍼티 값에 영향 주지 않음

const arr = [];

//요소추가
arr[0] = 1;
arr['1']=2;

//[ 1, 2 ]

//프로퍼티 추가
arr['foo'] =3;
arr.bar = 4;

/// [1,2,foo:3,bar:4]

 

• 삭제할때는 배열이 객체이기 때문에 delete 연산자 사용가능

const arr = [1,2,3];
delete arr[1];
console.log(arr);

//[1,empty,3]

 

->> 이때 배열은 희소배열이 되며 length 프로퍼티 값은 변하지 않음

따라서 안 만드는게 조음...

 

Array.prototype.splice 

:희소배열을 만들지 않으면서 특정 요소를 완전히 삭제 할 수 있음

const arr = [1,2,3];
arr.splice(1,1);
console.log(arr); 

//[1,3]

console.log(arr.length) //2
//length 프로퍼티 자동 갱신