[JavaScript 개념잡기] 배열(Array)

6. Array(배열)

 

1) Array

✔ 배열(array)

여러 개체(Entity)값을 순차적으로 나열한 자료 구조

• 배열 내 값을 요소(element)라고 하며, 배열 요소는 index로 접근
• 대표 속성과 메서드
  • 배열 크기 및 여부 확인: Array.length, Array.isArray()
  • 배열 추가 및 삭제: Array.push(), Array.pop(), Array.shift(), Array.unshift(), Array.splice(), Array.slice() 등
  • 배열 탐색: Array.indexOf(), Array.lastIndexOf(), Array.includes()

2) 배열 기본 메서드

✔ 배열 선언, 접근, 속성

• 선언: "new Array()" 혹은 "[]"을 통해 선언, 사이즈 혹은 값을 입력해 초기화 가능
• 접근 방법: "Array[index]"를 통해 index를 통하여 O(1) 접근
• 배열 속성: "Array.length"를 통해 배열 요소의 개수 확인 가능

✔ 배열의 실체

자바스크립트에서 배열은 다른 언어에서 말하는 일반적인 배열이 아닌 Hash 기반 객체

• 메모리가 연속적인 밀집 배열(dense array)가 아닌 비 연속적인 희소 배열(sparse array)

let nums = [];
nums.push("one");
nums.push("two");
console.log(nums.length); // 2
console.log(nums); // ['one', 'two']

nums["once"] = "once";
nums["twice"] = "twice";
console.log(nums.length); // 2
console.log(nums); // ['one', 'two', once: 'once', twice: 'twice']

✔ 배열 타입 확인 및 요소 삭제

1. 배열 타입 확인
   • 배열인지 확인: Array.isArray()

   const num = 123.436;
   const str = "hi";
   const fruits = ["apple", "orange", "melon"];
   
   console.log(Array.isArray(num)); // false
   console.log(Array.isArray(str)); // false
   console.log(Array.isArray(fruits)); // true

 

2. 배열 요소 삭제
   • 배열 일부 요소 삭제: delete array[](배열 length는 그대로 유지됨)

   const fruits = ["apple", "melon", "banana"]
   
   delete fruits[1];
   console.log(fruits); // ["apple", "banana"]
   console.log(fruits.length); // 3

2) 배열 조작

✔ 배열 조작(1)

1. 배열 추가 및 삭제(LIFO - Back)
   

   const fruits = ["apple", "melon", "banana"];
   let ret;
   
   ret = fruits.push("watermelon"); // 뒤에 추가
   console.log(fruits); // ["apple", "melon", "banana", "watermelon"]
   
   ret = fruits.pop(); // 뒤에서부터 삭제
   console.log(fruits); // ["apple", "melon", "banana"]
   console.log(ret); // watermelon, 삭제 된 데이터가 반환됨​

    
   • 배열 추가: Array.push()
   • 배열 삭제: Array.pop()
     
     

2. 배열 추가 및 삭제(LIFO - Front)
   

   const fruits = ["apple", "melon", "banana"];
   let ret;
   
   ret = fruits.shift(); // 앞에서부터 삭제
   console.log(fruits); // ["melon", "banana"]
   console.log(ret); // apple
   
   ret = fruits.unshift("watermelon"); // 앞에서부터 추가
   console.log(fruits); // ["watermelon", "melon", "banana"]
   console.log(ret); 3​

   
   
   • 배열 추가: Array.unshift()
   • 배열 삭제: Array.shift()

 

 

✔ 배열 조작(2)

배열 삭제 및 변경(index)

  const fruits = ["apple", "melon", "banana"];
  let ret;

  console.log(fruits.splice(1)); // ["melon", "banana"]
  console.log(fruits); // [apple], 잘린게 나옴

  fruits = ["apple", "melon", "banana", "grape"];
  ret = fruits.splice(1, 1);
  console.log(ret); // ["melone"]
  console.log(fruits); // ["apple", "banana", "grape"]

  console.log(fruits.splice(1, 1, "mango", "kiwi")); // banana 삭제
  console.log(fruits); // ["apple", "mango", "kiwi", "grape"]

• 배열 요소 삭제 및 변경: Array.splice(index[, deleteCount, elem1,...elemN])

✔ 배열 조작(3)

1. 배열 삭제(index)
   

   const fruits = ["apple", "orange", "melon"];
   
   // 원본 배열 유지함
   console.log(fruits.slice(1)); // ["orange", "melon"]
   console.log(fruits); // ["apple", "orange", "melon"]​

   
   
   • 배열 요소 삭제: Array.slice()

 

2. 배열 병합
   

   const fruits = ["apple", "orange", "melon"];
   
   // 원본유지, 병합 한 배열 추가 생성
   console.log(fruits.concat("strawberry")); //["apple", "orange", "melon", "strawberry"];
   console.log(fruits.concat("cherry", "grape")); //["apple", "orange", "melon", "cherry", "grape"];​

   
   
   • 다중 배열 병합: Array.concat()
     
     
     

✔ 배열 반복문

다양한 반복문 문법을 통해 배열 요소에 접근 가능

• 반복문 문법: for...length(index 접근), for...of(element 접근), for...in(key접근)

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

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

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

// 3. for...(key)in
for (let key in fruits) {
  console.log(fruits[key]); // apple, orange, melon
}

3) 배열 탐색 및 변형

✔ 배열 탐색

• 배열 탐색
  • index 탐색(앞): Array.indexOf()
  • index 탐색(뒤): Array.lastIndexOf()
  • 값 포함 여부 확인: Array.includes()

✔ 배열 변형

1. 배열 정렬 및 반전

유니코드 순으로 정렬

const nums = [1, 3, 54, 2, 5, -1];

console.log(nums.sort()); // [-1, 1, 2, 3, 5, 54]
console.log(nums.reverse()); // [54, 5, 3, 2, 1, -1]

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

 

2. 배열 변환

let fruits = ["apple", "orange", "mango", "grape"];
let str = fruits.join();
console.log(str); // apple, orange, mango, grape

let str_separator = fruits.join(";");
console.log(str_separator); // apple;orange;mango;grape, 마지막엔 적용x
let result = str_separator.split(";"); // ; 단위로 나눠서 배열에 저장
console.log(result); // ["apple", "orange", "mango", "grape"];

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

4) 배열 논리연산

✔ some()

배열 내 단 하나라도 콜백 함수의 조건을 만족하는 요소가 있으면 true, 아니면 false(빈 배열 false) 반환 (or 느낌)

• Array.some(function(item, index, array){})

let user = [
  { name: "bob", age: 18, job: false },
  { name: "john", age: 28, job: true },
  { name: "part", age: 38, job: false },
]

let some_job = user.some(function (users) {
  return user.job == false;
});
console.log(some_job); // true

let empty = [].some((item) => item > 16);
console.log(empty); // 빈 배열, false

✔ every()

배열 내 모든 요소가 콜백 함수의 조건을 만족한다면 true, 아니면 false 반환(빈 배열인 경우 true)

• Array.every(function(item, index, array){})

let user = [
  { name: "bob", age: 18, job: false },
  { name: "john", age: 28, job: true },
  { name: "part", age: 38, job: false },
]

let some_job = user.every(function (users) {
  return user.job == false;
});
console.log(some_job); // false

let empty = [].every((item) => item > 16);
console.log(empty); // 빈 배열, true