Array 메서드
자바스크립트는 배열에 대한 다양한 빌트인 메서드를 제공한다. Array 생성자 함수는 정적 메서드를 제공하며, Array.prototype은 프로토타입 메서드를 제공한다.
배열에는 원본 배열을 직접 변경하는 메서드와 원본 배열을 직접 변경하지 않고 새로운 배열을 생성하여 반환하는 메서드가 있다. 원본 배열을 직접 변경하는 메서드는 외부 상태를 직접 변경하는 부수효과가 있기 때문에 가급적 원본 배열을 변경하지 않는 메서드를 사용하는 것이 좋다.
Array.isArray
Array.isArray는 Array 생성자 함수의 정적 메서드다. Array.isArray 메서드는 전달된 인수가 배열이면 true, 배열이 아니면 false를 반환한다.
1
2
3
4
Array.isArray([]); // true
Array.isArray({}); // false
Array.prototype.indexOf
indexOf 메서드는 원본 배열에서 인수로 전달된 요소의 인덱스를 반환한다. 이때 배열에 인수로 전달된 요수가 중복되는 경우 첫 번째로 검색된 요소의 인덱스를 반환한다. 그리고 인수로 전달된 요소가 존재하지 않을 경우 -1을 반환한다.
1
2
3
4
5
6
const arr = [1, 2, 2, 3];
arr.indexOf(2); // 1
arr.indexOf(4); // -1
indexOf는 배열에 특정 요소가 존재하는지 확인할 때 유용하다.
Array.prototype.push
push 메서드는 인수로 전달받은 값을 원본 배열의 마지막 요소로 추가하고 변경된 length 프로퍼티 값을 반환한다.
1
2
3
4
5
6
7
8
const arr = [1, 2];
let result = arr.push(3, 4);
console.log(result); // 4
console.log(arr); // [1, 2, 3, 4]
push 메서드는 원본 배열을 직접 변경한다. 따라서 스프레트 문법을 사용해서 배열의 복사본을 만들면서 요소를 추가하는 것이 좋다.
1
2
3
4
5
6
const arr = [1, 2];
const newArr = [...arr, 3];
console.log(newArr); // [1, 2, 3]
Array.prototype.pop
pop 메서드는 원본 배열의 마지막 요소를 제거하고 제거한 요소를 반환한다. 원본 배열이 빈 배열일 경우 undefined를 반환한다. pop는 원본 배열을 직접 변경한다.
1
2
3
4
5
6
7
8
const arr = [1, 2];
let result = arr.pop();
console.log(result); // 2
console.log(arr); // [1]
Array.prototype.unshift
unshift 메서드는 전달받은 값을 원본 배열 선두에 요소로 추가하고 변경된 length 프로퍼티 값을 반환한다.
1
2
3
4
5
6
7
8
const arr = [1, 2];
let result = arr.unshift(3, 4);
console.log(result); // 4
console.log(arr); // [3, 4, 1, 2]
unshift 메서드도 원본 배열을 직접 변경한다. 따라서 스프레드 문법을 사용하는 것이 좋다.
1
2
3
4
5
6
const arr = [1, 2];
const newArr = [3, 4, ...arr];
console.log(newArr); // [3, 4, 1, 2]
Array.prototype.shift
shift 메서드는 원본 배열의 첫 번째 요소를 제거하고 제거한 요소를 반환한다. 빈 배열일 경우 undefined를 반환한다. shift 메서드는 원본 배열을 직접 변경한다.
1
2
3
4
5
6
7
8
const arr = [1, 2];
let result = arr.shift();
console.log(result); // 1
console.log(arr); // [2]
Array.prototype.concat
concat 메서드는 인수로 전달된 값들을 원본 배열의 마지막 요소로 추가한 새로운 배열을 반환한다. 인수로 전달된 값이 배열일 경우 배열을 해체하여 새로운 배열의 요소로 추가하며, 원본 배열은 변경되지 않는다.
1
2
3
4
5
6
7
8
9
10
const arr1 = [1, 2];
const arr2 = [3, 4];
let result = arr1.concat(arr2);
console.log(arr1); // [1, 2, 3, 4]
result = arr2.concat(arr1);
console.log(arr2); // [3, 4, 1, 2]
concat 메서드는 원본 배열을 변경하지는 않지만 스프레드 문법으로 대체가 가능하므로 push, unshift, concat 대신 스프레드 문법을 사용하는 것을 추천한다.
1
2
3
4
5
6
7
const arr1 = [1, 2];
const arr2 = [3, 4];
let result = [...arr2, ...arr1];
console.log(result); // [3, 4, 1, 2]
Array.prototype.splice
splice 메서드는 원본 배열의 중간에 요소를 추가하거나 제거할 수 있다. splice는 원본 배열을 직접 변경한다.
splice 메서드는 3개의 매개변수를 가진다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// arr.splice(start, deleteCount, items);
// start : 시작 인덱스
// deleteCount : 시작 인덱스로부터 제거할 요소의 개수
// items : 제거한 위치에 삽입할 요소들, 생략할 경우 제거하기만 함
const arr = [1, 2, 3, 4, 5];
const result = arr.splice(1, 2, 4);
console.log(result); // [2, 3] >> 제거한 요소를 반환
console.log(arr); // [1, 4, 4, 5]
splice 메서드의 deleteCount를 0으로 지정하면 요소의 제거없이 새로운 요소를 삽입할 수 있다. 또 deleteCount를 생략할 경우 시작 인덱스 이후의 모든 요소를 제거한다.
Array.prototype.slice
slice 메서드는 인수로 전달된 범위의 요소들을 복사하여 배열로 반환한다. 원본 배열은 젼경되지 않는다.
1
2
3
4
5
6
7
8
9
10
11
// arr.slice(start, end);
// start : 복사를 시작할 인덱스, 음수의 경우 배열의 끝에서 센다.
// end : 복사를 종료할 인덱스, 해당 인덱스는 복사되지 않는다. 생략 시 기본값으로 length 프로퍼티 값
const arr = [1, 2, 3];
arr.slice(0, 1); // [1]
arr.slice(1, 2); // [2]
slice 메서드의 인수를 모두 생략할 경우 원본 배열의 복사본을 생성하여 반환한다. 이때 생성된 복사본은 얕은 복사를 통해 생성된다.
1
2
3
4
5
6
7
8
const arr = [1, 2, 3];
const copy = arr.slice();
console.log(copy); // [1, 2, 3]
console.log(copy === arr); // false
Array.prototype.join
join 메서드는 원본 배열의 모든 요소를 문자열로 변환 후, 인수로 전달받은 문자열