[JavaScript] 배열 메서드 

Moon·2024년 11월 24일
JavaScript
0

JavaScript | 기초

목록 보기
38/48
post-thumbnail

자바스크립트에서 배열을 안전하고 효과적으로 다루려면 배열 메서드를 잘 활용해야 한다. 이번 글에서는 배열을 다룰 때 자주 사용하는 메서드들을 정리해본다. 특히, splice, shift, pop, unshift, push와 같이 배열의 요소를 추가, 삭제, 수정할 때 활용되는 메서드들을 중심으로 다룬다.

배열 메서드 I: splice

배열을 다룰 때는 splice 같은 메서드를 사용하는 것이 효율적이다.

특히 삭제, 추가, 수정 작업에서 가장 많이 사용된다.

지난번에 delete 연산자를 써서 배열의 요소를 삭제했을 때, 완벽하게 삭제되지 않았던 점을 떠올려 보자.

삭제된 자리에는 <empty>라는 빈 자리가 남고 배열의 길이도 그대로였다.

이런 경우에는 splice 메서드를 사용하면 문제를 해결할 수 있다.

splice 메서드 기본 동작

splice 메서드는 배열에서 특정 위치의 요소를 삭제하거나 새로운 요소를 삽입할 때 사용한다. 이 메서드는 배열 자체를 직접 변경(mutating)한다.

사용 방법

array.splice(start, deleteCount, ...itemsToAdd)
  • start: 배열에서 변경을 시작할 인덱스를 지정한다. 이 위치에서부터 요소를 삭제하거나 삽입한다.
  • deleteCount: 배열에서 삭제할 요소의 개수를 지정한다. 이 값이 0이면 삭제는 발생하지 않는다.
  • itemsToAdd (선택 사항): 삭제한 자리에 삽입할 요소들을 지정한다. 이 인수를 생략하면 삭제만 수행된다.

1. 특정 요소 삭제

const members = ["프로그래밍", "자바스크립트", "배열", "강의", "학습"];

// 인덱스 4부터 1개의 요소 삭제
members.splice(4, 1);

console.log(members); // ["프로그래밍", "자바스크립트", "배열", "강의"]
  1. 초기 상태: 배열 members는 5개의 요소를 가지고 있다.
    • ["프로그래밍", "자바스크립트", "배열", "강의", "학습"]
  2. start 파라미터: 4를 지정하여 배열의 다섯 번째 요소("학습")에서 삭제를 시작한다.
    • 배열의 인덱스는 0부터 시작하기 때문에 4는 다섯 번째 요소를 나타낸다.
  3. deleteCount 파라미터: 1을 지정하여 "학습"이라는 한 개의 요소를 삭제한다.
  4. 결과: "학습"이 삭제되고 배열의 길이가 4로 조정된다.

삭제와 배열 길이 변화

splice 메서드는 배열을 직접 수정하기 때문에, 요소를 삭제한 후 배열의 길이도 즉시 변경된다. 이를 확인할 수 있는 예제는 다음과 같다:

const numbers = [10, 20, 30, 40, 50];

// 인덱스 1부터 2개의 요소 삭제
numbers.splice(1, 2);

console.log(numbers);      // [10, 40, 50]
console.log(numbers.length); // 3
  1. 초기 배열: numbers는 5개의 요소를 가지고 있다.
    • [10, 20, 30, 40, 50]
  2. 삭제 범위: start를 1로 지정하고, deleteCount를 2로 설정한다.
    • 인덱스 1부터 2개의 요소(20, 30)가 삭제된다.
  3. 결과: 배열에서 삭제된 공간은 자동으로 채워지며, 배열의 길이는 3으로 줄어든다.

2. 삭제 개수 조정

만약 두 번째 파라미터를 생략하면, 해당 인덱스부터 끝까지의 모든 요소가 삭제된다.

// 인덱스 1부터 끝까지 삭제
members.splice(1);
console.log(members); // ["프로그래밍"]

3. 삭제 후 새로운 요소 추가

splice의 세 번째 파라미터부터는 삭제된 자리에 들어갈 새로운 값을 넣을 수 있다.

// 인덱스 2부터 1개의 요소를 삭제하고 그 자리에 "자료구조", "알고리즘" 추가
members.splice(2, 1, "자료구조", "알고리즘");
console.log(members);
// ["프로그래밍", "자바스크립트", "자료구조", "알고리즘", "강의", "학습"]

삭제된 자리에 새로운 값들이 들어가고, 나머지 요소들은 뒤로 밀린다.

4. 요소 추가만 하기

삭제 개수를 0으로 설정하면 아무 것도 삭제하지 않고 새 값을 추가할 수 있다.

// 인덱스 1에 "컴퓨터 과학", "코딩 인터뷰" 추가
members.splice(1, 0, "컴퓨터 과학", "코딩 인터뷰");
console.log(members);
// ["프로그래밍", "컴퓨터 과학", "코딩 인터뷰", "자바스크립트", "자료구조", "알고리즘", "강의", "학습"]

이렇게 하면 삭제 없이 배열에 새 값을 삽입할 수 있다.

  • 요소를 삭제하지 않고, 새로운 요소를 삽입할 수 있다.
  • 예: members.splice(2, 0, "새 요소");

5. 요소 수정

삭제할 개수를 1로 설정하고 새 값을 전달하면 기존 값을 수정할 수 있다.

// 인덱스 2의 요소를 "네트워크"로 수정
members.splice(2, 1, "네트워크");
console.log(members);
// ["프로그래밍", "컴퓨터 과학", "네트워크", "자바스크립트", "자료구조", "알고리즘", "강의", "학습"]

여러 요소를 한 번에 수정하는 것도 가능하다.

// 인덱스 3부터 2개의 요소를 삭제하고 새 값으로 대체
members.splice(3, 2, "클린 코드", "리팩토링");
console.log(members);
// ["프로그래밍", "컴퓨터 과학", "네트워크", "클린 코드", "리팩토링", "알고리즘", "강의", "학습"]

정리

splice 메서드는 배열의 요소를 삭제, 추가, 수정할 때 사용하는 가장 강력한 도구다.

특히 삭제한 자리에 새 값을 넣을 수 있는 기능은 배열을 다룰 때 큰 유연성을 제공한다.

필요한 곳에서 적절히 활용하면 배열 작업이 훨씬 간편해진다.

  • 특정 요소 삭제: 시작 인덱스와 삭제 개수 지정.
  • 삭제 후 추가: 세 번째 파라미터부터 새 값을 넣는다.
  • 요소 추가: 삭제 개수를 0으로 설정.
  • 요소 수정: 삭제 후 새 값을 넣어 수정 가능.

배열 메서드 II: shift, pop, unshift, push

배열의 양 끝부분의 요소만을 다룰 때는 splice보다 더 간결하게 사용할 수 있는 메서드들이 있다.

배열의 양 끝을 다룰 수 있는 메서드들에 대해 살펴보자.

1. 배열의 첫 번째 요소 삭제: shift

shift 메서드는 배열의 첫 번째 요소를 삭제한다.

이 메서드는 파라미터가 필요 없고, 첫 번째 요소가 삭제되면 나머지 요소들이 앞으로 밀린다.

코드 예제:

const members = ["HTML", "CSS", "JavaScript", "React"];

// 첫 번째 요소 삭제
members.shift();
console.log(members); // ["CSS", "JavaScript", "React"]

동작 설명:

  1. 배열의 첫 번째 요소 "HTML"이 삭제된다.
  2. "CSS", "JavaScript", "React"가 앞으로 밀려나며 인덱스가 재정렬된다.
  3. 배열의 길이는 자동으로 줄어든다.

추가 포인트:

  • shift는 삭제된 요소를 반환한다.
  • 삭제된 요소가 필요하다면 반환 값을 활용하면 된다.
const removedElement = members.shift();
console.log(removedElement); // "HTML"

2. 배열의 마지막 요소 삭제: pop

pop 메서드는 배열의 마지막 요소를 삭제한다.

코드 예제:

const members = ["HTML", "CSS", "JavaScript", "React"];

// 마지막 요소 삭제
members.pop();
console.log(members); // ["HTML", "CSS", "JavaScript"]

동작 설명:

  1. 배열의 마지막 요소 "React"가 삭제된다.
  2. 나머지 요소는 그대로 유지되며 순서는 바뀌지 않는다.
  3. 배열의 길이는 줄어든다.

추가 포인트:

  • pop도 삭제된 요소를 반환한다.
  • 반환 값을 사용하면 삭제된 데이터를 따로 저장할 수도 있다.
const removedElement = members.pop();
console.log(removedElement); // "React"

3. 배열의 첫 번째 위치에 값 추가: unshift

unshift 메서드는 배열의 첫 번째 위치에 값을 추가한다.

값이 추가되면 기존 요소들이 뒤로 밀린다.

코드 예제:

const members = ["CSS", "JavaScript", "React"];

// 첫 번째 위치에 값 추가
members.unshift("HTML");
console.log(members); // ["HTML", "CSS", "JavaScript", "React"]

동작 설명:

  1. "HTML"이 배열의 첫 번째 위치에 추가된다.
  2. 기존 요소 "CSS", "JavaScript", "React"는 뒤로 밀리며 인덱스가 재정렬된다.
  3. 배열의 길이는 늘어난다.

추가 포인트:

  • unshift는 추가된 이후 배열의 새로운 길이를 반환한다.
const newLength = members.unshift("Tailwind");
console.log(newLength); // 5

4. 배열의 마지막 위치에 값 추가: push

push 메서드는 배열의 마지막 위치에 값을 추가한다.

이 메서드는 배열의 순서를 유지하며 새 요소를 추가한다.

코드 예제:

const members = ["HTML", "CSS", "JavaScript"];

// 마지막 위치에 값 추가
members.push("React");
console.log(members); // ["HTML", "CSS", "JavaScript", "React"]

동작 설명:

  1. "React"가 배열의 마지막 위치에 추가된다.
  2. 기존 요소들의 순서는 변하지 않는다.
  3. 배열의 길이는 늘어난다.

추가 포인트:

  • push는 추가된 이후 배열의 새로운 길이를 반환한다.
const newLength = members.push("Vue");
console.log(newLength); // 5

배열의 양 끝 요소만 다뤄야 할 경우, splice 대신 이 메서드들을 활용하면 더 간결하게 작업할 수 있다.

필요에 따라 삭제된 값이나 추가 후의 배열 길이를 반환받아 사용할 수도 있다.

배열 메서드 III: indexOf, lastIndexOf, includes, reverse

splice, shift, pop, unshift, push처럼 배열의 요소를 추가하거나 삭제하는 메서드 외에도 배열에는 값을 찾거나 확인하거나 배열을 조작하는 다양한 메서드들이 있다.

이번에는 값 찾기(indexOf, lastIndexOf, includes)와 배열 순서 뒤집기(reverse) 같은 메서드들을 살펴보자.

1. 배열에서 특정 값 찾기: indexOf / lastIndexOf

배열에서 특정 값이 어느 위치에 있는지 알고 싶을 때는 indexOf 메서드를 사용한다.

array.indexOf(item) 형태로 호출하면, 배열에서 item이 있는 첫 번째 인덱스를 반환한다.

코드 예제:

const brands = ["Google", "Kakao", "Naver", "Kakao"];

console.log(brands.indexOf("Kakao")); // 1
console.log(brands.indexOf("Daum")); // -1

동작 설명:

  1. brands.indexOf("Kakao")는 "Kakao"가 처음 등장한 위치인 1번 인덱스를 반환한다.
  2. 배열에 "Daum"은 없으므로 -1을 반환한다.

배열을 뒤에서부터 검색: lastIndexOf

lastIndexOf는 indexOf와 비슷하지만 뒤에서부터 검색한다.

array.lastIndexOf(item)을 호출하면 배열 끝에서부터 item을 찾아 가장 마지막 위치의 인덱스를 반환한다.

코드 예제:

console.log(brands.lastIndexOf("Kakao")); // 3
console.log(brands.lastIndexOf("Daum")); // -1

동작 설명:

  1. brands.lastIndexOf("Kakao")는 "Kakao"가 마지막으로 등장한 위치인 3번 인덱스를 반환한다.
  2. "Daum"은 여전히 배열에 없으므로 -1을 반환한다.

2. 배열에 특정 값이 있는지 확인: includes

indexOf와 lastIndexOf는 특정 값이 배열에 포함되어 있는지 확인할 수도 있지만, 값을 찾는 대신 여부만 알고 싶다면 includes를 사용하는 것이 더 적합하다.

array.includes(item) 형태로 호출하면, 배열에 item이 있으면 true, 없으면 false를 반환한다.

코드 예제:

console.log(brands.includes("Kakao")); // true
console.log(brands.includes("Daum")); // false

동작 설명:

  1. "Kakao"는 배열에 포함되어 있으므로 *true를 반환한다.
  2. "Daum"은 포함되어 있지 않으므로 *false를 반환한다.

3. 배열 뒤집기: reverse

reverse는 배열의 요소 순서를 역순으로 뒤집는 메서드다.

array.reverse()를 호출하면 배열이 뒤집힌다.

이때 원본 배열이 변경된다는 점에 주의해야 한다.

코드 예제:

const reversedBrands = ["Google", "Kakao", "Naver", "Kakao"];
console.log(reversedBrands); // ["Google", "Kakao", "Naver", "Kakao"]

reversedBrands.reverse();
console.log(reversedBrands); // ["Kakao", "Naver", "Kakao", "Google"]

동작 설명:

  1. 처음 배열의 순서는 ["Google", "Kakao", "Naver", "Kakao"].
  2. reverse를 호출한 후 배열은 ["Kakao", "Naver", "Kakao", "Google"]로 역순이 된다.

요약: 배열 메서드 정리

메서드역할반환 값동작 설명
splice특정 위치의 요소 삭제/추가/수정삭제된 요소들의 배열배열의 중간 요소를 조작할 때 사용
shift첫 번째 요소 삭제삭제된 요소나머지 요소들이 앞으로 밀림
pop마지막 요소 삭제삭제된 요소나머지 요소는 그대로 유지됨
unshift첫 번째 위치에 새 값 추가배열의 새로운 길이기존 요소들은 뒤로 밀림
push마지막 위치에 새 값 추가배열의 새로운 길이기존 요소는 유지되고 마지막에 추가됨
indexOf특정 값이 배열에 있으면 첫 번째 위치의 인덱스를 반환값의 인덱스 또는 -1앞에서부터 검색
lastIndexOf특정 값이 배열에 있으면 마지막 위치의 인덱스를 반환값의 인덱스 또는 -1뒤에서부터 검색
includes특정 값이 배열에 포함되어 있는지 확인true 또는 false값의 존재 여부만 반환
reverse배열의 순서를 뒤집음배열의 참조값(원본 변경됨)기존 배열이 역순으로 변경됨

요약

배열을 다룰 때는 다양한 메서드를 활용하면 작업을 훨씬 더 간결하고 효율적으로 처리할 수 있다.

이번에 다룬 splice, shift, pop, unshift, push와 같은 기본 메서드뿐만 아니라,

indexOf, lastIndexOf, includes, reverse 같은 값 탐색 및 조작 메서드도 알고 있으면 실전에서 유용하게 활용할 수 있다.

이 메서드들을 잘 이해하고 익혀두면 배열과 관련된 대부분의 작업을 쉽게 처리할 수 있을 것이다.

그리고... 사실 이 밖에도 배열이 가지고 있는 유용한 메소드들이 다양하게 있는데. 더 많은 내용을 알고싶다면, 이 링크를 참고!

profile
Moon
MOON.DEVLOG
이전 포스트

[JavaScript] 배열 다루기

다음 포스트

[JavaScript] for…of 반복문

0개의 댓글