20240701 배열 메소드
1. push - 배열 요소 추가
let movie = ["비그치다", "매드맥스 ", "인사이드 아웃"];
// 배열의 가장 끝에 요소를 추가하고, 새로운 배열의 길이를 반환.
const newLength = movie.push("행복을 찾아서");
console.log(newLength);
console.log(movie);
movie.push("쇼군", "등등");
console.log(movie);- pop - 배열 요소 제거
console.log("-- 배열 2. pop --");
const removeItem = movie.pop();
console.log(removeItem);
console.log(movie);
let movie2 = [];
// 에러가 발생하지 않고 undefined가 반환됨.
const removeItem2 = movie.pop();
console.log(removeItem2);- shift - 맨앞의 요소를 제거, 제거한 요소를 반환
console.log(" shift - 맨앞의 요소를 제거, 제거한 요소를 반환");
const removeItem3 = movie.shift();
console.log(removeItem);
console.log(movie);- unshift - 맨앞에 요소를 추가, 배열의 길이를 반환
console.log("unshift - 맨앞에 요소를 추가, 배열의 길이를 반환");
const newLength2 = movie.unshift("비그치다");
console.log(movie);shift vs unshift
-
shift : 배열의 맨 앞의 요소를 삭제, 기존의 배열 요소를 한 칸씩 앞으로 이동시켜야 함.
-
unshift : 배열의 맨 앞에 추가, 기존의 배열 요소를 한 칸씩 뒤로 이동시켜야 함.
-> shift 와 unshift 는 push 와 copy에 비해 성능이 낮음 -
slice - 기존 배열에서 특정 범위를 잘라 새로운 배열을 반환
// + 원본 배열을 유지함.
console.log("slice : 기존 배열에서 특정 범위를 잘라 새로운 배열을 반환함");
const arr3 = [1, 2, 3];
const sliced = arr3.slice(0, 2); // 0번째 인덱스에서 2개의 요소를 선택해서 자르기.
console.log(arr3);
console.log(sliced);
const sliced2 = arr3.slice(1); // 자르기 시작 위치만 설정.
console.log(sliced2); // 시작 위치에서 끝까지
// 시작 위치를 음수로 설정한 경우.
console.log("시작 위치를 음수로 설정한 경우.");
console.log(arr3.slice(-1)); // 배열의 끝에서 첫번째까지의 요소 (3)
console.log(arr3.slice(-2)); // 배열의 끝에서 두번째까지의 요소
console.log(arr3.slice(-3)); // 배열의 끝에서 세번까지의 요쇼- concat - 서로 다른 배열을 이어붙여 새 배열을 반환하는 메소드
arrA = [1, 2];
arrB = [3, 4];
let arrC = arrA.concat(arrB);
console.log(arrC);- 배열의 순회 메소드
7-1. foreach
- 서로 다른 배열을 이어붙여 새 배열을 반환하는 메소드
- foreach 는 배열의 모든 요소를 각각 순회하여 인수로 전달된 콜백 메소드가 정의된 대로 요소를 작업함.
item: 현재 순회중인 배열 요소
index : 현재 순회하는 배열 요소의 인덱스
array : 순회 중인 배열
++callback method: 인수로 함수를 요구함.
// call back 메소드 정리 => foreach 메소드의 매개변수로 전달
// OOP , SOLID - OCP 원칙을 적용했다고 봐도 무방함.
// 사용자 친화적 API로 제공되고 있음. (foreach 이름 자체가)
function cb(item, idx) {
console.log(`${idx} 번째 요소 : ${item}`);
}
const arr4 = [1, 2, 3, 4, 5];
arr.forEach(cb);7-2. 콜백 메소드를 화살표 표현식으로 변경
arr4.forEach((item, idx) => {
console.log(`${idx} 번째 요소 : ${item}`);
});- 탐색 메소드
- 배열에서 특정 조건을 만족하는 요소를 찾아내는 메소드
arr.indexOf(item.formIndex);
- item : 배열에서 찾으려는 요소값 => 검색 조건
- fromIndex : 탐색을 시작할 위치 let arr5 = [1, 3, 5, 7, 1];
// 탐색이 완료되면 검색 위치값을 반환하면서, 탐색을 중지함.
console.log(arr5.indexOf(1, 0)); // 1: 검색 조건, 0: 탐색 시작 위치
// 0번째 요소부터 1이 나오는지 검색하라
arr5 = [2, 3, 5, 7, 1];
console.log(arr5.indexOf(1, 0));
arr5 = [1, 3, 5, 7, 1];
console.log(arr5.indexOf(1, -1)); // -1 은 제일 끝을 의미. -> 배열의 끝에서 탐색을 시작.
console.log(arr5.indexOf(1, -2));
// 탐색 결과가 없는 경우
console.log(arr5.indexOf(9)); // 없으면 -1 을 반환.
// 탐색 조건과 배열의 요소의 데이터 타입이 다른 경우 => -1을 반환.
// 비교 연산자 (==) 로 요소를 비교하므로, 자료형이 다르면 다른 값으로 평가한다.
console.log(arr5.indexOf("3"));
// 배열에서 객체를 탐색하는 경우. ==> -1 반환.
// indexOf 메소드로는 객체 자료형의 값을 탐색할 수 없다.
// findIndex, find 메소드를 사용해야 함.
arr5 = [{ name: "홍" }, 1, 2, 4];
console.log(arr5.indexOf({ name: "홍 " }));- 탐색 메소드 - includes 메소드
- 배열에 특정 요소가 있는지를 판별하는 메소드
arr = [1, 3, 5, 7, 1];
console.log(arr.includes(3)); //-> 존재하면 true 반환, 존재하지 않으면 false 반환.
console.log(arr.includes(9)); // false
console.log(arr.includes("3")); // false- 탐색 메소드 - findIndex - 콜백 함수
- findIndex
인수로 콜백 함수를 전달해야 함 -> 판별 함수
true : 조건식이 만족하는 경우
false : 조건식을 만족하지 않는 경우 - 판별 함수를 만족하는 첫 번재 요소의 인덱스 번호를 반환하고, 없으면 -1 를 반환.
item : 현재 요소
index : 현재 인덱스
array : 탐색 대상 배열- findIndex 의 콜백 메소드를 정의
배열 요소 중에서 짝수를 탐색하기
function determine(item, idx, arr) {
if (item % 2 === 0) {
// 조건식: 짝수여부 확인.
return true;
} else {
return false;
}
}
// 인덱스 값을 반환하는 것을 꼭 기억할 것 !!!!! (요소의 값을 반환하는 것이 아님!! )
arr5 = [1, 3, 5, 6, 8];
let index = arr5.findIndex(determine);
console.log(index); // 결과 3 => 인덱스가 3 => 즉 인덱스가 3인 요소를 출력한 것과 동일.- 탐색 메소드 - findIndex - 화살표 함수
index = arr5.findIndex((item) => (item % 2 === 0 ? true : false));
console.log(index);- 탐색 메소드 - findIndex - 객체 탐색
arr5 = [
{ name: "홍", age: 23 }, // idx : 0
{ name: "몽", age: 24 }, // idx : 1
{ name: "모", age: 25 }, // idx : 2
{ name: "용", age: 26 }, // idx : 3
];
index = arr5.findIndex((item) => item.name === "홍");
console.log(index);- 탐색 메소드 - find 메소드
- find 는 findIndex 와 달리, 탐색해서 찾으면, 인덱스 정보가 아닌 요소의 정보를 반환함.
let element = arr5.find((item) => item.name === "홍");
console.log(element);- 탐색 메소드 - filter
- 배열에서 조건을 만족하는 요소만 모아 새로운 배열로 반환.
arr5 = [
{ name: "홍", hobby: "drunk" }, // idx : 0
{ name: "몽", hobby: "sleep" }, // idx : 1
{ name: "모", hobby: "achole" }, // idx : 2
{ name: "용", hobby: "nicotin" }, // idx : 3
];
let filterArr = arr5.filter((item) => item.hobby === "sleep");
console.log(filterArr);- 변형 메소드 - map
- 배열을 변형하거나 요소를 재정렬
- 콜백 메소드를 매개변수로 전달함
- item, index, array 가 제공됨.
arr5 = [1, 2, 3, 4];
let newArr = arr5.map((item) => item * 3);
console.log(newArr);
console.log("13. 변형 메소드 - map with 객체배열 ");
arr5 = [
{ name: "홍", hobby: "drunk" }, // idx : 0
{ name: "몽", hobby: "sleep" }, // idx : 1
{ name: "모", hobby: "achole" }, // idx : 2
{ name: "용", hobby: "home" }, // idx : 3
];
newArr = arr5.map((item) => item.name);
console.log(newArr);- 정렬 메소드 - sort
- 배열의 요소를 재정렬하는 메소드
- 콜백 메소드를 매개변수로 전달, 비교함수 (오름차순, 내림차순)
- item, index, array 가 제공됨.
arr5 = ["b", "a", "c"]; // 문자 형태의 요소
arr5.sort(); // 오름차순 정렬
console.log(arr5);
arr5 = [10, 5, 3]; // 숫자 형태의 요소
arr5.sort();
console.log(arr5);-> 문자 형태는 정렬이 되나, 숫자 형태는 정렬이 되지 않는다. 즉 비교함수 사용해야 함.
14-1. 비교 함수 선언하기 - 오름차순 정렬
unction compare(a, b) {
if (a > b) {
return 1;
} else if (a < b) {
return -1;
} else {
return 0;
}
}
arr5 = [10, 5, 3];
arr5.sort(compare);
console.log(arr5);14-2. 비교 함수 선언하기 - 내림차순 정렬
function compare2(a, b) {
if (a > b) {
return -1;
} else if (a < b) {
return 1;
} else {
return 0;
}
}
arr5 = [5, 10, 3];
arr5.sort();
console.log(arr5);- 변형 메소드 - 문자열 연결, Join 메소드
- 배열 요소를 모두 연결해 하나의 문자열로 반환.
- 분리 기호를 사용하는 구분자를 인수로 전달, 필수는 아님
- 생략할 경우, 기본적으로 ","를 사용
arr5 = ["너무", "어려워요", "JavaScript"];
console.log(arr5.join()); // 구분자 : 디폴트값으로 ","를 사용.
console.log(arr5.join("-")); // 구분자 : "-" 사용.- 변형 메소드 - reduce
- 배열 요소를 모두 순회하면서, 인수로 제공한 함수를 실행하고, 단 하나의 결과값을 반환한다.
- reduce 메소드를 활용할 경우
배열의 모든 요소의 값에 대한 누적값을 구할 수 있음.
- reducer = 콜백 메소드를 전달해야 함.
- 콜백 메소드 전달시, 초기값을 전달
- acc 누산기가 제공됨
- 이전함수의 호출 결과를 저장함.
- reducer (콜백 메소드) 의 두 번째 매개변수가 누산기의 초기값이 됨.
- item, index, array 가 제공됨.
acc , 누산기
item : 현재의 배열의 요소
acc + item : 콜백 메소드
0 : acc 의 초기값. arr5 = [1, 2, 3, 4, 5];
let result = arr5.reduce((acc, item) => acc + item, 0);
console.log(result);