[Javascript] 자주 쓰이는 배열 메서드(요소 추가, 배열 순회/탐색/정렬 등)

배열은 일반 객체에 여러 기능을 추가해 만든 특수한 객체로, 자바스크립트는 배열을 쉽게 다룰 수 있는 메서드를 제공합니다.

정리할 배열 메서드는 다음과 같습니다.

1. 요소 추가/삭제
2. 배열 잘라내기/붙이기
3. 배열 순회
4. 배열 탐색
5. 배열 정렬

 

---

🌿 요소 추가 및 삭제

아래는 배열의 맨 끝 요소를 대상으로 하는 메서드입니다.

 

push( 추가할_요소 )

배열의 맨 끝에 새로운 요소를 추가하고, 새 배열의 길이를 반환합니다.

const alphabet = ["a", "b", "c"];
const newLength = alphabet.push("d", "e");

console.log(alphabet);	// ["a", "b", "c", "d", "e"]
console.log(newLength); // 5

 

pop()

배열의 맨 끝에 있는 요소를 제거하고, 제거한 요소를 반환합니다.

빈 배열에서 pop()을 사용하면, 제거할 요소가 없으므로 'undefined' 반환합니다.

const alphabet = ["a", "b", "c"];
const removedItem = alphabet.pop();

console.log(alphabet);		// ["a", "b"]
console.log(removedItem); 	// "c"

 

---

 

아래는 배열의 맨 앞 요소를 대상으로 하는 메서드입니다.

 

unshift( 추가할_요소 )

배열의 맨 앞에 새로운 요소를 추가하고, 새 배열의 길이를 반환합니다.

const alphabet = ["a", "b", "c"];
const newLength = alphabet.unshift("d", "e");

console.log(alphabet);	// ["d", "e", "a", "b", "c"]
console.log(newLength); // 5

 

shift()

배열의 맨 앞에 있는 요소를 제거하고, 제거한 요소를 반환합니다.

빈 배열에서 shift()를 사용하면, 제거할 요소가 없으므로 'undefined' 반환합니다.

const alphabet = ["a", "b", "c"];
const removedItem = alphabet.shift();

console.log(alphabet);		// ["b", "c"]
console.log(removedItem); 	// "a"

unshift와 shift는 실행 속도가 느린 메서드입니다.
unshift와 shift를 사용하면 배열의 맨 앞에 요소를 다루기 때문에 기존 요소들의 인덱스가 한 칸씩 뒤로 밀리거나 앞으로 당겨집니다. 그러나 push나 pop은 배열의 맨 뒤의 요소를 다루기 때문에 기존 요소들의 인덱스가 변하지 않습니다.
따라서 push나 pop의 성능이 unshift와 shift보다 더 좋습니다.

 

---

🌿 배열 잘라내기 및 붙이기

slice( 시작_인덱스, 끝_인덱스 ) or slice( 시작_인덱스, 끝_인덱스+1 )

시작 인덱스에 담긴 요소부터 ~ 끝 인덱스의 전 요소(끝 인덱스-1)까지 잘라낸 새로운 배열을 반환합니다.

끝 인덱스에 담긴 요소는 포함되지 않기 때문에 [끝_인덱스+1]이라고 생각하면 헷갈리지 않습니다.

const arr = [1, 2, 3, 4, 5];
const slicedArr = arr.slice(1, 3);	// 인덱스 1 ~ 2에 담긴 요소를 잘라냄

console.log(arr);		// [1, 2, 3, 4, 5]
console.log(slicedArr);	// [2, 3]

만약 끝 인덱스를 전달하지 않는다면 시작 인덱스부터 끝까지 잘라낸 배열을 반환하고,

인덱스를 음수로 전달하면 -1을 시작 인덱스로 생각하여 끝에서부터 음수의 절댓값 만큼 잘라낸 배열을 반환합니다.

let arr = [1, 2, 3, 4, 5];
const slicedArr1 = arr.slice(1);	// 인덱스 1 ~ 끝까지의 요소를 잘라냄
const slicedArr2 = arr.slice(-2);	// 끝에서부터 2개의 요소를 잘라냄

console.log(arr);			// [1, 2, 3, 4, 5]
console.log(slicedArr1);	// [2, 3, 4, 5]
console.log(slicedArr2);	// [4, 5]

 

concat( 붙일_배열 )

서로 다른 배열이나 객체를 이어 붙여 새로운 배열을 반환합니다.

인수(아규먼트)로 배열을 전달하면 개별로 요소를 이어 붙이지만, 객체를 전달하면 해당 객체를 하나의 요소로 인식하여 이어 붙입니다.

const arr1 = [1, 2];
const arr2 = [3, 4];
const obj = { a: 1, b: 2 };

const result1 = arr1.concat(arr2);	// arr1 + arr2
const result2 = arr1.concat(obj);	// arr1 + obj

console.log(arr1);		// [1, 2] 
console.log(result1);	// [1, 2, 3, 4]
console.log(result2);	// [1, 2, { a: 1, b: 2 }]

 

---

🌿 배열 순회

forEach(( 요소, [인덱스], [호출한_배열] ) => { 콜백 함수 })

배열을 차례대로 순회하며, 각각의 요소에 인자로 전달 받은 콜백 함수에서 정의한 동작을 수행합니다.

그리고 반환값이 항상 'undefined'로 새로운 배열을 생성하지 않습니다.

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

// forEach 메서드
arr.forEach((item, idx) => {
	console.log(`${idx} 번째 요소: ${item}`);
});

console.log("------------------");

// for문(위의 forEach문과 같은 동작을 수행)
for(let i=0; i<arr.length; i++){
   console.log(`${i} 번째 요소: ${arr[i]}`);
};

forEach 메서드와 for문

 

map(( 요소, [인덱스], [호출한_배열] ) => { 콜백 함수 })

forEach와 마찬가지로 배열을 차례대로 순회하며, 각각의 요소에 인자로 전달 받은 콜백 함수에서 정의한 동작을 수행합니다.

그리고 각 요소가 함수에 맵핑(mapping)된 결과를 모아 새 배열로 반환합니다.

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

// map 메서드 
const newNums_map = numbers.map((number) => {
    return number * number;
});
console.log(newNums_map);		// [1, 4, 9, 16, 25]

// forEach 메서드 
const newNums_forEach = [];
numbers.forEach((number) => {
    newNums_forEach.push(number * number);	// push()로 하나씩 추가
});
console.log(newNums_forEach);	//[1, 4, 9, 16, 25]

중간에 반복을 중단할 경우에는 for문 또는 while문에서 break를 사용하는 것이 적합하며,
단순히 각 요소에 반복된 동작을 수행할 때는 forEach() 메서드를, 새로운 배열을 생성해야 할 때에는 map() 메서드를 사용하는 것이 편리합니다.

 

forEach()와 map()를 비교한 더 자세한 내용은 다음 링크의 가장 마지막 부분을 참고해주세요.

 

---

🌿 배열 탐색

아래는 요소와 인덱스를 인자로 전달하는 메서드입니다.

 

indexOf( 찾으려는_요소, [탐색을_시작할_인덱스] )

배열에서 찾으려는 요소와 일치하는 요소의 인덱스를 반환합니다.(없다면 -1을 반환)

찾으려는 요소와 일치하는 요소가 여러 개라면 가장 가까운 요소의 인덱스를 반환합니다.

'탐색을 시작할 인덱스' 인수를 생략하면 인덱스[0] = 첫 번째 요소부터 탐색하고, 음수를 넣으면 뒤에서부터 탐색을 시작합니다.

const arr = [1, 3, 5, 7, 1];

console.log(arr.indexOf(1)); // 0

'==='을 사용하여 엄격한 비교를 수행하므로 자료형이 다르면 다른 값으로 평가합니다.

 

includes( 찾으려는_요소, [탐색을_시작할_인덱스] )

배열에 찾으려는 요소가 있는지 판별하여 불린값(true/false)을 반환합니다.

indexOf()와 마찬가지로 찾으려는 요소와 일치하는 요소가 여러 개라면 가장 가까운 요소의 인덱스를 반환하며,

'탐색을 시작할 인덱스' 인수를 생략하면 인덱스[0] = 첫 번째 요소부터 탐색하고, 음수를 넣으면 뒤에서부터 탐색을 시작합니다.

const arr = [1, 3, 5, 7, 1];

console.log(arr.includes(3));	// true
console.log(arr.includes(9));	// false

 

---

 

아래는 콜백 함수를 인자로 전달하는 메서드입니다.

 

findIndex( 콜백 함수(현재_요소, 현재_인덱스, 탐색_배열) )

찾으려는 요소의 인덱스 번호를 반환합니다.(없다면 -1을 반환)

indexOf와 달리 인수로 판별 함수라고 불리는 콜백 함수를 전달하며, 해당 판별 함수를 만족하는 가장 가까운 요소의 인덱스를 반환합니다.

판별 함수는 '현재 요소, 현재 인덱스, 탐색 대상 배열'에 해당하는 매개변수를 받습니다.

const arr = [1, 3, 5, 6, 8];

const index = arr.findIndex((item) =>
  (item % 2) === 0 ? true : false
);

console.log(index); // 3

 

find( 콜백 함수(현재_요소, 현재_인덱스, 탐색_배열) )

찾으려는 요소를 반환합니다.(없다면 undefined를 반환)

findIndex처럼 인수로 판별 함수라고 불리는 콜백 함수를 전달하며, 해당 판별 함수를 만족하는 가장 가까운 요소를 반환합니다.

판별 함수는 '현재 요소, 현재 인덱스, 탐색 대상 배열'에 해당하는 매개변수를 받습니다.

const arr = [
  { name: "Harry" },
  { name: "Hermione" },
  { name: "Ron" },
  { name: "Emma" }
];

const element = arr.find((item) => 
  item.name === "Emma"
); 

console.log(element); // {name: "Emma"}

 

filter( 콜백 함수(현재_요소, 현재_인덱스, 탐색_배열) )

조건을 만족하는 모든 요소를 모은 배열을 반환합니다.

findIndex와 find처럼 인수로 판별 함수라고 불리는 콜백 함수를 전달합니다.

const arr = [
  { name: "Harry", job: "Wizard" },
  { name: "Hermione", job: "Wizard" },
  { name: "Ron", job: "Wizard" },
  { name: "Emma", job: "Home protector" },
];

const filteredArr = arr.filter(
  (item) => item.job === "Wizard"
);

console.log(filteredArr);
// [
//   { name: 'Harry', job: 'Wizard' },
//   { name: 'Hermione', job: 'Wizard' },
//   { name: 'Ron', job: 'Wizard' }
// ]

 

---

🌿 배열 정렬

sort( [콜백 함수] )

배열의 요소를 사전 순과 오름차순으로 정렬합니다. 

기존 배열 자체를 정렬시키므로 기존 배열이 필요하다면 따로 복사해두어야 합니다.

const charArr = ["b", "a", "c"];
const numArr = [1, 1000, 10, 31];

charArr.sort();
numArr.sort();

console.log(charArr);	// ["a", "b", "c"]
console.log(numArr);	// [1, 10, 1000, 31, 4] <-- 문자열의 오름차순으로 정렬된 모습

숫자로 이루어진 배열이어도 요소들을 문자열로 취급하여 사전 순으로 정렬하기 때문에 

우리가 원하는 숫자의 대소를 비교하여 정렬하려면 아래와 같이 콜백 함수로 비교 함수를 전달해주어야 합니다.

// 숫자 배열 오름차순
const ascending = [10, 5, 20, 1];

ascending.sort(function(a, b) {
    return a - b;
});
// ascending.sort((a, b) => a - b);

console.log(ascending); // [1, 5, 10, 20]

// 숫자 배열 내림차순
const descending = [10, 5, 20, 1];

descending.sort(function(a, b) {
    return b - a;
});
// descending.sort((a, b) => b - a);

console.log(descending); // [20, 10, 5, 1]

 

reverse()

배열의 요소를 역순으로 정렬합니다. 첫 번째 요소는 마지막 요소로, 마지막 요소는 첫 번째 요소가 됩니다.
sort 메서드와 마찬가지로 기존 배열 자체를 정렬시키므로 기존 배열이 필요하다면 따로 복사해두어야 합니다.

const arr = [1, 2, 3];

a.reverse();

console.log(a); // [3, 2, 1]

 

---

읽어주셔서 감사합니다:)