[JavaScript] 자바스크립트 배열 메서드 (Array Method) 가볍게 이해하기

메서드를 활용하면 배열을 훨씬 더 자유롭게 다룰 수 있다.

배열이 기본적으로 갖추고 있는 다양한 메서드들 중에서 기본적으로 배열을 다루는 몇 가지들을 가볍게 정리해 보고자 한다.

 

배열의 끝 요소를 다루는 push, pop 

push와 pop은 배열의 끝부분을 다루는 메서드이다.

push는 파라미터로 넘겨준 값을 배열 끝에 요소로 추가하고, pop은 파라미터 없이 해당 배열의 가장 끝에 있는 요소를 제거한다.

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

numbers.push(6);
console.log(numbers); // (6) [1, 2, 3, 4, 5, 6]

numbers.pop();
console.log(numbers); // (5) [1, 2, 3, 4, 5]

한 가지 독특한 점은 이 메서드들은 리턴 값이 있다. 메서드를 호출한 자리를 콘솔에 출력해보면, push의 경우에는 추가된 이후의 배열의 길이를, pop의 경우에는 삭제되는 요소가 콘솔에 출력되는 걸 확인할 수 있다.

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

console.log(numbers.push(6)); // 6
console.log(numbers); // (6) [1, 2, 3, 4, 5, 6]

console.log(numbers.pop()); // 6
console.log(numbers); // (5) [1, 2, 3, 4, 5]

사소한 부분이지만 이런 점도 충분히 필요에 따라 응용할 수도 있을 것 같다.

 

참고로 push메서드는 쉼표로 구분해서 여러 개의 값을 파라미터로 전달하면 여러 개를 추가할 수 있다.

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

console.log(numbers.push(6, 7, 8, 9)); // 9 
console.log(numbers); // (9) [1, 2, 3, 4, 5, 6, 7, 8, 9]

 

배열의 첫 요소를 다루는 unshift, shift

unshift와 shift는 배열의 첫 부분을 다루는 메서드이다.

unshift는 파라미터로 넘겨준 값을 배열 제일 첫 자리에 요소로 추가한다, shift는 파라미터 없이 해당 배열의 가장 첫 요소를 제거한다.

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

console.log(numbers.unshift(0)); // 6
console.log(numbers); // (6) [0, 1, 2, 3, 4, 5]

console.log(numbers.shift()); // 0
console.log(numbers); // (5) [1, 2, 3, 4, 5]

두 메서드 모두 반환 값이 있는데, push, pop과 마찬가지로, 요소를 추가하는 unshift의 경우에는 추가된 이후의 배열의 길이를, shift의 경우에는 삭제되는 요소가 콘솔에 출력되는 걸 확인할 수 있다.

 

unshilft도 push와 마찬가지로 쉼표로 구분해서 여러 개의 값을 파라미터로 전달하면 여러 개를 추가할 수 있다.

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

console.log(numbers.unshift(-3, -2, -1, 0)); // 9
console.log(numbers); // (9) [-3, -2, -1, 0, 1, 2, 3, 4, 5]

 

배열을 잘라내는 커터칼 splice

[JavaScript] 자바스크립트 배열(Array) 이해하기 - 2에서 배열의 요소는 delete 연산자로 제거할 수 없다고 정리했는데, splice를 활용하면 편리하게 배열의 요소를 도려낼(?) 수가 있다.

splice는 처음 접할 때 파라미터가 조금 복잡한데 총 3단계로 나눠보면 금방 이해할 수 있다.

 

1. 도려낼 시작 index

splice의 첫 번째 파라미터는 도려낼 시작 index이다.

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

console.log(numbers.splice(3)); // (2) [4, 5]
console.log(numbers); // (3) [1, 2, 3]

splice메서드를 호출할 때 파라미터로 숫자값 하나만 전달할 경우, 배열 내에서 해당하는 index요소를 포함해서 이 후의 요소들을 모두 제거하고, 제거된 배열을 반환한다.

 

2. 도려낼 갯수

splice의 두 번째 파라미터는 도려낼 개수이다.

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

console.log(numbers.splice(3, 1)); // [4]
console.log(numbers); // (4) [1, 2, 3, 5]

splice메서드를 호출할 때 두 번째 인자로 숫자 값을 넣어주면, 도려낼 시작 index부터 전달된 개수만큼만 제거하고, 제거한 배열을 반환하는 모습을 확인할 수 있다.

 

3. 대체할 요소

splice의 세 번째 파라미터부터는 도려낸 자리에 대체할 요소다.

splice는 단순히 요소를 제거하는 기능만 하지 않고, 그 안에 대체할 요소를 추가할 수 도 있는 것이다.

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

console.log(numbers.splice(3, 1, 6)); // [4]
console.log(numbers); // (5) [1, 2, 3, 6, 5]

위 코드를 보면, 3번 index에 있는 숫자 값 4부터 1개의 요소를 삭제하고, 6이라는 숫자값을 대체한 것을 확인 할 수 있다.

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

console.log(numbers.splice(numbers.length, 0, 6)); // []
console.log(numbers); // (6) [1, 2, 3, 4, 5, 6]

console.log(numbers.splice(0, 0, -3, -2, -1, 0)); // []
console.log(numbers); // (10) [-3, -2, -1, 0, 1, 2, 3, 4, 5, 6]

굳이 이렇게 할 필요는 없지만, 첫 번째 파라미터에 배열의 길이 혹은 0을 전달하고 두 번째 파라미터에 숫자값 0을 전달하면 splice를 push와 unshift처럼 활용할 수도 있다.

나아가 두 번째 인자를 0으로 두면, 첫 번째 인자를 통해 배열 중간중간 필요한 자리에 요소를 추가하는 것도 가능하다.
물론, 마지막 줄에서도 확인할 수 있듯 세 번째부터 쉼표로 계속해서 값을 전달하면 여러 개의 요소도 추가할 수가 있다.

 

마무리

기존에 살펴봤었던 방식으로 배열의 요소를 다룰 수도 있지만 이렇게 메서드를 통해서 다양한 방식으로 배열을 다룰 수도 있다. 이밖에도 배열이 가지고 있는 유용한 메서드들이 많지만, 일단은 기본적으로 배열에 요소를 추가하고 제거하는 대표적인 메서드들을 간단하게 살펴봤다.