[Javascript] 배열의 원소를 다루는 방법들 1

박기영·2022년 8월 29일

Javascript

목록 보기

2/45

문제 상황

코테를 준비하기 위해 공부를 시작하면, 기초적인 문제들부터 배열에 관한 것들이 상당히 많이 나오는 것을 알 수 있다.
필자는 여러 회사의 코테를 지원해보고 경험해보면서, 배열을 다루는 일이 정말 많다는 것을 느꼈다.(물론, 초보자일 때 멋모르고 지원해서 건들지도 못한게 90% 이상이다.)
최근에 본 코테에서도 2차원 배열 활용 문제가 나오는 등 지겹도록 나오고, 떼어낼 수 없는 데이터 구조인 것 같으므로, 배열을 다루는 방법을 확실하게 알 필요가 있다.
특히나, 원본 배열을 바꾸는지, 새로운 배열을 반환하는지 명확하게 알아야 React에서 사용할 때도 헤매는 일이 없을 것이다.

예시로 사용할 배열은 다음과 같다.

// 배열 예시
let a = [1,2,3,4,5];

배열의 맨 뒤 원소를...

pop

pop은 배열의 맨 뒤 원소를 제거하는 메서드이다.

console.log(a.pop()); // 5

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

pop은 제거된 배열 원소를 리턴한다.
pop은 원본 배열이 변경된다.

push

push는 배열의 맨 뒤에 원소를 추가하는 메서드이다.

console.log(a.push(10)); // 6

console.log(a); // [1,2,3,4,5,10]

push는 변경된 배열의 원소 개수를 리턴한다.
push는 원본 배열이 변경된다.

배열의 맨 앞 원소를...

shift

shift는 배열의 맨 앞 원소를 제거하는 메서드이다.

console.log(a.shift()); // 1

console.log(a); // [2,3,4,5]

shift는 제거된 배열 원소를 리턴한다.
shift는 원본 배열이 변경된다.

unshift

unshift는 배열의 맨 앞에 원소를 추가하는 메서드이다.

console.log(a.unshift(9)); // 6

console.log(a); // [9,1,2,3,4,5]

unshift는 변경된 배열의 원소 개수를 리턴한다.
unshift는 원본 배열이 변경된다.

배열의 특정 원소를...

splice

splice는 배열의 특정 원소를 삭제, 변경, 추가하는 메서드이다.
사용법은 아래와 같다.

arr.splice(index[, deleteCount, elem1, ..., elemN])

index는 조작을 가할 첫 번째 요소를 가리키는 인덱스이다.
deleteCount는 제거하고자 하는 요소의 개수를 나타낸다.
elem1, ..., elemN은 배열에 추가할 요소를 나타낸다.
예시를 배열 원소의 삭제를 알아보자.

// 1번 인덱스에 조작을 가한다.
// 1개의 원소를 제거한다.
console.log(a.splice(1,1)); // [2]

console.log(a); // [1,3,4,5]

splice(1,1)은 제거된 원소를 배열의 형태로 리턴한다.
splice는 원본 배열이 변경된다.

이번에는 변경을 해보자.

// 1번 인덱스에 조작을 가한다.
// 1개의 원소를 제거한다.
// 100을 1번 인덱스 자리에 추가한다.
console.log(a.splice(1,1,100)); // [2]

console.log(a); // [1,100,3,4,5]

splice(1,1,100)은 제거된 원소를 배열의 형태로 리턴한다.
splice는 원본 배열이 변경된다.

이번에는 추가를 해보자.

// 1번 인덱스에 조작을 가한다.
// 0개의 원소를 제거한다. 제거한게 없으므로 빈 배열[] 리턴.
// 100과 200을 1번 인덱스 자리에서부터 추가한다.
console.log(a.splice(1,0,100,200)); // []

console.log(a); // [1,100,200,2,3,4,5]

deleteCount에 0을 넣으면 기존 원소의 삭제없이 추가만 하는게 가능하다.
splice는 원본 배열이 변경된다.

slice

slice는 지정된 범위의 배열 원소를 복사해서 리턴하는 메서드이다.
사용법은 아래와 같다.

arr.slice([start], [end])

start 인덱스에서부터 end-1 인덱스까지의 원소를 복사해서 리턴한다.
따라서, 원본 배열에는 변화가 없다.
start와 end를 사용하는 것이 선택적이라고 적혀있으므로, 각 상황에 대해서 살펴보자.

// 아무것도 입력하지 않으면
// a 배열 전체를 복사해서 리턴한다.
let b = a.slice();

console.log(a); // [1,2,3,4,5]
console.log(b); // [1,2,3,4,5]

slice는 매개변수를 입력하지 않으면 배열 전체를 복사해서 리턴한다.
slice는 원본 배열에 영향을 주지 않는다.

이번에는 start만 입력해보자.

// start만 입력하면
// start 인덱스부터 a 배열 끝까지를 복사해서 리턴한다.
let b = a.slice(2);

console.log(a); // [1,2,3,4,5]
console.log(b); // [3,4,5]

slice는 start 인덱스만 입력하면 start 인덱스부터 배열 끝까지를 복사해서 리턴한다.
slice는 원본 배열에 영향을 주지 않는다.

이번에는 start, end 인덱스를 모두 사용해보자.

// 매개변수를 모두 입력하면
// 해당 범위만큼 복사해서 리턴한다.(start ~ end-1)
let b = a.slice(2,4);

console.log(a); // [1,2,3,4,5]
console.log(b); // [3,4]

slice는 모든 매개변수 입력 시, 해당 범위만큼 배열을 복사해서 리턴한다.
slice는 원본 배열에 영향을 주지 않는다.

delete

delete는 배열의 특정 원소 하나를 삭제하는 메서드이다.
단, 값이 삭제되는거지 인덱스 자체가 삭제되는 것이 아니라는 점에 주의해야한다.
또한, 이 메서드가 가능한 이유는 JS에서 배열이 object 타입이기 때문이다.

console.log(typeof a); // object

예시를 통해 살펴보자.

// 0번째 인덱스를 삭제한다.
delete a[0];

console.log(a); // [empty,2,3,4,5]

console.log(a.length) // 5

한번에 이해가 된다. 공간 자체는 남아있는 것을 확인할 수 있다.
필자가 배열 원소를 삭제할 때는 십중팔구 공간까지 완전히 삭제하는 경우였기 때문에
이 메서드는 어디에 써야할지 감이 잘 잡히지않는다..

배열 여러 개를 합칠 때...

concat

concat은 어떤 배열과 입력된 인자(혹은 숫자, 객체, 문자열 등등)를 하나의 배열로 합치는 메서드이다.
사용법은 아래와 같다.

arr.concat(arg1, arg2...)

인자로 넣을 수 있는 개수의 제한이 없는 것을 확인 할 수 있다.
또한 무조건 배열을 인자로 넣어야하는 것도 아니다.
예시를 통해 살펴보자.

let b = a.concat([6,7]);

console.log(a); // [1,2,3,4,5]
console.log(b); // [1,2,3,4,5,6,7]

concat은 입력된 인자를 원본 배열에 이어 붙인 배열을 리턴한다.
concat은 원본 배열에 영향을 주지 않는다.

그러면 배열이 아닌 것을 인자로 넣으면 어떻게될까?

let b = a.concat("6","7");
let c = a.concat({"test":6, "hi":"bye"});

console.log(a); // [1,2,3,4,5]
console.log(b); // [1,2,3,4,5,'6','7']
console.log(c); // [1,2,3,4,5,{...}]

결합된 배열 b를 보면 문자열이 들어와있는 것을 확인할 수 있다.
결합된 배열 c를 보면 객체가 들어와있는 것을 확인할 수 있다.
concat은 원본 배열에 영향을 주지 않는다.

음수 인덱스 사용

배열 관련 메서드들은 음수 인덱스를 사용하는 것이 가능하다.
예를들어, splice 메서드를 살펴보자.

// -1번 인덱스에 조작을 가한다.(맨 뒤에서 첫 번째 원소)
// 0개의 원소를 제거한다.
// 6,7을 -1번 인덱스 자리에 추가한다.
a.splice(-1, 0, 6, 7);

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

끝

사실 map, filter, find, forEach, sort, split, join, reduce 등등 설명해야할게 더 있지만,
너무 길어져서 배열 원소 추가, 삭제, 변경 등에 주로 사용되는 것들만 적어보았다.
다음에는 배열 원소를 활용해서 조건 판별이나, 원하는 조건의 원소만 찾는 등 배열 내부에서 다양한 작업을 하는 메서드들을 알아보겠다.