자바스크립트 배열(JS array)을 다루는 메소드들

JavaScript에서 배열을 다루는 메소드들은 매우 다양하다.

각각의 메소드는 특정한 작업을 수행하며, 배열의 요소를 추가, 삭제, 변형, 조회하는 데 사용된다.

 

다양한 메소드들이 존재하지만 그중에 비슷한 기능을 하는 것들이 있다.

비슷하게 동작하는 메소드들을 비교하는 형태로 메소드들을 알아보도록 하자.

 

📌 JavaScript 배열(array) 📌

동일한 유형의 여러 값을 하나의 변수에 저장할 수 있는 특수한 객체 타입이다.

 

배열은 순서가 있는 값의 컬렉션으로 각 값은 index를 사용해 접근할 수 있다.

배열이 객체의 특수한 형태이지만, 주로 순차적인 데이터를 다루는 데 사용된다.

 

즉, 배열은 객체의 일종이기에, 배열의 요소에 인덱스를 통해 접근하는 것은 객체의 프로퍼티에 키로 접근하는 것과 유사하다.

💡 참고 💡
배열에는 숫자 인덱스 외에도 'key-value' 쌍을 추가할 수 있지만 성능에 영향을 줄 수 있다.
따라서, 객체처럼 사용하는 것은 비효율적이며, 동작 에러를 야기할 수 있다.

 

✅ JavaScript 배열의 특징 ✅

// 배열의 첫 번째 요소 접근
const a = ['a', 2, 3]
a.push(4);
console.log(a) // ['a', 2, 3]
console.log(a[0]); // 'a'

• index 기반 접근: 배열의 각 요소는 0부터 시작하는 index(숫자)로 접근할 수 있다.
• 동적 크기: 배열의 크기를 고정할 필요없어서, 추가와 삭제가 자유롭고, 배열의 크기는 자동으로 조정된다.
• 혼합된 데이터 타입: 동일한 배열 내에서 서로 다른 데이터 타입을 가질 수 있다.
• 내장 메소드: 다양한 메소드가 제공되어, 데이터의 조작 및 검색이 용이하다.
• 희소 배열: 배열의 요소가 연속적이지 않고, 중간에 빈 슬롯이 존재할 수 있는 배열이라 메모리 낭비가 될 수 있다.

 

이제 JavaScript 내장 메소드에 대해서 자세하게 알아보려고 한다.

 

1. push() vs unshift()

push()

배열의 끝에서 하나 이상의 요소를 추가한다.

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

 

unshift()

배열의 시작 부분에 하나 이상의 요소를 추가한다.

let arr = [2, 3, 4];
arr.unshift(0, 1);
console.log(arr); // [0, 1, 2, 3, 4]

 

2. pop() vs shift()

pop()

배열의 마지막 요소를 제거하고, 제거된 요소를 반환한다.

let arr = [1, 2, 3, 4];
let last = arr.pop();
console.log(arr); // [1, 2, 3]
console.log(last); // 4

 

shift()

배열의 첫 번째 요소를 제거하고, 제거된 요소를 반환한다.

let arr = [1, 2, 3, 4];
let first = arr.shift();
console.log(arr); // [2, 3, 4]
console.log(first); // 1

 

pop()과 shift() 둘다 요소가 없었다면, undefined를 반환한다.

 

3. splice() vs slice()

splice()

배열의 특정 위치에서 요소를 추가하거나 제거할 수 있다.

let arr = [1, 2, 3, 4];
arr.splice(2, 1, 'a', 'b'); // 인덱스 2에서 1개의 요소를 제거하고, 'a', 'b'를 추가
console.log(arr); // [1, 2, 'a', 'b', 4]

 

slice()

배열의 부분을 잘라내어 새로운 배열을 반환한다.

let arr = [1, 2, 3, 4, 5];
let newArr = arr.slice(1, 4);
console.log(newArr); // [2, 3, 4]

 

4. map() vs filter()

map()

배열의 각 요소에 대해 주어진 함수를 호출하여 새로운 배열을 생성한다.

let arr = [1, 2, 3];
let newArr = arr.map(function(element) {
  return element * 2;
});
console.log(newArr); // [2, 4, 6]

 

filter()

배열의 각 요소에 대해 주어진 조건을 만족하는 요소들로 새로운 배열을 생성한다.

let arr = [1, 2, 3, 4, 5];
let evenArr = arr.filter(function(element) {
  return element % 2 === 0;
});
console.log(evenArr); // [2, 4]

 

5. find() vs findIndex()

find()

배열의 각 요소를 검사하여 주어진 조건을 만족하는 첫 번째 요소를 반환한다.

let arr = [1, 2, 3, 4, 5];
let found = arr.find(function(element) {
  return element > 3;
});
console.log(found); // 4

 

findIndex()

배열의 각 요소를 검사하여 주어진 조건을 만족하는 첫 번째 요소의 인덱스를 반환한다.

let arr = [1, 2, 3, 4, 5];
let index = arr.findIndex(function(element) {
  return element > 3;
});
console.log(index); // 3

 

6. forEach() vs reduce()

forEach()

배열의 각 요소에 대해 주어진 함수를 실행한다.

let arr = [1, 2, 3];
arr.forEach(function(element) {
  console.log(element);
});

 

reduce()

배열의 각 요소에 대해 주어진 함수를 실행하여 단일 값을 반환한다.

let arr = [1, 2, 3, 4];
let sum = arr.reduce(function(accumulator, current) {
  return accumulator + current;
}, 0);
console.log(sum); // 10

 

7. sort() vs reverse()

sort()

배열의 요소를 정렬한다.

let arr = [4, 2, 5, 1, 3];
arr.sort(function(a, b) {
  return a - b;
});
console.log(arr); // [1, 2, 3, 4, 5]

 

reverse()

배열의 요소 순서를 반전시킨다.

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

 

8. concat() vs push() vs Sperad operator(...)

concat()

두 개 이상의 배열을 결합하여 새로운 배열을 반환한다. 기존 배열을 수정하지 않고 새로운 배열을 반환한다.

let arr1 = [1, 2];
let arr2 = [3, 4];
let newArr = arr1.concat(arr2);
console.log(newArr); // [1, 2, 3, 4]

 

push()

원본 배열의 끝에 하나 이상의 요소 추가할 수 있지만 원본 배열이 변경된다.

 

Sperad operator(...)

배열을 쉽게 결합하거나 요소를 추가할 수 있다.

let arr1 = [1, 2];
let arr2 = [3, 4];
let result = [...arr1, ...arr2];
console.log(result); // [1, 2, 3, 4]

 

9. includes() vs indexOf() vs some()

includes()

배열에 특정 요소가 포함되어 있는지 확인하고, true 또는 false를 반환한다.

let arr = [1, 2, 3, 4];
console.log(arr.includes(3)); // true
console.log(arr.includes(5)); // false

 

indexOf()

배열에서 특정 요소의 첫 번째 인덱스를 반환하며, 존재하지 않으면 -1을 반환합니다.

let arr = [1, 2, 3];
console.log(arr.indexOf(2)); // 1
console.log(arr.indexOf(4)); // -1

 

💡 참고 💡
lastIndexOf: 특정 요소의 마지막 인덱스를 반환한다. 없을 경우 -1을 반환하고, 배열의 끝에서 처음 방향으로 검색한다.

 

some()

배열의 요소 중 조건을 만족하는 요소가 있는지 확인하고, true 또는 false를 반환합니다.

let arr = [1, 2, 3];
let hasEven = arr.some(num => num % 2 === 0);
console.log(hasEven); // true

 

10. join() vs toString() vs reduce()

join()

배열의 모든 요소를 문자열로 결합하고, 지정된 구분자로 요소들을 구분하여 하나의 문자열을 반환합니다.

let arr = ['a', 'b', 'c'];
let str = arr.join('-');
console.log(str); // 'a-b-c'

 

toString()

배열의 모든 요소를 쉼표로 구분된 문자열로 변환한다.

let arr = [1, 2, 3];
let str = arr.toString();
console.log(str); // '1,2,3'

 

reduce()

배열의 모든 요소를 순회하면서 누적값을 생성할 수 있다.
join()과 유사한 결과를 만들 수 있지만 더 복잡한 구조와 변형이 가능하다.

 

11. for...in과 for...of의 차이

for...in

배열의 모든 열거 가능한 속성(키)에 대해 반복한다. 인덱스 뿐만 아니라 배열에 추가된 커스텀 프로퍼티도 포함된다.

 

for...of

배열의 각 요소에 대해 반복한다.

let arr = [1, 2, 3];
arr.customKey = 'value';

for (let key in arr) {
    console.log(key); // 0, 1, 2, customKey (인덱스와 커스텀 키)
}

for (let value of arr) {
    console.log(value); // 1, 2, 3 (요소 값)
}

 

배열을 순회할 때는 'for...in'보다는 'for...of'를 사용하는 것이 커스텀 프로퍼티를 무시하고 배열의 요소만을 순회해서 더 적합하다.