기존 블로그에 작성한 내용을 velog로 이전한 글입니다
1. 배열이란
-
여러 개의 값을 순차적으로 나열한 자료 구조
-
인덱스 : 배열에서 위치를 나타냄
-
요소 : 배열의 값
2. 자바스크립트의 배열은 객체이다
자바스크립트에서 배열은 배열이 아니라 객체이다.
| 구분 | 일반적인 배열 | 자바스크립트 배열 |
|---|---|---|
| 동일 크기 메모리 공간 | O | X |
| 연속 나열 | O | X |
-
장점: 특정 요소를 탐색하거나 요소를 삽입 또는 삭제하는 경우 더 빠르다.
-
단점: 인덱스 접근시 더 느리다.
3. 희소배열과 length
-
array의 length를 고쳐도 실제 배열이 길어지지는 않는다.
-
배열의 위치가 연속적이지 않게 되므로 희소배열이 된다.
const arr = [1];
// length 프로퍼티에 현재 length 프로퍼티 값보다 큰 숫자 값을 할당
arr.length = 3;
// length 프로퍼티 값은 변경되지만 실제로 배열의 길이가 늘어나지는 않는다.
console.log(arr.length); // 3
console.log(arr); // [1, empty × 2]4. 배열 생성자 함수
4.1. 배열 리터럴
const arr = {};4.2. Array 생성자 함수
const arr1 = new Array(10);
console.log(arr1); // [empty × 10]
const arr2 = new Array(10, 11); // 인수가 두 개면 배열 요소로 만듦
console.log(arr2); // [ 10, 11 ]
const arr3 = new Array({}); // 인수가 한 개여도 숫자가 아니면 배열 요소로 만듦
console.log(arr3);4.3 Array.of
인수가 숫자 하나여도 인수를 요소로 갖는 배열을 생성
const arr = Array.of(1); // 요소가 하나여도 배열의 요소로 만듦
console.log(arr);4.4 Array.from
유사 배열 객체 or 이터러블 객체를 변환하여 새로운 배열을 생성, 두 번째 인수로 함수를 받아 배열을 채워 넣을 수 있다.
// 이터러블인 문자열을 배열로 만든다
const arr1 = Array.from("Hello");
console.log(arr1); // [ 'H', 'e', 'l', 'l', 'o' ]
// 배열 요소별 순차적으로 호출할 함수를 두 번째 인수로 넣을 수 있다
const arr2 = Array.from({ 0: 0, 1: 1, 2: 2, length: 3 }, function (v, i) {
console.log(v); // 순차적으로 0, 1, 2를 출력한다
return i;
});
console.log(arr2); // [0, 1, 2, 3, 4]5. 배열 요소의 참조
배열을 조회할 때는 대괄호와 인덱스를 사용한다.
const arr = [1, 2];
console.log(arr[0]); // 1
// 인덱스가 없을 경우 undefined 반환
console.log(arr[100]); // undefined6. 배열 요소의 추가와 갱신
const arr = [];
// 배열 요소의 추가
arr[0] = 1;
arr["1"] = 2;
// 프로퍼티 추가
arr["hahaha"] = 3;
arr[1.129] = 4;
arr[-1] = 5;7. 배열 요소의 삭제
-
delete
배열은 객체이기 때문에 프로퍼티를 삭제하는 것처럼 배열 요소도 삭제 가능하다. 단 배열 삭제 후 희소배열이 되기 때문에 사용하지 말아야 한다.
-
splice
배열을 삭제할 때 사용하는 메소드이다.
const arr = [1, 2, 3];
// 배열 요소의 삭제
delete arr[1];
console.log(arr); // [1, empty, 3]
const arr2 = [1, 2, 3];
// Array.prototype.splice(삭제를 시작할 인덱스, 삭제할 요소수)
// arr[1]부터 1개의 요소를 제거
arr2.splice(1, 1);
console.log(arr2); // [1, 3]8. 배열 메소드
8.1 원본 미수정 메소드
탐색: indexOf, isArray
추가, 제거: slice, join
변환: reverse
8.2 원본 미수정 메소드
추가, 제거: push, pop, unshift, shift, splice
연결: concat
변환: join
8.3 메소드 사용법
const array = [ 1, 2, 3, 4, 5, 6 ];
const array2 = [ 7, 8, 9, 10 ];
// 원본 변경
const length = array.push(1);
길이 = array.push(넣을요소); // 배열 끝에 요소 추가 (원본 변경)
const lastElement = array.pop();
제거된요소 = array.pop(); // 배열 끝 요소를 제거 (원본 변경)
const length2 = array.unshift(0);
길이 = array.unshift(넣을요소); // 배열 앞에 요소 추가 (원본 변경)
const firstElement = array.shift();
제거된요소 = array.shift(); // 배열 첫 요소를 제거 (원본 변경)
const reversedArray = array.reverse();
거꾸로된배열 = 배열.reverse(); // 배열 순서를 반대로 바꿈 (원본 변경)
array.fill(0);
배열.fill(채울요소, (시작할인덱스), (끝낼인덱스)); // 배열에 전달 받은 요소를 처음부텉 끝까지 채움 (원본 변경)
// 원본 미변경
const deletedElement = array.splice(3);
제거된요소 = array.splice(제거시작할인덱스, (제거개수), (제거후대신넣을요소)); // 배열 요소를 제거하고 교체한다 괄호는 선택옵션
const copyElement = array.slice(0,3);
복사된요소 = array.slice(시작인덱스, 끝(복사미포함)); // 배열을 복사하여 반환한다
const connectedArray = array.concat(array2);
연결된배열 = 배열1.concat(배열2); // 배열1과 배열2 연결
const newString = array.join(':');
구분자로구분한문자열 = 배열.join('구분자') // 기본 구분자는 ,
const bool = array.includes(1, 1); // 배열에 요소 1가 포함되어 있는지 인덱스 1부터 확인한다.
const bool2 = array.includes(3, -1); // 배열에 요소 3가 포함되어 있는지 인덱스 2(arr.length-1)부터 확인한다.
참거짓 = 배열.includes(찾을요소, (시작인덱스))
[1, [2, [3, [4]]]].flat()); // [1, 2, [3, [4]]]
[1, [2, [3, [4]]]].flat(2); // [1, 2, 3, [4]]
배열.flat(평탄화 단계); // 배열을 평탄화 해준다배열 메소드 중 push와 pop을 이용하여 스택을 만들 수 있다.
// 스택 기능 구현
const Stack = (function () {
const Stack = function (array) {
if (!Array.isArray(array)) throw new Error(`${array} is not Array`);
this.array = array;
};
Stack.prototype.push = function (n) {
const len = this.array.push(n);
console.log(
`${n}을/를 배열에 넣었습니다. 현재 배열: ${this.array} 배열의 길이: ${len}`
);
return len;
};
Stack.prototype.pop = function () {
const lastElement = this.array.pop();
console.log(
`마지막 배열 요소(${lastElement})을/를 제거했습니다. 현재 배열: ${this.array}`
);
return lastElement;
};
return Stack;
})();
const stack = new Stack([1, 2, 3, 4, 5, 6, 7, 8]);
console.log(stack); //Stack { array: [1, 2, 3, 4, 5, 6, 7, 8] }
stack.push(9); // 9을/를 배열에 넣었습니다. 현재 배열: 1,2,3,4,5,6,7,8,9 배열의 길이: 9
stack.pop(); // 마지막 배열 요소(9)을/를 제거했습니다. 현재 배열: 1,2,3,4,5,6,7,8
// 클래스로 스택 기능 구현
class ClassStack {
constructor(array) {
if (!Array.isArray(array)) throw new Error(`${this.array} is not Array`);
this.array = array;
}
push(n) {
const len = this.array.push(n);
console.log(
`${n}을/를 배열에 넣었습니다. 현재 배열: ${this.array} 배열의 길이: ${len}`
);
return len;
}
pop(n) {
const lastElement = this.array.pop(n);
console.log(
`마지막 배열 요소(${lastElement})을/를 제거했습니다. 현재 배열: ${this.array}`
);
return lastElement;
}
}
const classStack = new ClassStack([1, 2, 3, 4, 5, 6, 7, 8]);
console.log(classStack); // ClassStack { array: [1, 2, 3, 4, 5, 6, 7, 8] }
classStack.push(9); // 9을/를 배열에 넣었습니다. 현재 배열: 1,2,3,4,5,6,7,8,9 배열의 길이: 9
classStack.pop(); // 마지막 배열 요소(9)을/를 제거했습니다. 현재 배열: 1,2,3,4,5,6,7,89. 고차함수
고차함수는 함수를 전달 받거나 함수를 반환하는 함수이다.
9.1 Array#sort
배열의 요소를 문자열로 변경 후 정렬한다. 원본 배열을 수정한다.
const company = ["google", "apple", "microsoft", "삼성", "엘지"];
company.sort(); // 오름차순 정렬
console.log(company); // [ 'apple', 'google', 'microsoft', '삼성', '엘지' ]
// 배열 요소가 숫자인 경우 문자열로 변경하기 때문에 오류가 생길 수 있어 함수로 처리한다.
const points = [40, 100, 1, 5, 2, 25, 10];
// 비교 함수의 반환값이 0보다 작은 경우, a를 우선하여 정렬한다.
points.sort(function (a, b) {
return a - b;
});
// 비교 함수의 반환값이 0보다 큰 경우, b를 우선하여 정렬한다.
points.sort(function (a, b) {
return b - a;
});
// 문자열 기준 정렬은 -연산자를 쓸 수 없어 삼항연산자로 처리함
const member = [
{
name: "Yu",
age: 32,
address: "incheon",
sign: 2008,
content: "JavaScript",
},
{ name: "Jeon", age: 30, address: "incheon", sign: 2009, content: "HTML" },
{ name: "Park", age: 20, address: "seoul", sign: 2015, content: "CSS" },
];
function compare(key) {
return function (a, b) {
return a[key] > b[key] ? 1 : -1;
};
}
member.sort(compare("content"));
console.log(member);9.2 Array#forEach
배열의 요소를 콜백함수의 인수로 하나하나씩 전달하고 실행한다.
원본 배열을 수정하지 않고 반환값이 항상 undefined이다.
원본 배열을 수정하려면 콜백 함수가 직접 변경해야 한다.
첫번째 인수로 함수, 두번째 인수로 this로 사용할 객체를 전달한다. (두번째 생략 가능)
for문과 달리 break과 continue를 사용할 수 없다.
[1, 2, 3].forEach((item, index, arr) => {
console.log(`요소값: ${item}, 인덱스: ${index}, this: ${arr}`);
});9.3 Array#map
forEach와 같으나 콜백함수의 반환 값들로 이루어진 새로운 배열을 반환한다.
원본 배열은 변경되지 않는다.
첫번째 인수로 함수, 두번째 인수로 this로 사용할 객체를 전달한다. (두번째 생략 가능)
const numbers = [1, 4, 9];
const roots = numbers.map((item) => Math.sqrt(item), this로사용할객체);
console.log(roots); // [ 1, 2, 3 ]9.4 Array#filter
map과 같으나 콜백함수의 실행 결과가 true인 요소들로 이루어진 새로운 배열을 반환한다.
원본 배열은 변경되지 않는다.
첫번째 인수로 함수, 두번째 인수로 this로 사용할 객체를 전달한다. (두번째 생략 가능)
const numbers = [1, 2, 3, 4, 5];
// 짝수만을 필터링한다
const evens = numbers.filter((item) => !(item % 2));
console.log(evens); // [2, 4]9.5 Array#reduce
배열을 순회하면서 이전 콜백함수의 반환값과 배열의 요소에 대해 인수로 전달된 콜백 함수를 실행하여 결과를 만들고 반환한다.
원본 배열은 변경되지 않는다.
하나의 결과값을 반환한다.
첫번째 인수로 함수, 두번째 인수로 초기값을 적는다.
// 1부터 4까지 누적 곱을 구한다.
const multi = [1, 2, 3, 4].reduce(
(accumulator, currentValue, index, array) => accumulator * currentValue,
0
);
console.log(multi); // 249.6 Array#some
콜백함수로 전달된 인수 중 하나라도 참이 있다면 true, 아니면 false를 반환한다.
첫번째 인수로 함수, 두번째 인수로 this로 사용할 객체를 전달한다. (두번째 생략 가능)
const result = [5, 10, 15].some((item) => item > 10);
console.log(result); // true9.7 Array#every
콜백함수로 전달된 인수가 모두 참일 경우 true, 아니면 false를 반환한다.
첫번째 인수로 함수, 두번째 인수로 this로 사용할 객체를 전달한다. (두번째 생략 가능)
// 배열의 모든 요소가 3보다 큰지 확인
let result = [5, 10, 15].every((item) => item > 3);
console.log(result); // true9.8 Array#find
콜백 함수로 전달된 인수의 참거짓을 가려 그 결과가 참인 첫번째 요소를 반환한다.
참인 요소를 찾고 종료되므로 제일 처음 참 조건을 만족한 단 하나의 결과만을 리턴한다.
찾는 값이 없을 경우 undefined를 반환한다.
const member = [
{ name: "Lee", address: "Seoul" },
{ name: "Kim", address: "Incheon" },
{ name: "Choi", address: "Incheon" },
{ name: "Park", address: "Seoul" },
];
// address가 Seoul인 요소를 반환한다.
const result = member.find((item) => item.address === "Seoul");
// Array#find는 배열이 아니라 요소를 반환한다.
console.log(result); // { name: 'Lee', address: 'Seoul' }9.9 Array#findIndex
콜백 함수로 전달된 인수의 참거짓을 가려 그 결과가 참인 첫번째 요소의 인덱스를 반환한다.
찾는 값이 없을 경우 -1을 반환한다
const member = [
{ name: "Lee", address: "Seoul" },
{ name: "Kim", address: "Incheon" },
{ name: "Choi", address: "Incheon" },
{ name: "Park", address: "Seoul" },
];
// address가 Seoul인 요소를 반환한다.
const result = member.findIndex((item) => item.address === "Seoul");
// Array#find는 배열이 아니라 요소를 반환한다.
console.log(result); // { name: 'Lee', address: 'Seoul' }9.10 Array#flatMap
map을 통해 생성된 새로운 배열을 평탄화한다.
const arr = ["hello", "world"];
// flatMap은 1단계만 평탄화한다.
console.log(arr.flatMap((str, index) => [index, [str, str.length]]));
// [[0, ['hello', 5]], [1, ['wolrd', 5]]] => [0, ['hello', 5], 1, ['world', 5]]
FrontEnd Developer