게시 됨 업데이트 됨JS / Array15분안에 읽기 (약 2289 단어)

VanilaJS-Array

Javascript

자료구조상의 배열은 동일한 크기의 메모리공간이 빈틈없이 연속되는 자료구조를 뜻하며, 하나의 데이터타입을 가지고 있는것을 뜻하며 이는 밀접배열이라한다.

이러한 배열은 정렬되어있는 상태라면 접근하여 값을 찾는경우 매우빠르게 동작하겠지만, 그렇지 않은 경우에는 정렬시간과 값을 찾는시간이 더해져 효율적이지 못하게된다.

자바스크립트의 배열은 메모리공간이 동일한 크기를 가지지 않아도 되며, 연속되지 않을수있다. 자바스크립트에서 배열의 구조가 연속적으로 이어져 있지 않은 배열은 희소배열이라한다.

자바스크립트의 배열은 사실 객체이다.

자료구조상의 배열을 흉내낸 해시테이블 구조를 가진 객체이며, 배열 안의 요소는 element라고 불리운다.

배열은 자신의 위치를 나타내는 0 이상의 정수인 index를 가진다.

배열은 요소의 개수를 나타내는 length 프로퍼티를 가진다.

배열의 인덱스는 사실 프로퍼티키이며, 문자열이다.

“일반 객체와 배열을 구분하는 가장 명확한 차이는 index(값의 순서)와 length 프로퍼티가 있다는 점이다.”

length 프로퍼티 그리고 희소배열

length 프로퍼티는 요소의 개수 즉, 배열의 길이를 나타낸다.

빈 배열일경우에는 0이며 아닐경우 가장 큰 인덱스에 1을 더한것과 같다.

1
2
console.log([].length); // 0
console.log([1, 2, 3, 4].length); // 4

희소배열은 length프로퍼티가 배열이 가진 요소의 개수보다 크고, 일부가 비어 있는 배열을 희소 배열이라고 할수있다.

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

배열의 생성방식

  • 배열리터럴

    • 가장 기본적인 배열 생성 방식이다.
    1
    const arr = []; // 배열리터럴

  • Array 생성자함수

    • 전달된 인수가 2개 이상이거나 숫자가 아닌경우 인수를 요소로 갖는 배열이 생성된다. 이때 숫자를 넣게되면 희소배열이 만들어진다.
    • new 연산자와 함께 호출하지 않아도 Array 생성자 함수내의 new.target에 의해 생성자함수로 동작한다.
    1
    2
    3
    4
    5
    const arr1 = new Array('얍');
    console.log(arr1); // ['얍']

    const arr2 = new Array(10);
    console.log(arr2); // (10) [empty × 10]

  • Array.of( )

    • 전달된 인수가 숫자이고 1개여도 배열이 만들어진다.
    1
    2
    const arr = Array.of(1);
    console.log(arr); // [1]

  • Array.from( )

    • 유사배열객체와 이터러블을 인수로 전달받아 배열로 변환해 반환한다.
    1
    2
    3
    const foo = 'hello';
    const result = Array.from(foo);
    console.log(result); // (5) ["h", "e", "l", "l", "o"]

배열의 요소참조

배열의 요소참조는 [] 대괄호 표기법을 이용해 이루어지며, 대괄호 안에는 인덱스가 와야하며, 정수로 평가되는 표현식도 인덱스 대신 사용이 가능하다.

배열의 인덱스는 프로퍼티 키이며 존재하지 않는 프로퍼티로 객체의 프로퍼티에 접근했을경우 undefied를 반환하는것처럼 배열에서도 동일하게 작동된다.

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

배열 메서드

배열메서드는 원본배열을 변경하는 메서드, 원본배열을 변경하지 않는 메서드 두가지로 나뉜다.

사용빈도가 비교적 높고 대표적인 배열메서드를 알아보자.

Array.isArray( )

  • 인수로 전달된 값이 배열인지 아닌지를 확인하는 메서드이다.
  • 반환되는 데이터타입은 boolean이다.
1
2
3
4
5
const arr1 = [1, 2, 3];
const arr2 = {};

console.log(Array.isArray(arr1)); // true
console.log(Array.isArray(arr2)); // false

Array.prototype.indexOf( )

  • 인수로 전달된 요소를 검색해 인덱스를 반환한다.
  • 만약 중복되는 요소가 있다면 첫번째로 검색된요소의 인덱스를 반환한다.
  • 원본배열에 인수로 전달된 요소가 존재하지 않으면 -1을 반환한다.
  • 두번째 인수는 검색을 시작할 인덱스이며 생략시 처음부터 검색한다.
1
2
const arr = [1, 2, 3];
console.log(arr.indexOf(2)); // 1

Array.protorype.push( )

  • 인수로 전달받은 값을 원본배열의 마지막요소로 추가한다.
  • 반환되는 값은 원본배열의 length 프로퍼티이다.
  • 원본배열을 변환시킨다.
1
2
3
4
5
const arr = [1, 2, 3];
const result = arr.push(4);

console.log(arr); // [1, 2, 3, 4]
console.log(result); // 4

원본배열을 훼손하는 행위는 권장하지 않는다. 그렇기에 ES6에서 추가된 스프레드 문법을 활용하는것이 바람직하다.

ES6의 스프레드 문법으로 대체해서 사용하기

1
2
3
4
5
const arr = [1, 2, 3];
const result = [...arr, 4];

console.log(arr); // (3) [1, 2, 3]
console.log(result); // (4) [1, 2, 3, 4]

Array.prototype.pop( )

  • 원본 배열의 마지막요소를 제거한다
  • 제거된 요소를 반환한다.
  • 원본배열을 변환시킨다.
1
2
3
4
5
const arr = [1, 2, 3];
const result = arr.pop();

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

Array.prototype.unshift( )

  • 원본배열의 선두요소에 인수로 전달받은 값을 추가한다.
  • 반환되는 값은 원본배열의 length 프로퍼티이다.
  • 원본배열을 변환시킨다.
1
2
3
4
5
const arr = [1, 2, 3];
const result = arr.unshift(4);

console.log(arr); // (4) [4, 1, 2, 3]
console.log(result); // 4

원본배열을 훼손하는 행위는 권장하지 않는다. 그렇기에 ES6에서 추가된 스프레드 문법을 활용하는것이 바람직하다.

ES6의 스프레드 문법으로 대체해서 사용하기

1
2
3
4
5
const arr = [1, 2, 3];
const result = [4, ...arr];

console.log(arr); // (3) [1, 2, 3]
console.log(result); // (4) [4, 1, 2, 3]

Array.prototype.shift( )

  • 원본배열에서 첫번째 요소를 제거한다.
  • 제거된 요소를 반환한다.
  • 원본배열을 변환시킨다.
1
2
3
4
5
const arr = [1, 2, 3];
const result = arr.shift();

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

Array.prototype.concat( )

  • 원본배열의 마지막에 인수로 전달받은 값을 추가한다. ( 전달된 값이 배열이면 해체하여 새로운 배열의 요소로 추가한다. )
  • 변경된 새로운 배열을 반환한다.
  • 원본배열을 변환시키지 않는다.
1
2
3
4
5
const arr = [1, 2, 3];
const result = arr.concat(4);

console.log(arr); // (3) [1, 2, 3]
console.log(result); // (4) [1, 2, 3, 4]

ES6의 스프레드 문법으로 대체해서 사용하기

1
2
3
4
5
const arr = [1, 2, 3];
const result = [...arr, 4];

console.log(arr); // (3) [1, 2, 3]
console.log(result); // (4) [1, 2, 3, 4]

Array.prototype.splice( StartIndex, deleteCount, [item])

  • 원본배열의 중간에 요소를 추가 혹은 제거한다.
    • StartIndex - 원본배열의 요소를 제거하기 시작할 인덱스 ( StartIndex만 지정하면 모든 요소제거 )
    • deleteCount - 원본배열의 요소를 제거할 개수 ( 0 이면 어느것도 제거되지 않는다. )
    • item - 원본배열의 요소를 제거한 위치에 삽일할 요소들의 목록
  • 원본배열을 변환시킨다.
1
2
3
4
5
const arr = [1, 2, 3];
const result = arr.splice(1, 2, 3, 4);

console.log(arr); // (3) [1, 3, 4]
console.log(result); // (2) [2, 3]

Array.prototype.slice( StartIndex, EndIndex )

  • 인수로 전달된 범위의 요소를 복사한다.
  • 원본배열을 복사한 배열을 반환한다. ( 인수를 모두 생략하면 원본배열의 복사본을 생성해 반환한다. )
    • StartIndex - 원본배열의 복사를 시작할 인덱스 ( 음수일경우는 맨 마지막 요소에서 -n 이후의 값을 반환 )
    • EndIndex - 원본배열의 복사를 종료할 인덱스 ( 해당요소는 미포함 , 기본값은 length 프로퍼티 값 )
  • 원본배열을 변환시키지 않는다.
1
2
3
4
5
const arr = [1, 2, 3];
const result = arr.slice(1, 2);

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

Array.prototype.join( )

  • 원본배열의 모든요소를 문자열로 변환한다.
  • 인수로 전달받은 값( 구분자 )으로 연결한 문자열을 반환한다.
  • 기본 구분자는 콤마이다. ,
  • 원본배열을 변환시키지 않는다.
1
2
3
4
5
const arr = [1, 2, 3];
const result = arr.join('');

console.log(arr); // (3) [1, 2, 3]
console.log(result); // 123

Array.prototype.reverse( )

  • 원본배열의 순서를 반대로 뒤집는다.
  • 변경된 원본배열을 반환한다.
  • 원본배열을 변환시킨다.
1
2
3
4
5
const arr = [1, 2, 3];
const result = arr.reverse();

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

Array.prototype.fill( _ , StartIndex, StopIndex ) ES6

  • 인수로 전달 받은 값을 배열의 요소로 처음부터 끝까지 채운다.
    • _ - 배열을 채울 요소
    • StartIndex - 요소를 채우기 시작할 인덱스
    • StopIndex - 요소를 채우는것을 멈출인덱스 ( 해당 요소는 미포함 )
  • 원본배열을 변환시킨다.
1
2
3
4
5
const arr = new Array(10);
const result = arr.fill(1, 2, 10);

console.log(arr); // (10) [empty × 2, 1, 1, 1, 1, 1, 1, 1, 1]
console.log(result); // (10) [empty × 2, 1, 1, 1, 1, 1, 1, 1, 1]

Array.prototype.includes( SearchElement, StartIndex ) ES7

  • 원본 배열에 특정요소가 포함되어있는지 확인한다.
  • true 혹은 false를 반환한다.
    • SearchElement - 검색할 대상지정
    • StartIndex - 검색을 시작할 인덱스
1
2
3
4
5
const arr = [1, 2, 3];
const result = arr.includes(2, 1);

console.log(arr); // (3) [1, 2, 3]
console.log(result); // true

Array.prototype.flat( ) ES10

  • 인수로 전달한 깊이만큼 재귀적으로 배열을 평탄화한다.
  • 기본값은 1단계 평탄화이다.
  • Infinity를 인수로 전달하면 중첩배열을 모두 평탄화한다.
1
2
3
4
console.log([1, [2, 3, 4, 5]].flat()); // (5) [1, 2, 3, 4, 5]
console.log([1, [2, [3, 4, 5]]].flat(1)); // (5) [1, 2, 3, 4, 5]
console.log([1, [2, [3, [4, 5]]]].flat(2)); // (4) [1, 2, 3, Array(2)]
console.log([1, [2, [3, [4, [5]]]]].flat(Infinity)); // (5) [1, 2, 3, 4, 5]

VanilaJS-Array

https://dunamisyoung.github.io/2021/04/02/VanilaJS-Array/

Author

YoungSang Lee

Posted on

2021-04-02

Updated on

2021-04-06

Licensed under

#

댓글

팔로우

링크

카테고리

업데이트 소식 받기

최근 글

아카이브

태그

.sh1
API1
AWS1
Cloud Service1
CrossPlatform1
ES62
First-class Object1
Function Property1
JS2
Linux1
PasS1
RSS1
Sort1
TDD1
Technical Debt1
Technical Terms9
Terminal1
ThirdParty1
Ubuntu1
every1
filter1
find1
findIndex1
forEach1
map1
reduce1
some1
×