array(배열)이란??

토끼 ⇒ 귀 두개, 동물이라는 property와 뛴다, 먹는다와 같은 method로 이루어져있다.

당근 ⇒ 채소, 주황색, 비타민C라는 property로 이루어져있다.

이렇게 비슷한 특징끼리 묶어놓은 것을 object라고 한다.
(object는 당근처럼 property만 있고, method는 없을 수도 있다.)

그리고 이러한 object들을 한 바구니에 잘 정리하는것을 array라고 한다!

🤷🏻‍♀️ 굳이 바구니에 정리해야하는 이유?

효율적인 접근 및 수정을 가능케 하는 자료의 조직, 관리, 저장을 위해서이며, 이를 자료구조 라고 한다.
자료구조의 종류에는 Array, Linked List, Queue, Priority Queue, Stack, Hash Table, Heap, Tree, Graph가 있으며, 자료구조는 JS 기본 이론 끝낸 후에 알고리즘과 함께 더 공부할 예정!

이 바구니를 좀 더 자세히 살펴보면, 이렇게 index 위치가 지정되어져 있는 텅텅 빈 array box안에 object들이 하나씩 들어가있는 모양!

여기서 토끼, 당근 같이 Array 안에 들어있는 배열의 값 하나하나를 Element(요소)라고 부른다.
요소와 요소 사이는 쉼표로 구분한다.

위 토끼, 당근 예시에서는 Array안에 object만 들어 있지만, 모든 Type의 데이터가 Array안에 담길 수 있다!
String, Number, Object, 심지어 Array도 가능!!!

index를 이용해 array안 의 object들에 바로 접근이 가능하기 때문에, 이렇게 삭제, 수정이 용이하다!

더불어, javascript는 type이 다이나믹하게 결정되기 때문에, javascript에서의 array는 이렇게 전혀 다른 type들을 마구잡이로 담아둘 수도 있지만, 이렇게 코딩하는건 NO!!!

---

1. array declaration (배열 선언식)

const arr1 = new Array(); // 빈 배열 생성
arr1[0] = 1;
arr1[0] = 2;

const arr2 = new Array(1, 2);

const arr3 = [1, 2];

배열을 선언하는 방법은 위 예시처럼 3가지 방법이 있다.

1번처럼 먼저 빈 배열을 선언한 후에, 빈 배열의 원하는 index 위치에 내용을 추가하는 방식이 있는데, 나의 경우, 사전스터디 과제로 했던 숫자 야구 게임을 만들 때 const array = []; 로 빈배열을 만들었다.

2번, 3번처럼 Array 선언과 동시에 데이터를 담을 수도 있다.
⇒ 참고로 위 예시는 모두 현재 이런 상태!

추가로, 빈 배열에 요소를 담을때는 cities[0] = "서울"; cities[1] = "대전"; 으로 하나씩 추가할 수 있다.
(사전스터디 작업할때는 함수를 돌려서 나온 결과값을 빈 배열에 바로 넣었는데 , 이런식으로 배열에 요소 넣는 방법도 물론 다양하다!)

특이한건, cities[5] = "제주도"; 이렇게 6번째 요소에 미리 값을 할당할 수 있다.
왠지 차례대로 요소를 할당해야 할 것 같지만...원하는 위치에 무작위로 할당해도 됨!
(단, 2,4,5번째 요소는 지정되지 않았기 때문에 다음과 같이 출력된다.)

let cities = [];
cities[0] = "서울";
cities[1] = "대전";
cities[5] = "제주도";
console.log(cities); // [ '서울', '대전', <3 empty items>, '제주도' ]
console.log(cities[4]); // undefined

---

2. index position

const fruits = ['🍎', '🍌', '🍊'];

console.log(fruits); // 🍎, 🍌, 🍊
console.log(fruits[0]); // 🍎
console.log(fruits[1]); // 🍌
console.log(fruits[3]); // undefined

console.log(solmi['name']) 의 ['name'] key로 원하는 값을 호출할 수 있듯이, array 에서는 index의 위치로 원하는 값을 호출할 수 있다.

array의 첫번째 값을 찾을 땐 (fruits[0]) 를 사용하고, 마지막 값을 찾을 땐(fruits[fruits.length - 1]) 을 주로 사용한다.

---

3. Looping over an array

const fruits = ['🍎', '🍌', '🍊'];

fruits array 안에 있는 모든 과일 들을 반복해서 출력하고 싶다면!?

for

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

이렇게 for 문을 이용해서 출력할 수 있다.

for of

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

for of 를 이용하면 for보다 더 간략하게 코딩할 수 있다.

for of는 순회 할 객체의 길이만큼 반복하기 때문에, 따로 fruits.length 등으로 반복 횟수를 지정할 필요가 없다.

forEach

fruits.forEach((fruits) => console.log(fruits));

for of 보다 더더더더 간략하게는!?

바로 forEach를 사용하면 된다! forEach는 callback 함수를 통해 기능을 수행할 수 있으며, arrow 함수도 사용 가능해서 한 줄로 간단하게 표현할 수 있다.

---

4. add, delete, copy

push

array의 끝에서 부터 item을 추가!

const fruits = ['🍎', '🍌', '🍊'];
fruits.push('🍓', '🍇');
console.log(fruits); // '🍎', '🍌', '🍊', '🍓', '🍇'

pop

array의 끝에서 부터 item을 삭제!

fruits.pop();
console.log(fruits); // '🍎', '🍌', '🍊', '🍓'
fruits.pop();
console.log(fruits); // '🍎', '🍌', '🍊'

unshift

array의 앞에서 부터 item을 추가!

fruits.unshift('🍋');
console.log(fruits); // '🍋', '🍎', '🍌', '🍊'

shift

array의 앞에서 부터 item을 삭제!

fruits.shift();
console.log(fruits); // '🍎', '🍌', '🍊'
fruits.shift();
console.log(fruits); // '🍌', '🍊'

---

💁🏻‍♀️ 그림으로 보면 이런 느낌!!

👩🏻‍🏫 pop이나 shift로 삭제된 item들은 사실 완전히 지워지는게 아니라 그 값이 따로 빠지는 것!

const fruits = ['🍎', '🍌', '🍊'];
const poped = fruits.pop();
console.log(poped); // 🍎

⇒ 이렇게 pop으로 삭제한 item들을 따로 담을 수 있다!

⚠️ shift와 unshift는 pop와 push에 비해 매우매우 느리다!!!!
⇒ pop과 push는 제일 뒤에 item을 넣고 빼고 자유롭게 할 수 있지만, shift와 unshift는 원래 앞에 있던 item들을 뒤로 밀거나 앞으로 당겨야 하기 때문에 array가 길어질수록 처리속도가 매우 오래 걸린다.
그래서 꼭 필요한 경우가 아니면 되도록 pop, push를 사용할 것!

splice

index position을 이용해 원하는 위치의 item을 삭제, 추가할 수 있다.

const fruits = ['🍎', '🍌', '🍊', '🍓'];
fruits.splice(1); // 🍎
fruits.splice(1, 1); // 🍎, 🍊, 🍓
fruits.splice(1, 2, '🍏', '🍉'); // 🍎, 🍏, 🍉, 🍓

splice(1) : 1번째 index부터 item을 모두 삭제

splice(1, 1) : 1번째 index부터 item을 1개 삭제

splice(1, 2, '🍏', '🍉') : 1번째 index부터 item을 2개 삭제하고, item을 삭제한 자리에 🍏,🍉추가

💁🏻‍♀️ splice는 item을 삭제하지 않고 추가만 할 수도 있다.
splice(1, 0, '🍏', '🍉') 이런 식으로!

concat

인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 만들고, 반환한다.

const fruits2 = ['🥑', '🍐'];
const newFruits = fruits.concat(fruits2);
console.log(newFruits); // 🍎, 🍏, 🍉, 🍓, 🥑, 🍐

---

5. searching

indexOf

const fruits = ['🍎', '🍌', '🍊'}];
console.log(fruits.indexOf('🍌')); // 1
console.log(fruits.indexOf('🍊')); // 2
console.log(fruits.indexOf('🥦')); // -1

indexOf는 array안에서 특정 item의 index position을 출력해준다.

만약 위 예시처럼, array에 없는 값을 호출하면 -1이 출력된다.

이 점을 이용해서 숫자 야구 게임에서 indexOf 로 나온 값이 -1 이상이면~어쩌구~ 로 코드를 짰었는데, 더 공부해보니 아예 찾는 item이 array안에 있으면 true, 없으면 false를 반환해주는 api가 있었당...

includes

const fruits = ['🍎', '🍌', '🍊'}];
console.log(fruits.includes('🍌')); // true
console.log(fruits.includes('🥦')); // false

이렇게 includes 라는 api를 이용하면 true, false 값으로 item이 array안에 포함되어 존재하는지 확인할 수 있다.

lastIndexOf

indexOf는 array안을 순차적으로 돌다가, 일치하는 item을 만나면 그 첫번째 값을 반환하고 끝나버린다.

const fruits = ['🍎', '🍌', '🍊', '🍎'];
console.log(fruits.indexOf('🍎')); // 0

즉, 이렇게 array안에 🍎가 2개 있지만, indexOf는 🍎의 가장 첫번째 위치인 0 을 반환한다.

이와 반대로, lastIndexOf를 사용하면

const fruits = ['🍎', '🍌', '🍊', '🍎'];
console.log(fruits.lastIndexOf('🍎')); // 3

🍎의 가장 마지막 위치인 3 을 반환한다.