[JS] 자바스크립트 배열(Array) 개념 정리

배열(Array)이란?

컴퓨터 과학에서 배열은 번호(index)와 번호에 대응하는 데이터들로 이루어진 자료 구조로 여러 개체(entity) 값을 순차적으로 나열한 선형 자료구조이다.

---

자바스크립트 배열의 대표 속성(property)과 메서드(method)

배열 크기/여부 확인

Array.length, Array.isArray()

배열 추가/삭제

Array.push(), Array.pop(), Array.shift(), Array.unshift(), Array.splice(), Array.slice

배열 탐색

Array.indexOf(), Array.lastIndexOf(), Array.includes()

배열 변형

Array.sort(), Array.reverse(), Array.join()

배열 반복

Array.forEach(), Array.map(), Array.find(), Array.filter(), Array.reduce()

배열 논리 연산

Array.some(), Array.every()

---

배열 선언/접근/속성

new Array(), []를 통해 선언하며, 배열의 사이즈나 값의 초기화(초기 설정)도 가능하다.

Array[index]로 index를 통하여 O(1) 접근할 수 있다.

Array.length를 통해 배열 요소의 개수를 확인할 수 있다.

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

console.log(arr_1); // [ <10 empty items> ]
console.log(arr_2); // []

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

console.log(fruits); // [ 'apple', 'orange', 'melon' ]
console.log(fruits.length); // 3
console.log(fruits[0]); // apple
console.log(fruits[1]); // orange

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

 

자바스크립트 배열의 실체

자바스크립트에서 배열은 다른 언어에서 말하는 일반적인 배열이 아닌 Hash 기반의 객체다.
메모리가 연속적인 밀집 배열(dense array)이 아닌 비 연속적인 희소 배열(sparse array)이다.

let nums = [];
nums[0] = "one";
nums[1] = "two";

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

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

console.log(Object.getOwnPropertyDescriptors(nums));

 

배열 타입 확인 및 요소 삭제

배열이 맞는지 타입 확인 : Array.isArray(value)

let num = 123.456;
let str = "hello";
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] (삭제해도 배열 사이즈가 그대로인 문제점이 있다)

console.log(fruits); // [ 'apple', 'banana', 'melon' ]
console.log(fruits.length); // 3

delete fruits[1];
console.log(fruits); // [ 'apple', <1 empty item>, 'melon' ]
console.log(fruits.length); // 3

 

배열 조작 (1)

배열 요소 추가/삭제 (LIFO - Back) *LIFO : last in, first out

추가 : Array.push(element)

삭제 : Array.pop()

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

ret = fruits.push("orange");
console.log(fruits); // [ 'apple', 'banana', 'melon', 'orange' ]
console.log(fruits.length); // 4
console.log(ret); // 4

ret = fruits.pop();
console.log(fruits); // [ 'apple', 'banana', 'melon' ]
console.log(fruits.length); // 3
console.log(ret); // orange

배열 요소 추가/삭제 (LIFO - Front)

추가 : Array.unshift(element)

삭제 : Array.shift()

ret = fruits.unshift("orange");
console.log(fruits); // [ 'orange', 'apple', 'banana', 'melon' ]
console.log(fruits.length); // 4
console.log(ret); // 4

ret = fruits.shift();
console.log(fruits); // [ 'apple', 'banana', 'melon' ]
console.log(fruits.length); // 3
console.log(ret); // orange

 

배열 조작 (2)

배열 요소 삭제/변경 (index) : Array.splice(index, deleteCount, element)

let fruits = [ 'apple', 'banana', 'melon' ];

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

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

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

splice는 원본 배열이 변경된다.

 

배열 조작 (3)

배열 요소 삭제 (index) : Array.slice(start, end)

let fruits = [ 'apple', 'mango', 'kiwi', 'orange' ];

console.log(fruits.slice(1)); // [ 'mango', 'kiwi', 'orange' ]
console.log(fruits); // [ 'apple', 'mango', 'kiwi', 'orange' ]

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

slice는 원본 배열이 변경되지 않는다.

 

배열 병합 : Array.concat(arg1, arg2, ...)

let fruits_concat = ["cherry", "melon"];

console.log(fruits.concat(fruits_concat));
// [ 'apple', 'mango', 'kiwi', 'orange', 'cherry', 'melon' ]
console.log(fruits.concat("strawberry"));
// [ 'apple', 'mango', 'kiwi', 'orange', 'strawberry' ]
console.log(fruits.concat(["cherry", "banana"]));
// [ 'apple', 'mango', 'kiwi', 'orange', 'cherry', 'banana' ]
console.log(fruits);
// [ 'apple', 'mango', 'kiwi', 'orange' ]

concat 또한 원본 배열에는 영향을 주지 않는다.

 

배열 반복문

다양한 반복문을 통해 배열 요소에 접근할 수 있다.

let fruits = [ 'apple', 'mango', 'orange' ];

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

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

for (let key in fruits) {
  console.log(fruits[key]);
}

// 출력값은 모두 공통
// apple
// mango
// orange

 

배열 탐색

• indexOf() : 배열의 index 앞에서부터 탐색한다.
• lastIndexOf() : 배열의 index 뒤에서부터 탐색한다.
• includes() : 배열의 값 포함 여부를 확인한다. (true/false)

let arr_fruits = ["apple", "mango", "kiwi", "orange", "mango"];

console.log(arr_fruits.indexOf("mango")); // 1
console.log(arr_fruits.indexOf("Mango")); // -1
console.log(arr_fruits.indexOf("mango", 2)); // 4

console.log(arr_fruits.lastIndexOf("mango")); // 4
console.log(arr_fruits.lastIndexOf("mango", -2)); // 1
console.log(arr_fruits.lastIndexOf("mango", 0)); // -1

console.log(arr_fruits.includes("orange")); // true
console.log(arr_fruits.includes("banana")); // false

 

배열 변형

• sort() : 배열을 정렬한다.
• reverse() : 배열을 반전시킨다.

let arr_num = [1, -1, 4, 5, 2, 0];
console.log(arr_num); // [ 1, -1, 4, 5, 2, 0 ]
console.log(arr_num.reverse()); // [ 0, 2, 5, 4, -1, 1 ]
console.log(arr_num.sort()); // [ -1, 0, 1, 2, 4, 5 ]
console.log(arr_num.reverse()); // [ 5, 4, 2, 1, 0, -1 ]

let arr_str = ["apple", "mango", "kiwi", "orange"];
console.log(arr_str.sort()); // [ 'apple', 'kiwi', 'mango', 'orange' ]
console.log(arr_str.reverse()); // [ 'orange', 'mango', 'kiwi', 'apple' ]

• join() : 배열 값을 문자열로 변환한다.
• split() : join()과 반대로 문자열을 배열로 변환한다.

let fruits = [ 'apple', 'mango', 'kiwi', 'orange' ];

let str_join = fruits.join();
console.log(str_join); // apple,mango,kiwi,orange

let str_separator = fruits.join(";");
console.log(str_separator); // apple;mango;kiwi;orange

let result = str_separator.split(";");
console.log(result); // [ 'apple', 'mango', 'kiwi', 'orange' ]

 

some()

배열 안에 단 하나라도 콜백 함수의 조건을 만족하는 요소가 있다면 true를 아니면 false 반환한다.

- (method) Array<any>.some(predicate: (value: any, index: number, array: any[])

let users = [
  { name: "kh1", age: 21, job: false },
  { name: "kh2", age: 22, job: false },
  { name: "kh3", age: 23, job: true },
];

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

let some_age = users.some((user) => {
  return user.age < 20;
});
console.log(some_job); // true

let empty = [].some((item) => item < 10);
console.log(empty); // false

빈 배열인 경우 false를 반환한다.

 

every()

배열 안에 모든 요소가 콜백 함수의 조건을 만족하면 true를 아니면 false 반환한다.

- (method) Array<any>.every(predicate: (value: any, index: number, array: any[])

let users = [
  { name: "kh1", age: 21, job: false },
  { name: "kh2", age: 22, job: false },
  { name: "kh3", age: 23, job: true },
];

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

let every_age = users.every((user) => {
  return user.age < 20;
});
console.log(every_age); // false

let every_empty = [].every((item) => item < 10);
console.log(every_empty); // true

every()는 some()과 반대로 빈 배열인 경우 true를 반환한다.

---

자바스크립트 배열에 대한 추가 내용

[Javascript] - [JS] 고차 함수 (higher-order function)

[JS] 고차 함수 (higher-order function)

[Javascript] - [JS] 다차원 배열 (multidimensional array)

[JS] 다차원 배열 (multidimensional array)