배열 (Array)

여러 개체값을 순차적으로 나열한 선형 자료 구조

대표 속성과 메서드

  • 배열 크기 및 배열 여부 확인: 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.sort(), Array.forEach(), Array.map(), Array.find(), Array.filter(), Array.reduce()

  • 논리연산: Array.some(), Array.every()


배열 선언/접근/속성

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

  • 접근 방법: Array[index]를 통해 index를 통하여 O(1) 접근

  • 배열 속성: Array.length를 통해 배열 요소의 개수 확인 가능

Copy 
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
console.log(fruits[2]); // melon

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

배열의 실체

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

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

Copy 
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']

console.log(Object.getOwnPropertyDescriptors(nums));
/*
{
    '0': { value: 'one', writable: true, enumerable: true, configurable: true },
    '1': { value: 'two', writable: true, enumerable: true, configurable: true },
    length: { value: 2, writable: true, enumerable: false, configurable: false },
    once: { value: 'once', writable: true, enumerable: true, configurable: true },
    twice: { value: 'twice', writable: true, enumerable: true, configurable: true }
}
*/

배열 타입 확인 및 요소 삭제

배열 타입 확인

Copy 
Array.isArray(value);
Copy 
let num = 123.456;
let str = 'abc';
let fruits = ['apple', 'orange', 'banana'];

console.log(Array.isArray(num)); // false
console.log(Array.isArray(str)); // false
console.log(Array.isArray(fruits)); // true

배열 요소 삭제

배열의 일부 요소를 삭제한다. *단 삭제해도 배열 사이즈가 그대로이다.

Copy 
delete array[index];
Copy 
let fruits = ['apple', 'orange', 'banana'];

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

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

배열 조작

배열 추가/삭제 (LIFO - Back)

Copy 
Array.push(element); // 배열 추가
Array.pop(); // 배열 삭제
Copy 
let fruits = ['apple', 'orange', 'banana'];

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

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

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

Copy 
Array.unshift(element); // 배열 추가
Array.shift(); // 배열 삭제
Copy 
let fruits = ['apple', 'orange', 'banana'];

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

ret = fruits.unshift('watermelon');
console.log(fruits); // ['watermelon', 'orange', 'banana']
console.log(ret); // 3

배열 삭제/변경 (index)

원본 배열을 변경시킨다.

Copy 
Array.splice(index[, deleteCount, elem1, ..., elemN])
Copy 
let fruits = ['apple', 'orange', 'melon'];

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

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

console.log(fruits.splice(1, 1, 'mango', 'lemon')); // ['melon']
console.log(fruits); // ['apple', 'mango', 'lemon', 'kiwi']

배열 삭제 (index)

원본 배열을 변경하지 않는다.

Copy 
Array.slice([start], [end]);
Copy 
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']

배열 병합

원본 배열을 변경하지 않는다.

Copy 
Array.concat(arr1, arr2...);
Copy 
let fruits = ['apple', 'orange', 'melon'];

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

배열 반복문

for … (index)

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

for … of

fruits 배열 속 각각의 element에 접근

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

for … in

fruits 객체 속 key에 접근

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

배열 탐색

Copy 
Array.indexOf(item, from); // 앞에서부터 탐색
Array.lastIndexOf(item, from); // 뒤에서부터 탐색
Array.includes(item, from); // 값 포함 여부 확인
Copy 
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('Banana')); // false
console.log(fruits.includes(0)); // false

배열 변형

배열 정렬/반전

Copy 
Array.sort(); // 정렬
Array.reverse(); // 반전
Copy 
let nums = [1, -1, 4, 5, 2, 0];

console.log(nums.sort()); // [-1, 0, 1, 2, 4, 5]
console.log(nums.reverse()); // [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']
Copy 
let nums = [1, -1, 4, 5, 2, 0];

console.log(nums.sort((a, b) => a - b)); // [-1, 0, 1, 2, 4, 5] 오름차순 정렬
console.log(nums.sort((a, b) => b - a)); // [5, 4, 2, 1, 0, -1] 내림차순 정렬

배열 변환

배열 값을 문자열로 연결하여 변환

Copy 
Array.join(seperator);
Copy 
let fruits = ['apple', 'orange', 'banana', 'melon'];
let str = fruits.join();
console.log(str); // apple,orange,banana,melon

let str_seperator = fruis.join(';');
console.log(str_seperator); // apple;orange;banana;melon
let result = str_seperator.split(';');
console.log(result); // ['apple', 'orange', 'banana', 'melon']

배열 반복

forEach

배열 요소별 콜백 함수 각각에 실행

Copy 
Array.forEach(function (item, index, array) {});

map

배열 요소별 함수 호출 및 결과를 배열로 반환

Copy 
Array.map(function (item, index, array) {});
Copy 
let nums = [1, 2, 3, 4, 5];
let use_map = nums.map((item) => {
  return item * 2;
});
console.log(use_map); // [2, 4, 6, 8, 10]

find

콜백함수의 조건을 만족하는 단 하나의 값만 반환한다.

Array.indexOf()와 비슷한 것 같다. 앞에서부터 탐색해서 조건에 만족하는 값을 반환한다.

Copy 
Array.find(function (item, index, array) {});
Copy 
let users = [
  { name: 'bob', age: 17, job: false },
  { name: 'alice', age: 20, job: false },
  { name: 'john', age: 27, job: true },
];
let find_job = users.find((user) => {
  return user.job == false;
});
console.log(find_job); // { name: 'bob', age: 17, job: false }

let find_age = users.find((user) => {
  return user.age > 19;
});
console.log(find_age); // { name: 'alice', age: 20, job: false }

filter

콜백함수의 조건을 만족하는 값을 배열로 반환한다.

Copy 
Array.filter(function (item, index, array) {});
Copy 
let users = [
  { name: 'bob', age: 17, job: false },
  { name: 'alice', age: 20, job: false },
  { name: 'john', age: 27, job: true },
];
let filter_job = users.filter((user) => {
  return user.job == false;
});
console.log(filter_job); // [{ name: 'bob', age: 17, job: false },{ name: 'alice', age: 20, job: false }]

let filter_age = users.filter((user) => {
  return user.age > 19;
});
console.log(filter_age); // [{ name: 'alice', age: 20, job: false },{ name: 'john', age: 27, job: true }]

reduce

요소별 함수 수행 누적 결과값을 반환한다.

Copy 
Array.reduce(function (accumulator, item, index, array) {});
Copy 
let nums = [1, 2, 3, 4, 5];
let call_count = 0;

let sum = nums.reduce((acc, cur) => {
  call_count++;
  return acc + cur;
});

console.log(call_count); // 5
console.log(sum); // 5

배열 논리연산

some

배열 내 단 하나라도 콜백 함수의 조건을 만족하는 요소가 있다면 true, 아니면 false를 반환한다. (빈 배열인 경우 false)

Copy 
Array.some(function (item, index, array) {});
Copy 
let users = [
  { name: 'bob', age: 17, job: false },
  { name: 'alice', age: 20, job: false },
  { name: 'john', age: 27, job: true },
];
let some_job = users.some((user) => {
  return user.job == false;
});
console.log(some_job); // true

let some_age = users.filter((user) => {
  return user.age < 16;
});
console.log(some_age); // false

every

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

Copy 
Array.every(function (item, index, array) {});
Copy 
let users = [
  { name: 'bob', age: 17, job: false },
  { name: 'alice', age: 20, job: false },
  { name: 'john', age: 27, job: true },
];
let every_job = users.some((user) => {
  return user.job == false;
});
console.log(every_job); // false

let every_age = users.filter((user) => {
  return user.age > 16;
});
console.log(every_age); // true
Copy