[Javascript] 배열 메소드 Array Method 정리

 

 

원본 유지 vs 원본 변경 메소드

 

Javascript의 배열을 다루는 메소드는 크게 원본을 변경하는 메소드와 원본을 유지하는 메소드로 구분된다.  서로 비슷한 기능을 수행하지만 원본 배열을 변경하고 안하고의 차이는 크다. 

원본을 유지하는 메소드 : concat(), slice()

원본을 변경하는 메소드 : push(), pop(), shift(), unshift(), splice()

같은 기능을 하는데, 원본 배열 데이터를 변경하면서 코드가 꼬이는 경우가 한두번이 아니다. Javascript를 사용할 때 배열을 다루는 함수를 유의해야 하는 이유다.

 

concat() 

 

매개변수로 전달받은 데이터를 배열의 가장 마지막에 추가하여 새로운 배열을 리턴한다. 원본 배열은 그대로 유지한채 새롭게 복사된 배열을 리턴하게 된다.

 

arr이란 배열을 생성하고 '6'을 새로운 요소로 추가해줬다. 원본 배열과 새로운 배열 모두 출력해보면 기존 배열은 그대로 데이터를 유지하는 것을 볼 수 있다.

 

const arr = [1,2,3,4,5]
const newArr = arr.concat(6);

console.log(arr);
console.log(newArr);

➜  Javascript node test.js
[ 1, 2, 3, 4, 5 ]
[ 1, 2, 3, 4, 5, 6 ]

 

concat() 메소드의 매개변수로 배열을 전달하면 2차원 배열이 생성되지 않고, 1차원 배열에 요소값만 추가된다.

 

const arr = [1,2,3,4,5]
const newArr = arr.concat(arr);

console.log(arr);
console.log(newArr);

[ 1, 2, 3, 4, 5 ]
[
  1, 2, 3, 4, 5,
  1, 2, 3, 4, 5
]

 

 

slice()

 

매개변수로 전달받은 인자를 사용해서 기존 배열을 구간 복사를 진행한 후 리턴한다. 원본 배열을 변경하지 않는다. slice() 메서드는 1개 또는 2개의 인자를 전달받는다.

매개변수 1개인 경우 : 매개변수 부터 배열 (끝 -1) 까지 복사를 진행

const arr = [1,2,3,4,5]
const newArr = arr.slice(2);

console.log(arr);
console.log(newArr);

➜  Javascript node test.js
[ 1, 2, 3, 4, 5 ]
[ 3, 4, 5 ]

 

매개변수 2개인 경우 : start~end 구간의 배열을 복사 후 반환

const arr = [1,2,3,4,5]
const newArr = arr.slice(2,4);

console.log(arr);
console.log(newArr);

➜  Javascript node test.js
[ 1, 2, 3, 4, 5 ]
[ 3, 4 ]

 

slice() 메소드를 사용할 때 시작 인덱스가 원본 배열의 크기보다 큰 경우 빈배열을 반환한다.

또한 시작 인덱스가 종료 인덱스 보다 큰 경우에도 빈 배열을 반환한다.

const arr = [1,2,3,4,5]
const newArr_over = arr.slice(10);
const newArr_LargeStart = arr.slice(10,5);

console.log(arr);
console.log(newArr_over);
console.log(newArr_LargeStart);

➜  Javascript node test.js
[ 1, 2, 3, 4, 5 ]
[]
[]

 

인덱스를 음수로 지정하면 끝 방향에서 부터 -1 -2 -3 으로 카운팅 되어 인자를 반환한다. 전체 배열을 복사 반환하기 위해서는 " -arr.length " 로 입력해주면 된다. 잘 사용하는 문법은 아님.

const arr = [1,2,3,4,5]
const arr_minus = arr.slice(-3,-1);
const arr_minus_all = arr.slice(-arr.length);

console.log(arr);
console.log(arr_minus);
console.log(arr_minus_all);

➜  Javascript node test.js
[ 1, 2, 3, 4, 5 ]
[ 3, 4 ]
[ 1, 2, 3, 4, 5 ]

 

 

push()

 

매개변수로 전달받은 요소를 원본 배열의 마지막 순서에 추가한 후 추가된 배열의 길이를 리턴한다. 

concat() 과 유사한 기능을 가지고 있지만 엄현히 다른 메소드다. 

일단 push() 메소드는 원본 배열을 변경한다. 요소를 추가하면서 원본 배열의 구성을 변경하고 원본 배열의 길이도 변경한다.

 

const arr = [1,2,3,4,5]
const newArr = arr.push(6);

console.log(arr);
console.log(newArr);

➜  Javascript node test.js
[ 1, 2, 3, 4, 5, 6 ]
6

 

 

push() 메소드를 사용해 배열을 추가할 때도 concat()과는 차이가 있다. conat()이 배열의 요소를 추가하는 반면, push()는 배열 자체를 삽입해버린다. 

const arr = [1,2,3,4,5]
const newArr = arr.push([10,11,12]);

console.log(arr);
console.log(newArr);

➜  Javascript node test.js
[ 1, 2, 3, 4, 5, [ 10, 11, 12 ] ]
6

 

 

pop()

 

원본 배열의 마지막 요소를 제거하고 제거된 요소를 반환한다. 원본 배열을 직접 변경하는 메소드다.

const arr = [1,2,3,4,5]
const newArr = arr.pop();

console.log(arr);
console.log(newArr);

➜  Javascript node test.js
[ 1, 2, 3, 4 ]
5

 

만약 원본 배열이 빈 배열이라면 undefined를 반환한다.

const arr = []
const newArr = arr.pop();

console.log(arr);
console.log(newArr);

➜  Javascript node test.js
[]
undefined

 

 

shift()

 

pop() 메소드와는 다르게 원본 배열의 첫번째 요소를 제거하고 제거된 요소를 반환한다. 원본 배열을 직접적으로 변경한다. 

const arr = [1,2,3,4,5]
const newArr = arr.shift();

console.log(arr);
console.log(newArr);

➜  Javascript node test.js
[ 2, 3, 4, 5 ]
1

 

만약 원본배열이 빈 배열인 경우 undefined를 반환한다.

const arr = []
const newArr = arr.shift();

console.log(arr);
console.log(newArr);

➜  Javascript node test.js
[]
undefined

 

 

unshift()

 

원본 배열을 직접적으로 변경하는 메소드다. 원본 배열의 첫번째 순서에 전달받은 요소를 추가하고 변경된 원본배열의 길이를 반환한다. 

 

const arr = [1,2,3,4,5]
const newArr = arr.unshift(0);

console.log(arr);
console.log(newArr);

➜  Javascript node test.js
[ 0, 1, 2, 3, 4, 5 ]
6

 

shift()와 unshift()는 push()와 pop()과 순서만 변경되고, 기능은 동일하다. 하지만 두개의 메소드는 속도에서 상당한 차이를 가지고 있다.

배열 자료구조는 각 인자들이 메모리 주소를 가지고 있기 때문에 맨 뒤에 데이터를 추가하는 것은 오버헤드가 적지만, unshift()나 shift() 처럼 맨 앞의 데이터를 조작하기 때문에 모든 데이터가 한칸 뒤 로 메모리 주소를 이동했다가 다시 복귀 하기 때문에 성능이 좋지 않다. 

만약 배열의 길이가 크거나, 프로그램의 오버헤드가 크다면 pop()이나 push()를 사용해야 한다.

 

 

splice() 

 

원본 배열의 특정 구간의 데이터를 삭제하고 새로운 데이터를 추가한다. 원본 배열을 직접적으로 변경하며, 원본배열에서 제거된 요소들을 반환한다.

 

spilce(시작 인덱스, 제거할 요소 개수, 추가할 요소1, 추가할 요소 2 ....)

 

const arr = [1,2,3,4,5]
const newArr = arr.splice(1,2,7,7,7);

console.log(arr);
console.log(newArr);

➜  Javascript node test.js
[ 1, 7, 7, 7, 4, 5 ]
[ 2, 3 ]

 

제거된 요소들은 배열 형태로 반화되기 때문에 iterable 하다. 

const arr = [1,2,3,4,5]
arr.splice(1,2,7,7,7).forEach((item)=>{
	console.log(item);
});

➜  Javascript node test.js
2
3