배열과 관련 메서드

RingKim1·2024년 4월 30일

JavaScript method

JavaScript

목록 보기

4/10

필요성

배열 메서드는 데이터 관리, 검색, 조작 등 다양한 작업을 효율적으로 수행
메서드를 활용하여 복잡한 데이터 처리 작업을 간단하게 처리
~~for문 쓰기 귀찮아서~~

머릿속에 모든 것을 외우기 어렵지만, 정리를 해뒀다는 사실을 기억해두면 나중에 효율적으로 찾아쓸 수 있다.

📌배열 메서드

반복 작업

forEach()
배열 내 요소를 한번씩 순회

let fruits = ["사과", "오렌지", "배"];

function showFriuts(item) {console.log(item)}

fruits.forEach(showFriuts(item)) // 사과, 오렌지, 배

// 기존 방식
for (let i=0; i<fruits.length; i++) {
	console.log(fruits[i])
} // 사과, 오렌지, 배

map()
배열을 순회해서 처리한 새로운 배열을 반환하기 위한 함수

const numbers = [1, 2, 3, 4, 5];

const doubledNumbers = numbers.map(function(number) {
    return number * 2; // 매핑된 결과를 새로운 배열로 반환
});

console.log(doubledNumbers);
// 출력: [2, 4, 6, 8, 10]

filter()
배열의 요소를 순회하면서 콜백 함수를 사용하여 원하는 조건에 따라 필터링하는 함수
필터링된 배열을 반환

let arr = [1,2,3,4,5,6]

function isEven(value) {
  return value % 2 === 0; // 짝수인 경우 반환
}

const result = arr.filter(isEven);
conslole.log(result); // [2,4,6]

reduce()
배열의 모든 요소에 콜백 함수를 적용하여 하나의 결과 값을 생성하는 함수

arr.reduce(callback(accumulator, currentValue, index, array), initialValue);
// 배열.reduce(callback(누적값, 현재값, 인덱스, 요소), 초기값);
콜백의 최초 호출 때 accumulator와 currentValue는 다음 두 가지 값 중 하나를 가질 수 있습니다.
만약 reduce() 함수 호출에서 initialValue를 제공한 경우, accumulator는 initialValue와 같고 currentValue는 배열의 첫 번째 값과 같습니다.
initialValue를 제공하지 않았다면, accumulator는 배열의 첫 번째 값과 같고 currentValue는 두 번째와 같습니다.
[mdn]

콜백 함수 대신 화살표 함수와 연계해서 사용 가능

let array = [0,1,2,3,4]

array.reduce(function(sum,cur) {
    return sum += cur;
}); // 10

array.reduce((sum, cur) => sum + cur); // 10

데이테 추가 및 삭제

push()
배열 끝에 요소를 추가
pop()
배열 끝 요소를 제거하고, 제거한 요소를 반환
shift()
배열 앞 요소를 제거하고, 제거한 요소를 반환
unshift()
배열 앞에 요소를 추가

splice(start, deleteCount, newItem, newItem...)
배열 요소를 삭제, 추가, 교체

필수 매개변수 : start 시작 인덱스
선택 매개변수 : deleteCount 삭제하고 싶은 갯수, newItem 추가하고 싶은 요소

요소 제거

let myArray = ['a', 'b', 'c', 'd', 'e'];
myArray.splice(2, 1);
console.log(myArray); // ['a', 'b', 'd', 'e']

요소 추가

let myArray = ['a', 'b', 'd', 'e'];
myArray.splice(2, 0, 'c');
console.log(myArray); // ['a', 'b', 'c', 'd', 'e']

요소 교체

let myArray = ['a', 'b', 'c', 'd', 'e'];
myArray.splice(2, 1, 'x');
console.log(myArray); // ['a', 'b', 'x', 'd', 'e']

여러 요소 추가

let myArray = ['a', 'b', 'c'];
myArray.splice(1, 0, 'x', 'y');
console.log(myArray); // ['a', 'x', 'y', 'b', 'c']

데이터 검색 및 조작

indexOf
배열에서 인수로 전달된 요소를 찾아 첫 번째로 검색된(등장한) 요소의 인덱스를 반환하는 함수
*인수로 전달된 요소를 찾을 수 없다면 -1을 반환
lastindexOf
배열에서 인수로 전달된 요소를 뒤에서부터 찾아 첫번째로 검색된 요소의 인덱스를 반환하는 함수
includes
배열에 특정 요소가 포함하는지 확인하는 함수
배열에서 주어진 요소가 포함되어 있으면 true를 그렇지 않으면 false를 반환

배열 복사 및 결합

slice()
배열의 시작점 부터 끝 까지(끝 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환
arr.slice(begin , end)

let fruits = ["사과", "오렌지", "배", "수박", "바나나"];

fruits.slice(); // 배열 전체 복사 ['사과', '오렌지', '배', '수박', '바나나']
fruits.slice(3); // 3번 인덱스부터 끝까지 추출 ["수박", "바나나"]
fruits.slice(1,3); // 1번 인덱스부터 3번 인덱스 전까지 추출 ["오렌지","배"]
fruits.slice(-2); // -2번 인덱스부터 추출 ["수박", "바나나"]
fruits.slice(2, -1); // 2번 인덱스부터 -1번(거꾸로 첫번째) 인덱스 전까지 추출 ["배", "수박"]

concat()
배열의 끝에 여러 요소를 추가하며, 새로운 배열 반환

const num = [1, 2, 3];
const str = ["a", "b"];
const concatenated = num.concat(str);
console.log(concatenated); // [1, 2, 3, 'A', 'B']

기타

reverse()
배열의 요소 순서를 반대로 교체, 원본 배열을 수정하고 수정된 배열 반환

기본 사용

let myArray = [1, 2, 3, 4, 5];
myArray.reverse();
console.log(myArray); // [5, 4, 3, 2, 1]

다차원 배열 뒤집기

let myArray = [[1, 2], [3, 4], [5, 6]];
myArray.reverse();
console.log(myArray); // [[5, 6], [3, 4], [1, 2]]

원본 배열을 유지하기 위해 복사 후 뒤집기

let originalArray = [1, 2, 3, 4, 5];
let reversedArray = [...originalArray].reverse();
console.log(originalArray); // [1, 2, 3, 4, 5]
console.log(reversedArray); // [5, 4, 3, 2, 1]

sort()
해당 배열의 요소들을 순서대로 정렬

한글은 ㄱ,ㄴ,ㄷ / 영어는 알파벳 순
⚠️숫자는 자릿수 별

let strArr = ["대한민국","일본","이탈리아","가나"];
let numArr = [10,16,28,93,75,1,64];

strArr.sort(); // ["가나","대한민국","이탈리아","일본"]
numArr.sort(); // [1,10,16,28,64,75,93]

// sort 정렬
numArr.sort((a,b) => a-b); // 오름차순 [1,10,16,29,64,75,93]
numArr.sort((a,b) => b-a); // 내림차순 [93,75,64,29,16,10,1]