자바스크립트에서 배열은 매우 자주 사용하는 데이터 구조입니다.
배열을 다룰 때 유용하게 쓸 수 있는 배열 메서드(Array Methods)들을 정리해보겠습니다.
1. 기본 배열 선언
let fruits = ['사과', '바나나'];
2. 배열 조작 메서드
1. push()
let fruits = ['사과', '바나나'];
fruits.push('포도');
console.log(fruits); // ['사과', '바나나', '포도']개념: 배열 끝에 요소를 추가합니다.
원본 변경 여부: 변경됨
2. pop()
let fruits = ['사과', '바나나', '포도'];
fruits.pop();
console.log(fruits); // ['사과', '바나나']
개념: 배열 끝의 요소를 제거합니다.
원본 변경 여부: 변경됨
3. shift()
let nums = [1, 2, 3];
nums.shift();
console.log(nums); // [2, 3]개념: 배열 맨 앞의 요소를 제거합니다.
원본 변경 여부: 변경됨
4. unshift()
let nums = [2, 3];
nums.unshift(1);
console.log(nums); // [1, 2, 3]개념: 배열 맨 앞에 요소를 추가합니다.
원본 변경 여부: 변경됨
5. splice()
let nums = [1, 2, 3, 4];
nums.splice(1, 2); // index 1부터 2개 제거
console.log(nums); // [1, 4]
let num2 = [1, 2, 3, 4];
num2.splice(1, 2, 8); // index 1부터 2개 제거하고, 8 삽입
console.log(num2); // [1, 8, 4]개념: 요소를 제거하거나 교체합니다.
원본 변경 여부: 변경됨
6. slice()
let nums = [0, 1, 2, 3, 4];
let sliced = nums.slice(1, 4); // 인덱스 1부터 4미만까지 잘라서 새로운 배열 만듬 (인덱스 1~3)
console.log(sliced); // [1, 2, 3]개념: 배열의 일부분을 복사해 새로운 배열로 만듭니다.
원본 변경 여부: 변경 안 됨
3. 배열 순회 및 변형 메서드
7. forEach()
let fruits = ['사과', '바나나'];
fruits.forEach((fruit) => {
console.log(fruit);
});
// 출력: 사과, 바나나개념: 배열의 모든 요소에 대해 각각 콜백 함수를 실행합니다.
8. map()
let fruits = ['사과', '바나나'];
let lengths = fruits.map(fruit => fruit.length);
console.log(lengths); // [2, 3]개념: 배열의 각 요소를 변형하여 새 배열을 생성합니다.
원본 변경 여부: 변경 안 됨
9. filter()
let fruits = ['사과', '바나나'];
let longNames = fruits.filter(fruit => fruit.length > 2);
console.log(longNames); // ['바나나']개념: 조건을 만족하는 요소만 골라 새 배열로 반환합니다.
원본 변경 여부: 변경 안 됨
10. find()
let fruits = ['사과', '바나나'];
let result = fruits.find(fruit => fruit === '바나나');
console.log(result); // '바나나'개념: 조건을 만족하는 첫 번째 요소를 반환합니다.
원본 변경 여부: 변경 안 됨
4. 배열 계산 및 검사 메서드
11. reduce()
let nums = [1, 2, 3];
let sum = nums.reduce((total, num) => total + num, 0); // 0부터 총합
console.log(sum); // 6개념: 배열을 하나의 값으로 축소합니다. (누적)
12. some()
let nums = [1, 2, 3];
let hasEven = nums.some(num => num % 2 === 0);
console.log(hasEven); // true개념: 하나라도 조건을 만족하는 요소가 있는지 확인합니다.
반환값: Boolean (True or False)
13. every()
let nums = [2, 4, 6];
let allEven = nums.every(num => num % 2 === 0);
console.log(allEven); // true개념: 모든 요소가 조건을 만족하는지 확인합니다.
반환값: Boolean (True or False)
5. 배열 정렬/반전 메서드
14. sort()
let fruits = ['바나나', '사과', '포도'];
fruits.sort();
console.log(fruits); // ['바나나', '사과', '포도']개념: 배열을 정렬합니다. 기본은 문자열 기준 오름차순
15. reverse()
let nums = [1, 2, 3];
nums.reverse();
console.log(nums); // [3, 2, 1]개념: 배열의 순서를 반대로 뒤집습니다.
✨ 마무리
이외에도 concat(배열 두 개 결합하여 새 배열 만들기), includes(포함 확인) 등이 있지만
위에서 소개한 배열 메서드들은 실무에서 가장 자주 쓰이며,
자바스크립트로 데이터를 처리할 때 반드시 익혀야 할 필수 문법이니,
직접 콘솔에 입력하면서 익숙해져 보시길 바랍니다 :)