JavaScript 배열 메서드

 

JavaScript 배열 메서드

 

JavaScript 배열에서는 다양한 빌트인 메서드를 제공합니다. 배열의 메서드는 원본 배열을 변경하는 메서드(Mutator Method)와 새로운 배열을 생성하는 메서드(Accessor Method)가 있는데, 원본 배열을 변경하지 않는 메서드의 사용이 권장됩니다. 배열의 메서드 중에서 사용 빈도가 높은 메서드들을 정리하였습니다.

 

 

1. 정적 메서드 (Static Method)

---

Array() 생성자 함수에서 제공하는 정적 메서드입니다.

 

1.1. Array.isArray()

 

isArray() 메서드는 전달된 파라미터의 배열 여부를 판별하여 true/false를 반환합니다.

console.log(Array.isArray([])); // true
console.log(Array.isArray([1,2,3])); // true
console.log(Array.isArray(new Array())); // true

console.log(Array.isArray('')); // false
console.log(Array.isArray(null)); // false
console.log(Array.isArray(undefined)); // false
console.log(Array.isArray({0: 'a', 1: 'b'})); // false

 

 

2. 프로토타입 메서드 (Prototype Method)

---

Array.prototype에서 제공하는 프로토타입 메서드입니다.

 

2.1. Array.prototype.indexOf()

 

indexOf() 메서드는 전달된 파라미터를 배열의 요소에서 검색하여 index를 반환합니다. 중복되는 요소가 존재하는 경우 첫번째 요소의 index를 반환하고 요소가 존재하지 않는 경우엔 -1을 반환합니다.

const arr = [1,2,3,3];
console.log(arr.indexOf(1)); // 0
console.log(arr.indexOf(10)); // -1
console.log(arr.indexOf(3)); // 2

 

2.2. Array.prototype.push()

 

push() 메서드는 파라미터로 전달받은 값들을 해당 배열에 추가하고 length 프로퍼티값을 반환합니다.

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

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

 push() 메서드는 원본 배열을 변경하기 때문에 다음과 같이 length 프로퍼티를 사용하여 요소를 추가하거나 스프레드 문법을 사용하여 추가하는 것이 side effect를 방지하고 성능면에서도 좋습니다.

const arr1 = [1,2,3];

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

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

 

2.3. Array.prototype.pop()

 

pop() 메서드는 해당 배열에서 마지막 요소를 반환하고 삭제합니다.

const arr = [1,2,3];

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

 

2.4. Array.prototype.unshift()

 

unshift() 메서드는 파라미터로 전달받은 값들을 해당 배열의 앞에 추가하고 length 프로퍼티 값을 반환합니다.

const arr = [3,4];

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

unshift() 메서드도 push() 메서드와 마찬가지로 원본 배열을 변경하기 때문에 스프레드 문법으로 대체하여 사용하는 것이 좋습니다.

const arr1 = [3,4];

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

 

2.5. Array.prototype.shift()

 

shift() 메서드는 해당 배열에서 첫번째 요소를 반환하고 삭제합니다.

const arr = [1,2,3];

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

 

2.6. Array.prototype.concat()

 

concat() 메서드는 파라미터로 전달받은 값들을 원본 배열의 마지막 요소로 추가하여 새로운 배열을 생성하여 반환합니다.

const arr1 = [1,2];
const arr2 = [3,4];
const arr3 = arr1.concat(arr2);

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

또한, 다음과 같이 스프레드 문법으로 대체하여 사용할 수 있습니다.

const arr1 = [1,2];
const arr2 = [3,4];
const arr3 = [...arr1, ...arr2];

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

push(), unshift(), concat()을 사용하여 배열에 요소를 추가하거나 결합하여 새로운 배열을 생성하는 경우에 스프레드 문법으로 대체가 가능한데, 이러한 경우엔 스프레드 문법을 사용하는 것이 좋습니다.

 

2.7. Array.prototype.splice()

 

splice() 메서드는 해당 배열의 중간에 요소를 삭제하거나 추가하는 경우에 사용합니다. 파라미터에 따라서 동작에 차이가 있습니다.

const arr1 = [1,2,3,4];
const arr2 = arr1.slice();
const arr3 = arr1.slice();
const arr4 = arr1.slice();

// arr1 배열의 1번 인덱스부터 1개 요소를 삭제하고 새로운 요소 10을 추가
arr1.splice(1, 1, 10);
console.log(arr1); // [1, 10, 3, 4]

// arr2 배열의 1번 인덱스에서 0개 요소를 삭제하고 새로운 요소 10을 추가
arr2.splice(1, 0, 10);
console.log(arr2); // [1, 10, 2, 3, 4]

// arr3 배열의 1번 인덱스에서 2개 요소를 삭제
arr3.splice(1, 2);
console.log(arr3); // [1, 4]

// arr4 배열의 1번 인덱스부터 모든 요소를 삭제
arr4.splice(1);
console.log(arr4); // [1]

 

2.8. Array.prototype.slice()

 

slice() 메서드는 파라미터로 전달된 범위의 요소들을 복사하여 배열로 반환합니다. 

const arr1 = [1,2,3,4];

// arr1 배열의 1번 인덱스부터 2개 요소를 복사
const arr2 = arr1.slice(1, 2);
console.log(arr2); // [2]

// arr1 배열의 1번 인덱스부터 모든 요소를 복사
const arr3 = arr1.slice(1);
console.log(arr3); // [2, 3, 4]

// arr1 배열의 마지막 인덱스부터 2개 요소를 복사
const arr4 = arr1.slice(-2);
console.log(arr4); // [3, 4]

// arr1 배열의 모든 요소를 복사
const arr5 = arr1.slice();
console.log(arr5); // [1, 2, 3, 4]

 

2.9. Array.prototype.join()

 

join() 메서드는 해당 배열의 모든 요소에 대해 파라미터로 전달받은 구분자로 연결된 문자열을 반환합니다.

const arr1 = [1,2,3,4];

// 구분자가 없는 경우 기본 구분자로 콤마(',')가 사용됨
const arr2 = arr1.join();
console.log(arr2); // 1,2,3,4

const arr3 = arr1.join('');
console.log(arr3); // 1234

const arr4 = arr1.join('-');
console.log(arr4); // 1-2-3-4

 

2.10. Array.prototype.reverse()

 

reverse() 메서드는 해당 배열의 순서를 역순으로 정렬합니다.

const arr1 = [1,2,3,4];
console.log(arr1); // [1, 2, 3, 4]
console.log(arr1.reverse()); // [4, 3, 2, 1]

 

2.11. Array.prototype.fill()

 

fill() 메서드는 해당 배열의 모든 요소를 파라미터로 전달받은 값으로 채웁니다.

const arr1 = [1,2,3,4];
const arr2 = arr1.slice();
const arr3 = arr1.slice();

// arr1 배열의 모든 요소를 0으로 채움
arr1.fill(0);
console.log(arr1); // [0, 0, 0, 0]

// arr2 배열의 1번 인덱스부터 끝까지 0으로 채움
arr2.fill(0, 1);
console.log(arr2); // [1, 0, 0, 0]

// arr3 배열의 1번 인덱스부터 2번 인덱스 이전의 요소를 0으로 채움
arr3.fill(0, 1, 2);
console.log(arr3); // [1, 0, 3, 4]

 

2.12. Array.prototype.includes()

 

includes() 메서드는 해당 배열에 파라미터로 전달된 값의 포함 여부를 확인하여 true/false를 반환합니다.

const arr = ['apple','banana','cherry'];

console.log(arr.includes('banana')); // true
console.log(arr.includes('melon')); // false

// arr 배열에 'cherry' 문자열이 있는지 2번 인덱스부터 확인
console.log(arr.includes('cherry', 2)); // true

// arr 배열에 'cherry' 문자열이 있는지 arr.length - 2 인덱스부터 확인
console.log(arr.includes('cherry', -2)); // true

 

indexOf() 메서드를 사용하여 요소의 포함 여부를 확인할 수 있지만, includes() 메서드와는 다르게 NaN의 포함 여부를 확인할 수 없다는 차이가 있습니다.

const arr = ['NaN', NaN];

console.log(arr.indexOf(NaN) > -1); // false
console.log(arr.includes(NaN)); // true

 

이상으로 JavaScript 배열 메서드에 대해 정리해봤습니다.

 

 

※ Reference

 

• 모던 자바스크립트 Deep Dive, 이웅모 지음, 위키북스(2020), p507 ~ p528. 27.8 배열 메서드