27-1 / 배열 / Array Property, Method

Property

배열은 사실 인덱스를 나타내는 문자열을 프로퍼티 키로 갖는 객체다.

.length

length 프로퍼티는 요소의 개수 즉 배열의 길이(가장 큰 인덱스에 1을 더한값)를 정수 값으로 갖는다.
length 프로퍼티에 실제 길이보다 작은 수를 할당할 경우 배열의 길이가 줄어든다.
실제 길이보다 큰 수를 할당할 경우 '희소 배열'이 생성된다.
+) 희소배열:
배열의 요소 일부가 비어 있는 배열.

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

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

Method

메소드는 원본 배열을 직접 변경하는 메소드, 변경하지 않고 새로운 배열을 생성하여 반환하는 메소드 두가지가 있다.

Array.of()

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

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

Arrya.from()

Es6에서 도입된 메소드. 유사 배열 객체 또는 이터러블 객체를 인수로 전달받아 배열로 변환하여 반환한다. 두번째 인수로 전달한 콜백 함수를 통해 값을 만들면서 요소를 채울 수 있다 (두번째 인수로 전달한 콜백 함수에 첫번째 인수에 의해 생성된 배열의 요소값과 인덱스를 순차적을 전달하면서 호출하고, 반환값으로 구성된 배열을 반환한다)
+) 유사 배열 객체 :
마치 배열처럼 인덱스로 프로퍼티 값에 접근할 수 있고 lenght 프로퍼티를 갖는 객체를 말한다.
+) 이터러블 객체 :
Array, String, Map, Set, Dom컬렉션, arguments 등이 있다.

Array.from({0:"a",1:"b",length:2}) // 유사배열객체, ["a","b"]
Arry.from("Hello") // 이터러블객체, ['H','e','l','l','o']

Array.from({length:3},(_,i)=>i) // [0,1,2]

Array.isArray()

전달된 인수가 배열이면 true, 배열이 아니면 false를 반환한다.

Array.prototype.indexOf()

원본 배열에서 인수로 전달된 요소를 검색하여 인덱스를 반환한다.
이때, 중복되는 요소가 여러개 있다면 첫번째로 검색된 요소의 인덱스를 반환한다. 요소가 존재하지 않으면 -1을 반환한다. (indexOf()보다 includes()를 사용하는것을 추천)

const arr = [1,2,3,4]
arr.indexOf(2); // 1

Array.prototype.includes()

배열 내에 특정 요소가 포함되어 있는지 확인하여 true 또는 false를 반환한다.
첫번째 인수로 검색할 대상을 지정한다. 두번째로 인수로 검색을 시작할 인덱스를 전달할 수 있으며 생략할 경우 디폴트값은 0이다. 두번째 인수에 음수를 전달하면 lenght+index값을 검색 시작 인덱스로 설정한다.

const arr = [1,2,3]

//배열에 요소 1일 포함되어 있는지 인덱스 1부터 확인한다.
arr.includes(1,1) // false 
//배열에 요소 3이 포함되어 있는지 인덱스 2 (arr.legnth -1)부터 확인한다.
arr.include(3,-1) // true

Array.prototype.push()

인수로 전달받은 모든 값을 원본 배열의 마지막 요소로 추가한다. (추가할 요소가 하나뿐이라면 메소드를 사용하지 않고 lenght프로퍼티를 이용하여 마지막 요소에 직접 추가하자). 성능면에서 좋지 않아 스프레드 문법을 사용하는 방법을 추천한다.
+) 스프레드 문법 :

const arr = [1,2];
const newArr = [...arr,3]; // [1,2,3]

Array.prototype.pop()

마지막 요소를 제거하고 제거한 요소를 반환한다. (원본 배열을 직접 변경한다.)

! push와 pop메소드로 스택 자료구조를 구현할 수 있다

Array.prototype.unshift()

인수로 전달받은 모든 값을 원본 배열의 선두에 요소로 추가한다. 마찬가지로 스프레드 문법을 사용하는 방법을 추천한다.

const arr = [1,2];
const newArr = [3, ...arr]; // [3,1,2]

Array.prototype.shift()

첫번째 요소를 제거하고 제거한 요소를 반환한다. (원본 배열을 직접 변경한다.)

! shift와 unshift메소드로 큐 자료구조를 구현할 수 있다

Array.prototype.concat()

인수로 전달된 값들(배열 또는 원시값)을 원본 배열의 마지막 요소로 추가한 새로운 배열을 반환한다. 전달값이 배열인 경우 배열을 해체하여 새로운 배열의 요소로 추가한다. (원본 배열을 변경하지 않는다)
push와 unshift메소드는 concat메소드로 대체할 수 있다. 인수로 전달받은 값이 배열인 경우 push와 unshift는 배열을 그대로 원본 배열의 요소로 추가한다는 차이점이 있다. (원본 배열을 변경하지 않는다)
하지만.. 마찬가지로 스프레드 문법을 사용하는것을 추천한다.

const arr1=[1,2];
const arr2=[3,4];
let result = arr1.concat(arr2); // [1,2,3,4]

Array.prototype.splice()

원본 중간에 있는 요소를 추가하거나 제거하는 경우 사용한다.
3개의 매개변수가 있으며 원본 배열을 직접 변경한다.
start : 요소를 제거하기 시작할 인덱스다. start만 지정하면 start부터 모든 요소를 제거한다. 음수인 겨우 끝에서의 인덱스를 나타낸다. (-1이면 마지막요소)
deleteCount : start부터 제거할 요소의 개수.
items : 제거한 위치에 삽입할 요소들의 목록이다.

const arr = [1,2,3,4];
// 인덱스1부터 2개의 요소를 제거하고 그 자리에 20,30을 삽입한다.
const result = arr.splice(1,2,20,30); 
console.log(result); // 제거한 요소가 배열로 반환된다. [2,3]
console.log(arr); // 원본 배열을 직접 변경한다. [1,20,30,4]

indexOf와 fileter메서드와 함께 사용할 수 있다.

Array.prototype.slice()

인수로 전달된 범위의 요소들을 복사하여 배열로 반환한다. (원본배열은 변경x)
start : 복사를 시작할 인덱스다.
end : 복사를 종료할 이덱스다.(이 인덱스에 해당하는 요소는 복사되지 않는다) 생략할 경우 기본값은 length프로퍼티 값이다.
인수를 모두 생략하면 원본 배열의 복사본을 생성하여 반환한다.

이때 생성된 복사본은 얕은 복사를 통해 생성된다.
slice메서드가 복사본을 생성하는것을 이용하여 유사 배열 객체를 배열로 반환할 수 있다.
+) 얕은 복사, 깊은 복사 :
객체를 프로퍼티 값으로 갖는 객체의 경우 얕은복사는 한 단계까지만 복사, 깊은 복사는 객체이 중첩되어 있는 객체까지 모두 복사하는것을 말한다.

const arr = [1,2,3]
arr.slice(0,1) // [1]
arr.slice(-1) // [3]
arr.slice(-2) // [2,3]

Array.prototype.join()

원본 배열의 모든 요소를 문자열로 변환한 후, 인수로 전달받은 문자열 즉 구분자로 문자열을 반환한다. 구분자는 생략 가능하며 기본 구분자는 콤마(',')다.

const arr = [1,2,3,4]
arr.join(); // '1,2,3,4';
arr.join(''); // '1234'

Array.prototype.reverse()

원본 배열의 순서를 반대로 뒤집는다. 반환값은 변경된 배열이다. (원본 배열이 변경된다)

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

Array.prototype.fill()

인수로 전달받은 값을 배열의 처음부터 끝까지 요소로 채운다. (원본 배열이 변경된다) 두번째 인수로 채우기를 시작할 인덱스를 전달할 수 있다. 세번째 인수로 채우기를 멈출 인덱스를 전달할 수 있다.

const arr = [1,2,3,4,5]
arr.fill(0,1,3); // [1,0,0,4,5]

Array.from()메서드를 사용하면 하나의 값만으로 채우는 것이 아니라 요소값을 만들면서 배열을 채울 수 있다.

//인수로 전달받은 정수만큼 요소를 생성하고 0부터 1씩 증가하면서 채운다
const sequences = (length = 0) => Array.from({length},(_,i) => i);
console.log(sequences(3)); //[0,1,2]

Array.prototype.flat()

ES10에서 도입된 메서드. 인수로 전달한 깊이만큼 재귀적으로 배열을 평탄화한다.
중첩배열을 평탕화할 깊이를 인수로 전달할 수 있다. 생략할 경우 기본값은 1이며 인수로 Infinity를 전달하면 중첩 배열 모두를 평탄화한다.

[1,[2,[3,[4,]]]].flat(); // [1,2,[3,[4,]]]
[1,[2,[3,[4,]]]].flat(2); // [1,2,3,[4]]
[1,[2,[3,[4,]]]].flat().flat(); // [1,2,3,[4]]
[1,[2,[3,[4,]]]].flat(Infinity); [1,2,3,4]