JavaScript (ES6) - Array 개념과 APIs

글을 작성하기에 앞서 이 게시글의 지식은 유튜브 드림코딩 by 엘리님의 동영상이 출처임을 알려드립니다.

https://www.youtube.com/watch?v=yOdAVDuHUKQ&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=8

 

 

Declaration

 

 

배열을 선언하는 방법에 대해 알아보자

 

const arr1 = new Array();

 

첫 번째로 위와 같이 new를 사용하여 배열 오브젝트를 선언하는 방식이고

 

두 번째로 더 흔하게 쓰이는 방법이 있다

 

const arr2 = [1, 2, 3, 4];

 

대괄호 안에 데이터를 삽입하여 배열을 생성할 수 있다

​

배열은 Index를 기준으로 데이터가 저장이 된다

배열의 첫 번째 Index는 0번째부터 시작하기 때문에 1이 삽입된 첫 번째 자리는 0번째 Index이다

​

 

---

 

 

Index position

 

 

인덱스를 통해 배열에 접근하는 방법을 알아보자

 

const fruits = ['apple', 'banana'];
console.log(fruits);

 

우선 fruits 배열 안에 apple 과 banana를 넣어보도록 하자

그 이후 fruits 배열을 출력하게 되면

 

(2) ["apple", "banana"]

 

이렇게 배열의 데이터가 출력이 된다 여기서 알 수 있는 것은

0번째 인덱스는 apple이고

1번째 인덱스는 banana이고

이 배열의 length는 2이다

 

 

그럼 이번에는 각 데이터의 인덱스를 통해 데이터를 출력해보도록 하자

 

console.log(fruits[0]);

 

위와 같이 배열의 이름 뒤에 대괄호 [] 안에 원하는 인덱스의 번호를 넣어주면 그 인덱스의 데이터가 출력이 된다

 

 

배열의 마지막에 있는 값을 불러오려면

 

console.log(fruits[fruits.length - 1]);

 

위와 같이 해주면 배열의 마지막 값이 출력이 된다

배열은 0번째 인덱스부터 시작하기 때문에 총 길이의 - 1을 해주면 마지막 데이터에 접근할 수 있다

 

 

---

 

 

Looping over an array

 

배열 내부에 있는 모든 값들을 출력해보자

​

첫 번째로 for 문으로 출력하는 방법이다

 

for( let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

 

설명을 하자면 우선 for 문은 괄호 () 안에 조건들이 참이면 계속 반복하게 되는 반복문이다

변수 i 가 0으로 지정되었고 fruits.length는 2이며 i 는 ruits.length 보다 작지 않을 때까지

반복한다고 생각하면 아주 간단하다

마지막의 i ++ 은 중괄호 {} 안의 내용이 끝나면 i가 1씩 증가한다는 뜻!

​

그러므로 i가 0 일 때 한번 출력하고 i 가 1 증가한다

i 가 1이 되어 한번 출력하고 i 는 2가 돼서 for 문 종료

​

간단하다 .

 

 

다음 방법은 for of 를 사용하는 것이다

 

for(let fruit of fruits) {
  console.log(fruit);
}

 

let으로 선언된 fruit 변수 안에 fruits 배열이 순차적으로 할당되면서 배열의 내용들이 출력이 된다

위에서 살펴본 for 문과 동작원리는 똑같은 것 같다

 

 

마지막으로 forEach라는 API를 사용하는 방법이다

 

fruits.forEach((fruit, index) => console.log(fruit, index));

 

forEach는 우선 콜백 함수를 인자로 받는다

첫 번째 인자인 fruit은 배열의 데이터, 두 번째 인자인 index는 배열의 index 값을 가져온다

또 array라는 인자도 가져올 수 있는데 보통 2개의 인자를 받는다고 한다

 

 

---

 

 

Add, delete, copy

 

 

배열의 삽입, 삭제, 복사를 알아보자

​

먼저 삽입 ( push )에 대해서 알아보자

 

fruits.push('strawberry', 'peach');
console.(fruits);

 

위와 같이 push를 사용하여 'strawberry'와 'peach'를 삽입하면

 

(4) ["apple", "banana", "strawberry", "peach"]

 

배열의 끝에 삽입이 되어지는 것을 확인할 수 있다!

​

이번에는 배열의 앞에 삽입을 하는 방법도 알아보도록 하자

 

fruits.unshift('strawberry', 'peach');
console.(fruits);

 

unshift를 사용하여 배열의 앞에 삽입한다 결과값을 알아보자

 

(4) ["strawberry", "peach", "apple", "banana"]

 

위와 같이 배열의 앞에 삽입된 것을 확인할 수 있다

 

 

다음은 삭제 (pop)에 대해서 알아보자

 

fruits.pop();
console.log(fruits);

 

위와 같이 pop을 사용하면 배열의 끝에 있는 데이터 하나를 삭제하게 된다

 

(3) ["apple", "banana", "strawberry"]

 

배열의 끝에 있던 peach가 삭제된 것을 알 수 있다

​

이번에는 배열의 앞을 삭제하는 방법도 알아보도록 하자

 

fruits.shift();
console.log(fruits);

 

이렇게 shift를 사용하게 되면 배열의 맨 앞에 있는 데이터가 삭제된다

 

(3) ["banana", "strawberry", "peach"]

 

맨 앞에 있던 데이터 'apple' 이 삭제된 것을 확인할 수 있다

 

 

여기서 중요한 점은

shift와 unshift는 pop과 push 보다 느리다

 

 

이유

pop과 push는 배열의 끝에서 동작이 일어나기 때문에

비어있는 인덱스에 삽입과 삭제를 하게 되는 간편한 동작이지만

​

shift와 unshift는 배열의 앞에서 동작이 일어나기 때문에 원래 들어있던 요소들을 삽입할 때는 오른쪽으로 옮기고 첫 번째 자리에 삽입하는 과정을 거치고 삭제를 할 때는 삭제 이후 데이터들을 왼쪽으로 옮기는 거치게 되는 정렬이 이루어지기 때문에 비교적 간편한 동작을 하는 pop과 push보다 느릴 수밖에 없다

 

 

이번에는 splice를 사용하여 지정된 포지션에서 지우는 방법을 알아보자

 

fruits.push('apple', 'banana', 'strawberry', 'peach', 'lemon');

 

우선 위와 같이 5개의 과일이 들어있는 배열이 있다고 하자

​

splice를 통해 지정된 포지션에서 지워보도록 하자

 

fruits.splice(1, 1)

 

첫 번째 인자는 어디서부터 지울 건지 즉 시작하는 인덱스 번호를 지정하고

두 번째 인자는 몇 개를 지울 건지 적어주면 된다

그렇다면 위의 코드는 1번째 인자부터 1개의 데이터를 삭제하는 것이다

​

아래와 같은 결과를 출력한다

 

["apple"]

 

결과는 1번째 인덱스부터 뒤의 모든 인덱스의 데이터를 다 삭제하게 된다

​

​

이번에는 지정한 인덱스를 지우고 그 자리에 다른 데이터를 삽입해보자

 

fruits.splice(1, 1, 'melon', 'watermelon');

 

위와 같이 1번째 인덱스부터 1개의 데이터를 삭제하고 그 자리에 'melon'과 'watermelon'을 삽입해보자

 

(6) ["apple", "melon", "watermelon", "strawberry", "peach", "lemon"];

 

1번째 인덱스인 'banana'가 지워진 자리에 'melon'과 'watermelon'이 삽입된 것을 확인할 수 있다.

​

 

 

이번에는 두가지의 배열을 묶는 방법을 알아보자

 

const fruits2 = ['pineapple', 'grape']
const newFruits= fruits.concat(fruits2);
console.log(newFruits);

 

이렇게 fruits2 이라는 배열을 만들고 concat을 이용해 이 값을 기존에 존재했던 fruits 배열과 묶어보자

 

(8) ["apple", "melon", "watermelon", "strawberry", "peach", "lemon", "pineapple", "grape"];

 

위와 같이 newFruits 배열에 기존의 fruits 와 fruits2 배열을 묶을 수 있다

 

 

---

 

 

Searching

 

 

다음은 검색할 수 있는 API를 알아보자

배열 안에 어떤 값이 몇 번째 인덱스에 존재하는지 알아보는 게 search이다

​

(4) ["apple", "strawberry", "peach", "lemon"];

 

위와 같이 fruits 배열 안에 다음과 같은 값이 있다고 가정했을 때 apple을 탐색해보자

 

console.log(fruits.indexOf('apple'));

 

indexOf라는 API로 'apple'이 몇 번째 인덱스에 존재하는지 Searching 할 수 있다

결과값은 0이 나온다

 

배열 안에 없는 값을 Seaeching 하게 되면 -1 이 출력된다

 

 

 

다음은 배열 안에 데이터가 존재하는지를 확인하는 방법이다

​

includes를 사용하면 된다

 

console.log(fruits.includes('apple'));

 

존재하다면 true , 존재하지 않으면 false가 출력된다

 

 

 

만약 같은 데이터가 중복이 되었을 경우 탐색하는

​

lastIndexOf에 대해서 알아보자

 

(5) ["apple", "melon", "watermelon", "strawberry", "apple"];

 

위와 같이 apple이 중복이 되었을 경우

 

console.log(fruits.indexOf('apple'));
console.log(fruits.lastIndexOf('apple'));

 

indexOf는 첫 번째로 발견한 apple의 인덱스 값을 출력하고 = 0

lastIndexOf는 마지막에 있는 apple의 인덱스 값을 출력한다 = 4

​

​