여러 개체값을 순차적으로 나열한 선형 자료 구조
대표 속성과 메서드
배열 크기 및 배열 여부 확인: 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
를 통해 배열 요소의 개수 확인 가능
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)이다.
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 }
}
*/
Array.isArray(value);
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
배열의 일부 요소를 삭제한다. *단 삭제해도 배열 사이즈가 그대로이다.
delete array[index];
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
Array.push(element); // 배열 추가
Array.pop(); // 배열 삭제
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
Array.unshift(element); // 배열 추가
Array.shift(); // 배열 삭제
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
원본 배열을 변경시킨다.
Array.splice(index[, deleteCount, elem1, ..., elemN])
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']
원본 배열을 변경하지 않는다.
Array.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(arr1, arr2...);
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 (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}
fruits 배열 속 각각의 element에 접근
for (let fruit of fruits) {
console.log(fruit);
}
fruits 객체 속 key에 접근
for (let key in fruits) {
console.log(fruits[key]);
}
Array.indexOf(item, from); // 앞에서부터 탐색
Array.lastIndexOf(item, from); // 뒤에서부터 탐색
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('Banana')); // false
console.log(fruits.includes(0)); // false
Array.sort(); // 정렬
Array.reverse(); // 반전
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']
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] 내림차순 정렬
배열 값을 문자열로 연결하여 변환
Array.join(seperator);
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']
배열 요소별 콜백 함수 각각에 실행
Array.forEach(function (item, index, array) {});
배열 요소별 함수 호출 및 결과를 배열로 반환
Array.map(function (item, index, array) {});
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]
콜백함수의 조건을 만족하는 단 하나의 값만 반환한다.
Array.indexOf()
와 비슷한 것 같다. 앞에서부터 탐색해서 조건에 만족하는 값을 반환한다.
Array.find(function (item, index, array) {});
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 }
콜백함수의 조건을 만족하는 값을 배열로 반환한다.
Array.filter(function (item, index, array) {});
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 }]
요소별 함수 수행 누적 결과값을 반환한다.
Array.reduce(function (accumulator, item, index, array) {});
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
배열 내 단 하나라도 콜백 함수의 조건을 만족하는 요소가 있다면 true, 아니면 false를 반환한다. (빈 배열인 경우 false)
Array.some(function (item, index, array) {});
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
배열 내 모든 요소가 콜백 함수의 조건을 만족한다면 true, 아니면 false를 반환한다. (빈 배열인 경우 true)
Array.every(function (item, index, array) {});
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