[JavaScript ES6]배열(array)

✨배열(array)이란?

배열은 칸마다 촘촘히 박스가 모여있는 자료구조를 의미한다.

배열의 포인티는 각 칸(박스, 메모리)에 인덱스 값이 지정되어있다.

➕자료구조란?

자료구조는 비슷한 종류의 요소들을 모아서 분류한 것을 의미한다.

분류한다는 것을 예시로 몇 개 들어보겠다.

오브젝트는 서로 연관된 특징과 행동들을 묶어둔 것이라 생각하면 되며, 오브젝트들을 묶어둔 것을 자료구조라 한다.

Type(문자열, 정수, 실수 등)이 있는 언어에서는 동일한 Type의 데이터만 담을 수 있다.

BUT, Javascript는 타입이 동적으로 정의되기 때문에 한 자료구조에 여러 Type을 담을 수 있다.

(그러나 그렇게 하진 않는다.)

 

👀index의 특징

배열은 요소 index로 문자열을 사용할 수 없습니다. 무조건 정수만 허용합니다. 

정수가 아닌 값을 사용하고자 할 때는 대괄호 구문(" ") 또는 속성 접근자(person [" "])를 사용하면 됩니다.

또한 index는 0(Base 0)부터 시작하거나 1(Base 1)부터 시작합니다. 

거의 대부분의 경우 Base0을 사용합니다❗

 

---

🔵배열의 Declaration(선언)

const arr1 = new Array();
const arr2 = [1, 2];

배열에서는 2가지의 선언이 가능하다.

1. 생성자를 이용한 선언

2. 대괄호( [ ] )를 이용해 선언해주는 것이다.

 

🟣Index position(인덱스 위치 찾는 여러 방법)

const fruits = ["🍌", "🍎"];

console.log(fruits); //fruits를 출력
console.log(fruits.length); //fruits의 길이(메소드 length)를 출력
console.log(fruits[0]);//fruits index 0을 출력
console.log(fruits[1]);//fruits index 1을 출력
console.log(fruits[fruits.length - 1]);//배열의 마지막 값을 찾을 때

---

 

 

🔵배열의 사용 예시

function get_members(){
  return["coding", "log", "yoonmin","legend"];
}

members = get_members();

for (const i= 0; i < members.length; i ++){
  console.log(members[i].toUpperCase()+"<br/>");
}

🔵배열의 장점

function get_member1 () {
  return "coding";
}

function get_member2 () {
  return "log";
}

function get_member3 () {
  return "yoonmin";
}
console.log(get_member3());
// 배열을 사용하면 상단의 코드보다 재사용성을 높힌 코드를 사용 할 수 있다.

function get_members(){
  return ["coding", "log", "yoonmin"]
}

const members = get_members();
console.log(members[0]);

---

🟠배열 Looping over(반복)

배열의 반복(Looping over)을 사용하는 3가지의 방법이 있다.

이를 소개해보고자 한다.

for

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

 

 for of

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

forEach

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

forEach는 배열 안에 들어있는 value들마다 내가 전달한 함숫값을 출력한다

---

🟡배열 Searching

배열의 searching(탐색)을 사용하는 3가지의 방법이 있다.

이를 소개해보고자 한다.

indexOf : find the index

const fruits =["🍌", "🍎","🥝", "🍇", "🍑"];
console.log(fruits.indexOf("🥝")); //배열안에 키위의 index position
console.log(fruits.indexOf("🍑"));
console.log(fruits.indexOf("🥥")); //코코넛은 배열안에 없기 때문에 -1로 출력된다.

includes: boolean(T/F) 값을 출력

const fruits =["🍌", "🍎","🥝", "🍇", "🍑"];
console.log(fruits.includes("🍑")); //true
console.log(fruits.includes("🥥")); //배열안에 코코넛이 있는가? false

lastIndexOf : 같은 종류의 값이 있다면 마지막 index를 출력

const fruits =["🍌", "🍎","🥝", "🍇", "🍑"];
fruits.push("🍑");
console.log(fruits.indexOf("🍑")); //같은 종류의 string이 있다면 indexof는 가장 앞에 index을 출력
console.log(fruits.lastIndexOf("🍑")); //같은 종류의 string이 있다면 indexof는 마지막에 index을 출력

---

📢 ❗ 배열 제어 사용 메소드

[ 🟥크기 , 🟧추가 , 🟨제거 , 🟩정렬 ] 

🟥 length : 배열의 길이를 알려달라.

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

---

🟧 push : 아이템을 배열의 끝자리에 둔다.

const fruits = ["🍌", "🍎"];
fruits.push("🍓", "🍈");
console.log(fruits);

🟧 concat : 복 수의 값 추가 or 2가지의 배열을 묶어서 만듦.

const fruits = ["🍌", "🍎"];
const fruits2 = ["🍒", "🍐"];
const newFruits = fruits.concat(fruits2);
console.log("new:" + newFruits);

🟧 unshift : 앞에서부터 data(아이템)을 추가한다.

const fruits = ["🍌", "🍎"];
fruits.unshift("🍉", "🍈");
console.log(fruits);

🟧 splice : data(아이템)를 index position을 이용해 제거한다.

const fruits = ["🍌", "🍎"];
fruits.push("🥝", "🍇", "🍑");

fruits.splice(1,1); //index 1부터 그 뒤에 1개 data를 삭제해라
console.log(fruits);

fruits.splice(1, 1, "🍊", "🥕"); //index 1부터 뒤 1개 data를 삭제하고 그 자리에 string값을 추가
console.log(fruits);

❗ 다른 예시

const numbers = [1,2,3,4,5,6,7,8,9,10];
console.log(numbers.splice(2)); // array, return된 값[3,4,5,6,7,8,9,10], 시작점 2부터 배열의 마지막 원소까지를 대상으로 한다.
//numbers.splice(2, (2부터 전부삭제));
console.log(numbers); // array, [1,2], 원본이 수정된다. 
 
const numbers = [1,2,3,4,5,6,7,8,9,10];
console.log(numbers.splice(2, 4)); // array, return된 값[3,4,5,6]
 
const numbers = [1,2,3,4,5,6,7,8,9,10];
console.log(numbers.splice(2, 4, 'three', 'four', 'five', 'six')); // array, return된 값[3,4,5,6]
console.log(numbers); // array, [1,2,three,four,five,six,7,8,9,10]

 

---

 

🟨 shift : 배열의 가장 앞의 변수를 제거한다.

const fruits = ["🍌", "🍎"];
fruits.shift();
console.log(fruits);

 

🟨 pop : 배열의 끝에서부터 아이템을 제거한다.

const fruits = ["🍌", "🍎"];
fruits.pop();
console.log(fruits);

 

---

🟩 sort : 순서에 맞게 재 정렬

const li = ['c', 'a', 'b', 'e', 'd'];
li.sort();
console.log(li);

 

🟩 reverse : 반대의 순서로 재정렬

const li = ['c', 'a', 'b', 'e', 'd'];
li.reverse();
console.log(li);

 

추가적으로 알아야 할 point ❗

 ◾ shift와 unshift는 pop과 push보다 속도가 매우 느리다.

 

그 이유는 배열을 shift나 unshift와 같이 메모리를 동적으로 움직이는 명령어는 배열의 전체가 움직이기 때문에

배열의 size가 커질수록 움직여야 하는 데이터 값이 많아지기 때문에 속도가 느려질 수밖에 없다

 

때문에 pop과 push와 같은 명령어를 사용하는 이유는 데이터는 가장 뒤에서 접근한다면

추가하거나 삭제하는 데이터를 제외하고 나머지 데이터들은 그대로 있기에 매우 빠르다.

 만약 중간에 값들을 변경하고자 할 땐,index를 이용해 중간 데이터를 보다 손쉬운 유지보수가 가능하다.