JavaScript - 배열 메서드(17)
JavaScript - 배열 메서드(17)
1. 배열
- 여러개의 값을 순서대로 저장할 수 있는 자료구조로 각 값에는 index로 접근할 수 있다.
- 배열의 각 요소는 어떤 타입이든 될수 있다.(숫자, 문자열, 객체 등)
배열의 특징
- 순서가 있는 데이터
- 다양한 자료형
- 가변길이
let arr = [1, 2, 3];
console.log(arr.length);
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
2. 배열 - 요소 조작
push메서드
- 배열의 끝에 요소를 추가한다.
let arr1 = [1, 2, 3];
const newLength = arr1.push(4, 5, 6, 7);
console.log(newLength);
console.log(arr1);
pop메서드
- 배열의 마지막 요소를 제거한다.
- 반환값 : 제거된 요소
let arr2 = [1, 2, 3];
const popedItem = arr2.pop();
console.log(popedItem);
console.log(arr2);
shift
- 배열의 첫번째 요소를 제거한다.
- 반환값 : 제거된 요소
let arr3 = [1, 2, 3];
const shiftedItem = arr1.shift();
console.log(shiftedItem, arr3);
unshift
- 배열의 앞에 요소를 추가한다.
- 반환값 : 배열의 새로운 길이
let arr4 = [1, 2, 3];
const newLength2 = arr4.unshift(0);
console.log(newLength2, arr4);
slice
- 배열의 일부분을 추출해 새로운 배열으로 반환한다.
- 원본의 배열은 변경되지 않는다.
- 반환값 : 추출된 부분이 포함된 새로운 배열
let arr5 = [1, 2, 3, 4, 5];
let sliced = arr5.slice(2, 5);
console.log(sliced);
console.log(arr5);
let sliced2 = arr5.slice(2);
console.log(sliced2);
let sliced3 = arr5.slice(-2);
console.log(sliced3);
concat
- 두개 이상의 배열을 결합해 새로운 배열을 반환한다.
- 반환값 : 결합된 새로운 배열
let arr6 = [1, 2];
let arr7 = [3, 4];
let concatedItem = arr6.concat(arr7);
console.log(concatedItem);
3. 배열 - 순회와 탐색
forEach
- 모든 요소를 순회하면서 각 요소에 특정 동작을 수행시키는 메서드
let arr1 = [1, 2, 3];
arr1.forEach(function (item, idx, arr) {
console.log(idx, item * 2);
});
includes
- 배열에 특정 요소가 포함되어 있는지 확인하는 메서드
- 반환값 : boolean
let arr2 = [1, 2, 3];
let isInclude = arr2.includes(30);
console.log(isInclude);
indexOf
- 특정 요소의 인덱스(위치)를 찾아서 반환하며 요소가 없다면 -1을 반환한다.
- 반환값 : 첫번째로 일치하는 요소의 인덱스
let arr3 = [2, 2, 20];
let index = arr3.indexOf(20);
console.log(index);
findIndex
- 조건을 만족하는 첫번째 요소의 인덱스를 반환한다. 조건을 만족하는 요소가 없으면 -1을 반환한다.
- 반환값 : 첫번째로 조건을 만족하는 요소의 인덱스
let arr4 = [1, 2, 3];
const findedIndex = arr4.findIndex((item) => {
if (item % 2 !== 0) return true;
});
console.log(findedIndex);
find
- 조건을 만족하는 첫번째 요소를 반환한다. 조건을 만족하는 요소가 없으면 undefind를 반환한다.
- 반환값 : 첫 번째로 조건을 만족하는 요소
let arr5 = [{ name: "AR" }, { name: "arang" }];
const finded = arr5.find((item) => item.name === "AR");
console.log(finded);
4. 변형
filter
- 기존 배열에서 조건을 만족하는 요소들만 필터링해 새로운 배열로 반환한다.
- 반환값 : 각 요소에 대해 주어진 함수의 반환값으로 이루어진 새로운 배열
let arr1 = [
{ name: "피카츄", type: "전기" },
{ name: "파이리", type: "불" },
{ name: "이상해씨", type: "풀" },
];
const pokemon = arr1.filter((item) => item.type == "전기");
console.log(pokemon);
map
- 배열의 각 요소에 대해 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다. 원본 배열은 변경되지 않는다.
- 반환값 : 각 요소에 대해 주어진 함수의 반환값으로 이루어진 새로운 배열
let arr2 = [1, 2, 3];
const mapResult1 = arr2.map((item, idx, arr) => {
return item * 2;
});
let names = arr1.map((items) => items.name);
console.log(names);
sort
- 배열을 사전순으로 정렬하는 메서드
let arr3 = ["a", "c", "b"];
arr3.sort();
console.log(arr3);
오름차순 정렬
let arr3 = [10, 3, 5];
arr3.sort((a, b) => {
if (a > b) {
return 1; // b가 a앞에
} else if (a < b) {
return -1; // a가 b 앞에
} else {
return 0; // 자리 유지
}
});
console.log(arr3);
내림차순 정렬
let arr3 = [10, 3, 5];
arr3.sort((a, b) => {
if (a > b) {
return -1; // b가 a앞에
} else if (a < b) {
return 1; // a가 b 앞에
} else {
return 0; // 자리 유지
}
});
console.log(arr3);
toSorted
- 정렬된 새로운 배열을 반환하는 메서드
- sort와 동일하게 배열을 사전순을 정렬하지만 정렬된 새로운 배열을 반환하는 메서드
let arr5 = ["c", "a", "b"];
const sorted = arr5.toSorted();
console.log(arr5);
console.log(sorted);
join
- 배열의 모든 요소를 문자열로 결합한다.
- 반환값 : 결합된 문자열
let arr5 = ["c", "a", "b"];
const sorted = arr5.toSorted();
console.log(arr5);
console.log(sorted);
let arr6 = ["hello", "jini", "woo"];
const joined = arr6.join(" ");
console.log(joined);