[ javascript ] 배열 개념 정리

배열이란?

• 배열은 여러개의 값을 순차적으로 나열한 자료구조이다.

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

• 배열이 가지고 있는 값을 요소라고 부른다.
• 배열의 요소는 배열에서 자신의 위치를 나타내는 0이상의 정수인 인덱스를 갖는다.
• 요소에 접근할 때에는 대괄호 표기법을 사용한다. ex) arr[0]
• 배열은 요소의 개수, 배열의 길이를 나타내는 length 프로퍼티를 갖는다. ex)arr.length
• 자바스크립트에서 배열이라는 타입은 존재하지 않는다. 배열은 객체 타입이다. ex ) typeof arr; → object
• 배열은 객체지만 일반 객체와 구별되는 독특한 특징이 있다.

구분	객체	배열
구조	프로퍼티 키와 프로퍼티 값	인덱스와 요소
값의 참조	프로퍼티 키	인덱스
값의 순서	X	O
length 프로퍼티	X	O

배열의 장점은 처음부터 순차적으로 요소에 접근할 수도 있고, 마지막부터 역순으로 요소에 접근할 수도 있으며, 특정 위치부터 순차적으로 요소에 접근 할 수 있다. 이는 배열이 인덱스, 즉 값의 순서와 length프로퍼티를 갖기 때문이다.

---

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

• 자료구조에서의 배열은 동일한 크기의 메모리 공간이 빈틈없이 연속적으로 나열된 자료구조를 말한다.(밀집배열) / 자바스크립트에서의 배열은 배열의 요소를위한 각각의 메모리 공간은 동일한 크기를 갖지 않아도 되며, 연속적으로 이어져 있지 않을수도 있다. (희소배열)
• 자바스크립트에서의 배열은 일반적인 배열의 동작을 흉내 낸 특수한 객체이다.
• 자바스크립트 배열은 인덱스로 배열 요소에 접근하는 경우에는 일반적인 배열보다 느리지만, 요소를 삽입 또는 삭제 하는 경우에는 일반적인 배열보다 빠르다.

---

length 프로퍼티와 희소 배열

• length 프로퍼티는 요소의 개수, 즉 배열의 길이를 나타내는 0이상의 정수를 값으로 갖는다.
• 빈배열일 경우 0, 빈 배열이 아닌 경우 인덱스에 1을 더한것과 같다.
• length 프로퍼티의 값은 배열에 요소를 추가하거나 삭제하면 자동 갱신된다.
• length 프로퍼티 값보다 작은 숫자 값을 할당하면 배열의 길이가 줄어든다. (p.498 , 예제 27-14)
• length의 프로퍼티 값보다 큰 숫자값을 할당하는 경우 length의 프로퍼티 값은 변경이 되지만, 배열의 길이가 늘어나지 않는다.
• 희소 배열은 length와 배열 요소의 개수가 일치하지 않는다. 희소배열의 length는 희소 배열의 실제 요소 개수보다 언제나 크다.

 💡 배열을 생성할 경우에 희소배열을 생성하지 않도록 주의하자, 배열에는 같은 타입의 요소를 연속적으로 위치시키는것이 최선이다.

---

배열 생성

1. 배열 리터럴

배열 리터럴은 0개 이상의 요소를 쉼표로 구분하여 대괄호([ ])로 묶는다.

배열 리터럴에 요소를 하나도 추가하지 않으면 배열의 길이가 0인 빈 배열이 된다.

배열 리터럴에 요소를 생략하면 희소배열이 된다.

ex ) const arr = [1,2,3]; //배열생성
ex ) const arr = [] ; //빈매열
ex ) const arr = [1 , , 3] // 희소배열

2. Array 생성자 함수

• Array 생성자 함수를 통해 배열을 생성 할 수 있다.
• 전달된 인수가 1개이고 숫자인 경우 length프로퍼티 값이 인수인 배열을 생성한다. 이때 생성된 배열은 희소배열이다.
• 배열은 요소를 최대 0 ~ 4,294,967,295개 가질 수 있다.
• 전달된 인수가 없는 경우 빈 배열을 생성한다.
• 전달된 인수가 2개 이상이거나 숫자가 아닌 경우 인수를 요소로 갖는 배열을 생성한다.

const arr = new Array(10);
new Array(); // -> []
new Array(1,2,3); // [1,2,3]

Array.of

 

ES6에서 도입된 Array.of 메서드는 전달된 인수를 요소로 갖는 배열을 생성한다.

전달된 인수가 1개이고 숫자더라도 인수를 요소로 갖는 배열을 생성한다.

Array.of(1); // -> [1]
Array.of(1,2); // -> [1,2]

Array.from

 

Array.from 메서드는 유사 배열객체 또는 이터러블 객체를 인수로 전달받아 배열로 변환하여 반환한다.

Array.from({length : 2 , 0 : 'a', 1 : 'b} ); // -> ['a','b']
Array.from("Hello"); // -> ['H','e', 'l' , 'l' , 'o']

---

배열 요소의 참조 

배열의 요소를 참조할 때에는 대괄호 표기법을 사용한다. 대괄호 안에 인덱스를 통해 잠조 할 수 있다. 인덱스는 값을 참조할 수 있다는 의미에서 객체의 프로퍼티 키와 같은 역할을 한다.

---

배열 요소의 추가와 갱신

• 배열에 요소를 동적으로 추가할 수 있다.
• 존재하지 않는 인덱스를 사용해 값을 할당하면 새로운 요소가 추가된다. 이때 length 프로퍼티 값은 자동 갱신된다.
• 인덱스는 요소의 위치를 나타내므로 반드시 0이상의 정수를 사용해야된다. 정수 이외의 값을 인덱스처럼 사용하면 length 프로퍼티 값에 영향을 주지 않는다.

---

배열 요소의 삭제 

배열은 사실 객체이기 때문에, delete연산자를 사용해 요소를 삭제 할 수 있다.

const arr = [1,2,3];

//배열의 요소 삭제
delete arr[1];
console.log(arr); // [1 , empty, 3]

// length 프로퍼티에 영향을 주지 않는다. 즉 희소배열이 된다. 
console.log(arr.length); // 3

희소배열을 만드는 delete연산자는 사용하지 않는것이 좋다.

희소배열을 만들지 않으면서 배열의 특정 요소를 완전히 삭제하려면 Array.prototype.splice 메서드를 사용한다.

array.prototype.splice(삭제를 시작할 인덱스, 삭제할 요소 수 )

const arr = [1,2,3];

//배열의 요소 삭제
arr.splice( 1 , 1); // arr[1]부터 1개의 요소를 제거
console.log(arr) , [1, 3]

// length 프로퍼티에 영향을 주지 않는다. 즉 희소배열이 된다. 
console.log(arr.length); // 3

---

배열 메서드 

• 배열에는 원본 배열(배열 메서드를 호출할 배열, 즉 배열 메서드의 구현체 내부에서 this가 가리키는 객체)을 직접 변경하는 메서드와 원본 배열을 직접 변경하지 않고 새로운 배열을 생성하여 반환하는 메서드가 있다.
• push메서드는 원본 배열을 직접 변경하지만, concat배열은 원본 배열을 직접 변경하지 않고 새로운 배열을 생성하여 반환한다. 
• 가급적 원본 배열을 직접 변경하지 않는 메서드를 사용하는 편이 좋다.

---

Array.isArray

Array.isArray 메서드는 전달된 인수가 배열이면 true, 배열이 아니면 false를 반환한다.

Array.prototype.indexOf

indexOf메서드는 원본 배열에서 인수로 전달된 요소를 검색하여 인덱스를 반환한다.

Array.prototype.push

push 메서드는 인수로 전달받은 모든 값을 원본 배열의 마지막 요소로 추가하고 변경된 length 프로퍼티 값을 반환한다. (원본을 직접 변경)

Array.prototype.pop

pop메서드는 원본 배열에서 마지막 요소를 제거하고 제거한 요소를 반환한다. ( 원본배열 직접 변경 )

💡 pop과 push메서드를 사용하면 스택을 쉽게 구현할 수 있다 ( 후입선출 LIFO - Last In First Out )

Array.prototype.unshift

인수로 전달받은 모든 값을 원본 배열의 선두에 요소로 추가하고 변경된 length 프로퍼티 값을 반환한다 ( 원본배열 직접변경 )

Array.prototype.shift

shift 메서드는 원본 배열에서 첫번째 요소를 제거하고 제거한 요소를 반환한다. (원본배열 직접변경)

💡 shift메서드와 push메서드를 사용하면 큐를 쉽게 구현 할 수 있다. 큐는 데이터를 마지막에 밀어넣고 처음 데이터, 즉 가장 먼저 밀어넣은 데이터를 먼저 꺼내는 선입선출(FIFO - First In First Out)방식의 자료구조이다.

Array.prototype.concat

concat메서드는 인수로 전달된 값들(배열 또는 원시값)을 원본 배열의 마지막 요소로 추가한 새로운 배열을 변환한다.

인수로 전달한 값이 배열인 경우 배열을 해체하여 새로운 배열의 요소로 추가한다

Array.prototype.splice

원본 배열의 중간에 요소를 추가하거나 중간에 있는 요소를 제거하는 경우 splice 메서드를 사용한다. (원본 배열 변경)

arr.splice(1,2,20,30); 👉 원본 배열의 인덱스 1부터 2개의 요소를 제거하고 그 자리에 새로운 요소 20,30을 삽입한다.

제거할 요소의 개수를 0으로 지정하면 아무런 요소도 제거하지 않고 새로운 요소들을 삽입한다.

제거한 위치에 추가할 요소들의 목록을 전달하지 않으면 원본 배열에서 지정된 요소를 제거하기만 한다.

filter 메서드를 사용하여 특정 요소를 제거할 수도 있다. 하지만 특정 요소가 중복된 경우 모두 제거된다.

Array.prototype.join

join 메서드는 원본 배열의 모든 요소를 문자열로 변환 후, 인수로 전달받은 문자열, 즉 구분자로 연곃한 문자열을 반환한다.

Array.prototype.reverse

reverse 메서드는 원본 배열의 순서를 반대로 뒤집는다.

Array.prototype.fill

인수로 전달받은 값을 배열의 처음부터 끝까지 요소로 채운다.

Array.prototype.includes

includes 메서드는 배열 내에 특정 요소가 포함되어 있는지 확인하여, true 또는 false를 반환한다.

Array.prototype.flat

flat 매서드는 인수로 전달한 깊이 만큼 재귀적으로 배열을 평탄화 한다.

---

배열 고차함수

• 고차함수는 함수를 인수로 전달받거나 함수를 반환하는 함수를 말한다.
• 고차함수는 외부 상태의 변경이나 가변 데이터를 피하고 불변성을 지향하는 함수형 프로그래밍에 기반을 두고 있다.

---

Array.prototype.sort

sort매서드는 배열의 요소를 정렬한다.

기본적으로 오름차순으로 요소를 정렬한다.

내림차순으로 요소를 정렬하려면 sort메서드를 사용하여 오름차순으로 정렬 한 후, reverse 메서드를 사용하여 요소의 순서를 뒤집으면 된다.

정렬은 유니코드 코드 포인트의 순서를 따른다.

 

Array.prototype.forEach

forEach는 for문을 대체할 수 있는 고차 함수이다.

const number = [1,2,3];
const pows = []; 

//forEach 메서드는 numbers 배열의 모든 요소를 순회하면서 콜백함수를 반복 호출한다. 
number.forEach(item => pows.push(item**2))
console.log(pow); // [1,4,9]

• arr.forEach((item, index, arr) ⇒ { … })
• 요소값, 인덱스, this의 인수(3개의 인수)를 전달한다.
• forEach 메서드는 원본 배열을 변경하지 않는다. 하지만 콜백 함수를 통해 원본 배열을 변경 할 수 있다.
• forEach의 메서드의 반환값은 undefined다.
• forEach메서드는 for문과 달리 break, continue문을 사용 할 수 없다. 다시말해, 배열의 모든 요소를 빠짐없이 모두 순회하며 중간에 순회를 중단할 수 없다.

희소 배열의 경우 존재하지 않는 요소는 순회 대상에서 제외된다. (map, filter, reduce메서드 등에서도 마찬가지이다.)

Array.prototype.map

• map 메서드는 자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복 호출한다. 그리고 콜백 함수의 반환값들로 구성된 새로운 배열을 반환한다. ( 원본 배열은 변경되지 않는다.)
• map 메서드는 콜백 함수를 호출하면서 3개(요소값, 인덱스, this)의 인수를 전달한다.

Array.prototype.filter

• filter 메서드는 자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백함수를 반복 호출한다. 그리고 콜백 함수의 반환값이 **true**인 요소로만 구성된 새로운 배열을 반환한다.
• filter 메서드가 생성하여 반환한 새로운 배열이 length 프로퍼티 값은 filter 메서드를 호출한 배열의 length 프로퍼티 값과 같거나 작다.
• filter메서드는 자신을 호출한 배열에서 특정 요소를 제거하기 위해서 사용할 수도 있다.

Array.prototype.reduce

reduce 메서드는 자신을 호출한 배열을 모든 요소를 순회하며 인수로 전달 받은 콜백 함수를 반복 호출한다. 그리고 콜백 함수의 반환값을 다음 순회시에 콜백 함수의 첫번째 인수로 전달하면서 콜백함수를 호출하여 하나의 결과값을 만들어 반환한다.

reduce 메서드를 호출할 때는 언제나 초기값을 전달하는 것이 안전하다.

Array.prototype.some

some메서드는 자신을 호출한 배열의 요소를 순회하면서 인수로 전달된 콜백함수를 호출한다. 이때 some메서드는 콜백 함수의 반환값이 단 한번이라도 참이면 true, 모두 거짓이면 false를 반환한다.

Array.prototype.every

every 메서드는 자신을 호출한 배열의 요소를 순회하면서 인수로 전달된 콜백 함수를 호출한다. 이때 every 메서드는 콜백 함수의 반환값이 모두 참이면 true, 단 한번이라도 거짓이면 false로 반환한다.

Array.prototype.find

• ES6에서 도입된 find 메서드는 자신을 호출한 배열의 요소를 순회하면서 인수로 전달된 콜백 함수를 호출하여 반환값이 true인 첫번째 요소를 반환한다.
• true인 요소가 존재하지 않는다면 undefined를 반환한다.

Array.prototype.findIndex

findIndex 메서드는 자신을 호출한 배여르이 요소를 순회하면서 인수로 전달된 콜백 함수를 호출하여 반환값이 true인 첫번째 요소의 인덱스를 반환한다.

Array.prototype.floatMap

flatMap 메서드는 map메서드를 통해 생성된 새로운 배열을 평탄화 한다. 즉 map 메서드와 float 메서드를 순차적으로 실행하는 효과가 있다.