📦 배열이란?

• 여러 값(Entity) 을 순차적으로 나열한 자료구조
• 배열 내 각 값은 요소(element) 라고 하며, 인덱스(index)를 통해 접근

---

🛠️ 대표 속성과 메서드

✔️ 배열 크기 및 배열 여부 확인

• Array.length
• Array.isArray(value)

✔️ 배열 추가/삭제

• push(), pop()
• shift(), unshift()
• splice(), slice()

✔️ 배열 탐색

• indexOf(), lastIndexOf()
• includes()

✔️ 배열 변형 (callback 미사용)

• sort(), reverse(), join()
  

---

📌 배열 선언, 접근, 속성

✅ 선언

"new Array()" 혹은 "[]"를 통해 선언하며, 사이즈 혹은 값을 입력하여 초기화도 가능

let arr_1 = new Array(10);
let arr_2 = [];

console.log(arr_1);
console.log(arr_2);

let fruits = ["apple", "orange", "melon"];
console.log(fruits);

✅ 접근

"Array[index]" 를 통해 index를 통하여 O(1) 접근

console.log(fruits[0]); // apple
console.log(fruits[1]); // orange
console.log(fruits[2]); // melon

✅ 길이 확인

"Array.length" 를 통해 배열 요소의 개수 확인 가능

console.log(fruits.length); // 3

✅ 값 변경

fruits[1] = "kiwi"; 
console.log(fruits); // ["apple", "kiwi", "melon"]

---

🧬 배열의 실체 (해시 기반 객체)

• 자바스크립트에서 배열은 일반 배열이 아닌 Hash 기반의 객체

• 메모리는 비연속적인 희소 배열(sparse array) 형태로 구성됨

  let nums = [];
  
  nums[0] = "one";
  nums[1] = "two";
  
  console.log(nums.length);
  console.log(nums);

  

  let nums = [];
  
  nums[0] = "one";
  nums[1] = "two";
  
  nums["once"] = "once";
  nums["twice"] = "twice";
  
  console.log(nums.length);
  console.log(nums);
  
  console.log(Object.getOwnPropertyDescriptors(nums));

  

nums[0], nums[1] 은 배열의 인덱스를 채운 것이고
nums["once"], nums["twice"] 은 객체 속성(키)를 추가한 것이다.
그래서 길이가 2인것 은 배열의 인덱스를 가르키고 비연속적인 희소 배열로 생성된 걸 알 수 있다

---

🔍 배열 타입 확인

• Array.isArray(value)

  let num = 123.456;
  let str = "here i am";
  let fruits = ["apple", "orange", "melon"];
  
  console.log(Array.isArray(num)); //false
  console.log(Array.isArray(str)); //false
  console.log(Array.isArray(fruits)); // true

❌ 배열 일부 요소 삭제

• delete array[index]
  ➡️ 요소를 삭제를 해도 배열 사이즈가 그대로인 문제점이 있다

  let fruits = ["apple", "orange", "melon"];
  
  console.log(fruits);
  console.log(fruits.length);
  
  delete fruits[1];
  
  console.log(fruits);
  console.log(fruits.length);

  

🔁 배열 추가/삭제

🔸 LIFO (Last-In First-Out) - Back

• Array.push(element) // 추가

• Array.pop() // 삭제

  let fruits = ["apple", "orange", "melon"];
  
  fruits.push("watermelon");
  console.log(fruits); // [ 'apple', 'orange', 'melon', 'watermelon']
  console.log(fruits.length); // 4
  
  fruits.pop();
  console.log(fruits); // [ 'apple', 'orange', 'melon' ]
  console.log(fruits.length); // 3
  

🔸 LIFO (Last-In First-Out) - Front

• Array.unshift(element) // 추가

• Array.shift() // 삭제

  let fruits = ["apple", "orange", "melon"];
  
  fruits.unshift("watermelon");
  console.log(fruits); // [ 'watermelon', 'apple', 'orange', 'melon' ]
  console.log(fruits.length); // 4
  
  fruits.shift();
  console.log(fruits); // [ 'apple', 'orange', 'melon' ]
  console.log(fruits.length); // 3
  

✂️ 배열 요소 삭제/삽입

✔️ Array.slice(index[,deleteCount, elem1, ... , elemN])

let fruits = ["apple", "orange", "melon"];
let ret;

ret = fruits.splice(1); 
console.log(ret); // [ 'orange', 'melon' ]
console.log(fruits); // [ 'apple' ]

fruits = ["apple", "orange", "melon", "strawberry"];
ret = fruits.splice(1, 1);
console.log(ret); // [ 'orange' ]
console.log(fruits); // [ 'apple', 'melon', 'strawberry' ]

ret = fruits.splice(1, 1, "mango", "kiwi"); // melon 위치에 "mango", "kiwi"가
console.log(ret); // [ 'melon' ]
console.log(fruits); // [ 'apple', 'mango', 'kiwi', 'strawberry' ]

✔️ slice(start, end) - 원본 유지

let fruits = ["apple", "orange", "melon"];

console.log(fruits.slice(1)); // [ 'orange', 'melon' ]
console.log(fruits); // [ 'apple', 'orange', 'melon' ]
 
console.log(fruits.slice(1, 2)); // [ 'orange' ]
console.log(fruits.slice(-2)); // [ 'orange', 'melon' ]

✔️ Array.concat(arg1, arg2)

let fruits = ["apple", "orange", "melon"];
let fruits_add = ["cherry", "banana"];

console.log(fruits.concat(fruits_add)); // [ 'apple', 'orange', 'melon', 'cherry', 'banana' ]
console.log(fruits); // [ 'apple', 'orange', 'melon' ]

---

🔁 배열 반복문

• 다양한 반복문 문법을 통해 배열 요소에 접근 가능
• 반복문 문법
  • for + length: index 접근
  • for...of: element 접근
  • for...in: key(index) 접근

let fruits = ["apple", "orange", "melon"];

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

for (let fruit of fruits) {
  console.log(fruit);
  // apple
  // orange
  // melon
}

for (let key in fruits) {
  console.log(key);
  // 0
  // 1
  // 2
  console.log(fruits[key]);
  // apple
  // orange
  // melon
}

---

🔍 배열 탐색

• index탐색(앞에서부터) : Array.indexOf(item, from)
• index탐색(뒤에서부터) : Array.lastIndexOf(item, from)
• 값 포함 여부 확인(true/fasle) : Array.includes(item,from)

let fruits = ["apple", "orange", "banana", "orange", "melon"];

console.log(fruits.indexOf("orange")); // 1
console.log(fruits.indexOf("Orange")); // -1 : 배열 내에 없다
console.log(fruits.indexOf("orange", 2)); // 3

console.log(fruits.lastIndexOf("orange")); // 3
console.log(fruits.lastIndexOf("orange", -3)); // 1
console.log(fruits.lastIndexOf("orange", 0)); // -1

console.log(fruits.includes("banana")); // true
console.log(fruits.includes("watermelon")); // false
console.log(fruits.includes("Banana")); // false

🔃 배열 정렬 / 반전

➡️ sort()와 reverse()는 원본 배열 자체를 변경함

• 배열 정렬 : Array.sort()
• 배열 반전 : Array.reverse()

let nums = [1, -1, 4, 5, 2, 0];

console.log(nums.sort()); // [ -1, 0, 1, 2, 4, 5 ] 오름차순으로 정렬한 nums를
console.log(nums.reverse()); // [ 5, 4, 2, 1, 0, -1 ] 반전시킨 형태
console.log(nums); // [ 5, 4, 2, 1, 0, -1 ]

let fruits = ["apple", "orange", "banana", "melon"];

console.log(fruits.sort()); // [ 'apple', 'banana', 'melon', 'orange' ]
console.log(fruits.reverse()); // [ 'orange', 'melon', 'banana', 'apple' ]
console.log(fruits); // [ 'orange', 'melon', 'banana', 'apple' ]

🔄 배열 변환

➡️ 원본 데이터에 영향을 미친다.

• 배열 값을 문자열로 변환 : Array.join(separator)

let fruits = ["apple", "orange", "banana", "melon"];
let str = fruits.join();
console.log(str); // apple,orange,banana,melon ➡️ ","가 기본값

let str_separator = fruits.join(";");
console.log(str_separator); // apple;orange;banana;melon