[JavaScript] Array 생성 및 조작 방법 한 번에 정리하기 : push, pop, at, splice, fill, Array.from
JavaScript의 Array란?
JavaScript의 Array는 복수의 값을 하나의 변수에 저장하기 위한 자료 구조이다. Java, Kotlin과 같은 다른 언어들에서 Array는 고정된 개수의 원소를 갖는 것과 달리 JavaScript의 Array의 원소 개수는 가변적이다. 즉, JavaScript의 Array는 흔히 말하는 List 자료 구조와 비슷하게 동작한다.
먼저 Array를 생성해 보도록 하자.
JavaScript Array 조작하기
Array 생성하기
Javascript의 Array는 Array 생성자인 []에 의해 생성된다. 예를 들어 아래와 같이 Array를 선언할 수 있다.
const array = []
만약 생성 시 1부터 5까지의 원소를 넣고 싶다면 아래와 같이 생성하면 된다.
const array = [1, 2, 3, 4, 5]
console.log(array)
// [1, 2, 3, 4, 5 ] 출력
push 사용해 Array에 값 추가하기
Array에 값을 추가하기 위해서는 Array의 push 메서드를 쓰면 된다. 예를 들어 빈 Array를 생성하고 내부에 1부터 3까지의 값을 넣고 싶다면 아래와 같이 쓰면 된다.
const list = []
list.push(1)
list.push(2)
list.push(3)
console.log(list)
// [ 1, 2, 3 ] 출력
pop 사용해 Array에서 값 제거하기
Array에서 값을 제거하기 위해서는 pop 메서드를 쓰면 된다. pop 메서드를 쓰면 마지막에 추가된 값이 가장 먼저 나오는 LIFO(Last in First out) 구조를 가진다.
따라서 1, 2, 3을 넣고 pop을 계속 하면 3, 2, 1 순서로 나오게 되며 pop을 수행할 수 list의 값은 [1, 2, 3], [1, 2], [1], [] 순서로 변하게 된다.
const list = []
list.push(1)
list.push(2)
list.push(3)
console.log(list.pop()) // 3 출력, list = [1, 2]
console.log(list.pop()) // 2 출력, list = [1]
console.log(list.pop()) // 1 출력, list = []
at 사용해 Array 내부의 특정 값에 접근하기
Array 내부의 특정값에 접근을 하기 위해서는 Array[접근위치]를 사용하면 된다. 맨 앞의 숫자가 0이고 뒤로 갈수록 하나씩 숫자가 증가한다.
const array = [1, 2, 3, 4, 5]
console.log(array[0]) // 1 출력
console.log(array[1]) // 2 출력
console.log(array[2]) // 3 출력
console.log(array[3]) // 4 출력
console.log(array[4]) // 5 출력
따라서 마지막 위치 값은 최대 길이에서 1을 뺀 값이 된다.
위 코드는 Array의 at 메서드로 대체될 수도 있다. 사실상 []가 at과 동의어이다.
const array = [1, 2, 3, 4, 5]
console.log(array.at(0)) // 1 출력
console.log(array.at(1)) // 2 출력
console.log(array.at(2)) // 3 출력
console.log(array.at(3)) // 4 출력
console.log(array.at(4)) // 5 출력
splice 사용해 Array에서 특정 범위의 값 제거하기
splice를 사용하면 Array에서 특정 범위의 값을 제거할 수 있다.
splice(start: number, deleteCount?: number): T[]
splice는 두개의 변수를 받는데 start는 시작 위치 값이고 deleteCount는 시작 위치부터 몇 개의 원소를 제거할 것인지를 뜻한다. 따라서 [1, 2, 3, 4, 5] 라는 Array가 있다고 했을 때, 0번 위치에서부터 2개를 제거하면 [1, 2] 가 제거되어 [3, 4, 5] 만 남는다.
const array = [1, 2, 3, 4, 5]
array.splice(0, 2)
console.log(array) // [ 3, 4, 5 ] 출력
만약 [1, 2, 3, 4, 5] 라는 Array가 있다고 했을 때, 1번 위치부터 2개를 제거했다고 하면 [1, 4, 5] 만 남는다.
const array = [1, 2, 3, 4, 5]
array.splice(1, 2)
console.log(array)
fill 사용해 Array 모든 값 특정 값으로 바꾸거나 일정 위치의 값을 특정 값으로 바꾸기
fill 을 사용하면 Array의 모든 값을 특정 값으로 바꿀 수 있다.
fill(value: T, start?: number, end?: number): this;
예를 들어 [1, 2, 3, 4, 5]를 모두 0으로 바꾸고 싶으면 value 값만 0으로 넘기면 된다.
const array = [1, 2, 3, 4, 5]
array.fill(0)
console.log(array) // [ 0, 0, 0, 0, 0 ]
만약 특정 위치의 값만 바꾸고 싶으면 start랑 end 값을 추가해주면 된다. start값은 시작 index이고 end는 종료 index+1 값이다. 보통 substring 같은 메서드를 쓸 때 이런식으로 start는 포함, end는 미포함되게 범위를 지정한다.
따라서 둘째 원소부터 다섯번째 원소까지 0으로 바꾸고 싶으면 다음과 같이 쓰면 된다.
const array = [1, 2, 3, 4, 5]
array.fill(0, 1, 5)
console.log(array) // [ 1, 0, 0, 0, 0 ]
이를 활용하면 다음과 같이 활용 할 수도 있다. 이 방식은 코딩 테스트를 할 때 특정 값으로 채워진 Array를 만들기 위해 많이 사용된다.
const array = Array(5).fill(1)
console.log(array) // [1, 1, 1, 1, 1 ]
Array.from 사용해 특정 값으로 채워진 Array 만들기
앞서 fill로 특정 값으로 채워진 Array를 만드는 방법을 살펴봤다. 앞서 살펴본 fill 과 같은 Array를 Array.from 을 사용해 만들 수 있다. Array.from은 ArrayLike이라는 인터페이스를 구현하는 객체를 받아 Array의 특성을 지정하고 이후 함수로 어떤 값이 올지를 설정할 수 있는 함수이다.
from<T, U>(arrayLike: ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];interface ArrayLike<T> {
readonly length: number;
readonly [n: number]: T;
}
예를 들어 길이가 5이고 모든 값이 1로 채워진 Array는 아래와 같이 만들 수 있다.
const array = Array.from({length: 5}, () => 1)
console.log(array) // [1, 1, 1, 1, 1 ]
정리
- 이번 시간에는 Javascript의 원소를 조작하는 방법에 대해 살펴보았다. 위에서 다룬 5가지 메서드는 많이 사용되는 메서드이니 직접 쳐보면서 익혀보도록 하자.
- 다른 언어들의 Array와 동작이 많이 달라 다른 언어를 익혔던 사람이면 처음에는 헷갈릴 수 있다. 간단히 List와 동작이 비슷하다고 생각하고 다루도록 하자.
