자바스크립트의 배열

배열은 자료구조의 일종입니다.

 

자료구조란?

 - 데이터를 담아내는 방식들

 

자료구조에는 여러 가지가 있겠지만

 

배열은 선형구조로 이루어진 메모리 공간들입니다.

 

배열의 구조

배열은 0부터 시작해서 사용자가 설정한 숫자 n-1 만큼의 공간을 가지게 됩니다.

 

위 그림에서 보면 배열 안에는 여러 가지 타입의 데이터들이 들어있습니다.

 

그 이유는 자바스크립트에서는 런타임 시에 데이터를 할당합니다.

 

그래서 어떤 값을 배열에 넣어도 동적으로 타입에 맞춰서 메모리를 할당하기 때문에 위와 같은

 

형태로 배열을 담을 수도 있습니다.

 

하지만 배열은 같은 타입의 데이터를 담아서 순서대로 정렬하거나 관리하는 것이 큰 목적이기 때문에

 

타입을 한 가지만 정해서 배열에 담는 것이 좋습니다.

 

 

그림에서 ref와 function 있습니다.

 

ref는 객체의 주소를 뜻하며 function은 말 그대로 함수를 뜻합니다.

 

객체는 배열에 저장될 때 주소가 저장되고 

 

함수는 함수 자체가 저장이 됩니다. 자바스크립트에서 함수도 객체이기 때문에 가능합니다.

 

---

1. 배열의 선언

 

선언하는 방식에는 2가지가 있습니다.

 

 1) const arr1 = [1 , 2];

 2) const arr2 = new Array();

 

2. 배열의 접근

 

  arr1[1] // 2가 담겨있습니다.

 

  배열 전체에 접근하기

 

for문을 이용한 배열 전체 접근

for문을 사용하여 배열의 크기만큼 반복하여 배열의 값들에 접근 할 수 있습니다.

 

더 간단한 방법으로는 for .. of 을 사용하여

 

for .. of 를 이용한 배열 전체 접근

위 그림과 같이 해당 배열의 값들에 접근을 할 수 있습니다.

 

추가적으로 배열의 API인 foreach를 사용하여 여러 가지 정보를 받아볼 수도 있습니다.

 

foreach 를 이용한 배열 전체 접근

3. 배열에 요소 추가, 삭제, 복사

 

배열의 API들을 사용하여 쉽게 추가, 삭제, 복사를 할 수가 있습니다.

 

push 

 

먼저 추가는 push API를 이용하여 추가할 수 있습니다.

 

push를 이용한 요소 추가

 

pop 

 

다음은 요소를 삭제하는 pop API입니다.

 

pop을 이용한 요소 삭제

 

pop을 이용하게 되면 맨뒤에 요소가 삭제되는 것을 볼 수 있습니다.

 

 

 

unshift , shift

 

지금까지 요소의 추가와 삭제를 보면 맨뒤에서 추가되고 삭제되고 있습니다.

 

그렇다면 앞에서 추가와 삭제가 가능할까요?

 

unshitf와 shift를 이용한 요소 추가 제거

unshift와 shift를 이용하여

 

unshift는 맨 앞의 요소를 추가하게 되고

 

shift는 맨 앞의 요소를 삭제할 수 있습니다.

 

하지만

unshift의 동작

위 그림은 unshift의 동작 과정입니다.

 

shift도 마찬가지로 맨 앞의 데이터를 삭제 후 뒤에서 한 칸씩 당긴 후 마지막 공간을 지워주는 작업이 이루어집니다.

 

이렇듯 unshift와 shift는 앞에서부터 채우거나 비워줘야 하기 때문에

 

위 그림처럼 공간을 새로운 공간을 추가하고 원래 있던 데이터들을 한 칸씩 뒤로 미루는 작업이 진행되기 때문에

 

pop과 push보다 느린 처리속도를 가지고 있습니다.

 

 

 

splice

 

지정된 위치의 요소를 삭제

 

앞에서는 간단하게 앞에서부터 혹은 뒤에서부터 배열을 관리했습니다.

 

그러면 사용자가 원하는 위치에서 추가 및 삭제도 가능할까요?

 

splice를 이용한 배열의 요소 삭제

splice를 이용하면 가능합니다.

 

위 그림은 splice에  2를 인자 값으로 넘겨 삭제를 하였습니다.

 

그러자 인덱스 번호가 2번인 배 부터 배열의 끝 귤까지 삭제가 되었습니다.

 

 

만약에  배열의 데이터중 바나나만 지우고 싶다면 어떻게 해야 할까요?

 

배열의 데이터중 바나나만 삭제

splice의 인자 값을 2개를 보내게 되면

 

첫 번째 인자 값은 내가 요소를 추가하고 싶거나 삭제하고 싶은 위치를 표시하게 되고

 

두 번째 인자 값은 첫 번째 인자 값에서부터 몇 개를 삭제하고 싶은지를 결정할 수 있습니다.

 

 

 

그럼 이제 삭제가 아닌 추가를 해보겠습니다.

 

splice를 이용한 추가

 

첫 번째 인자로 원하는 위치인 바나나를 선택하고 

 

두 번째 인자를 0을 줘서 하나도 지우지 않게 하고 

 

추가하고 싶은 데이터들인 감과 복숭아를 넣어 배열에 추가하였습니다.

 

---

 

지금까지 배열 안의 요소를 추가하고 삭제하였습니다.

 

위의 예제들은 원본의 배열 자체가 바뀌게 때문에 문제가 발생할 수 도 있습니다.

 

그래서 이번에는 복사를 하는 방법을 알아보겠습니다.

 

방법에는 여러 가지가 있겠지만 

 

간단하게 배열의 API인 concat을 이용하면 배열을 복사할 수 있습니다.

 

concat을 이용한 배열 복사

fruits 배열을 pop을 이용하여 귤을 삭제하였지만

 

newFruits의 배열에 귤은 사라지지 않았습니다.

 

그렇다면 concat을 사용하지 않는다면 어떻게 될까요?

 

fruits 자체를 넣어준뒤 삭제

위 그림처럼 fruits 자체를 넣어주게 되면 

 

배열을 복사해서 새로운 배열을 할당시키는 것이 아닌

 

fruits가 가지고 있는 주소를 복사하여 newFruits에 넣게 됩니다.

 

그렇기 때문에 두 배열은 같은 배열의 공간의 주소를 지니고 있으며 같은 곳을 가리키기 때문에

 

하나를 지워도 같이 지워는 현상이 발생합니다.

 

 

추가적으로,

 

concat은 인자로 배열을 넘겨 두 배열을 합쳐서 리턴합니다.

 

concat에 인자값으로 배열을 넘겨 합쳐진 배열 return

 

---

 

마지막으로 배열을 검색하는 방법을 살펴보겠습니다.

 

해당 요소가 있는지 없는지 검색하는 APIs

indexOf는 해당 배열에 값이 존재하는지 확인하여 존재한다면 맨 앞에서부터 검색하여 처음으로 찾은

 

위치의 인덱스를 리턴합니다.

 

만약 해당 값이 존재하지 않는다면 -1을 return 하게 됩니다.

 

 

includes는 배열에 값이 존재하면 true를 return 하게 되고 그렇지 않다면 false를 리턴합니다.

 

 

lastIndexOf는 뒤에서부터 검색하여 값이 일치하는 위치의 인덱스 번호를 return 하게 됩니다.