배열 메소드

자바스크립트로 프로젝트를 진행하다보면 배열메소드들을 굉장히 많이 사용하게 되는데 머릿속에 항상 남아있지 않아서 찾아보며 사용하곤했다. 정말 많은 분야에서 매우 유용하게 활용되는 배열메소드들을 정복해보자.

push

push는 해당 배열의 맨 마지막에 요소를 추가한다.

const arr = [1, 2, 3, 4, 5]
arr.push(6)
console.log(arr) // [1,2,3,4,5,6]

pop

해당 배열의 맨 마지막 요소를 제거한다.

const arr = [1, 2, 3, 4, 5]
arr.pop()
console.log(arr) // [1,2,3,4]

unshift

배열의 맨 앞에 요소 하나를 추가한다.

const arr = [1, 2, 3, 4, 5]
arr.unshift(100)
console.log(arr) // [100,1,2,3,4,5]

shift

배열의 맨 앞에 요소 하나를 제거한다.

const arr = [1, 2, 3, 4, 5]
arr.shift()
console.log(arr) // [2,3,4,5]

sort

해당 배열을 재정렬한다. 기본적으로 사전순으로 정렬이 되며, 인자로 함수를 넣음으로써 정렬하는 규칙을 전달해줄 수 있다. 숫자 크기 순서가 아님

const arr = [20, 31, 2, 7, 45, 11]
arr.sort()
console.log(arr) // [11,2,20,31,45,7]

배열의 각각의 요소가 문자로 변환된 뒤, 맨 앞자리 부터 사전순으로 정렬을 하는 원리.

const arr = [20, 31, 2, 7, 45, 11]
arr.sort(function(a, b) {
  return a - b
})
console.log(arr) // [2,7,11,20,31,45]

소트함수의 인자로 들어간 콜백함수의 리턴 결과가 0보다 작은경우 a를 b보다 낮은 색인으로 정렬한다. 즉 a가 먼저온다.
콜백함수가 0을 반환하면 a와 b를 서로 변경하지 않고 모든 다른요소에 대해 정렬한다.
0보다 클 경우 b를a보다 낮은 인덱스로 정렬한다.

reverse

배열의 순서를 뒤집는다.

const arr = [1, 2, 3, 4, 5]
arr.reverse()
console.log(arr) // [5,4,3,2,1]

splice

해당 배열에서 특정 범위의 요소를 잘라낸다. 리턴 결과로는 잘라낸 범우의 배열이 나오고 원래 배열에는 잘라내고 남은 범위의 배열이 있게 된다.

const arr = [1, 2, 3, 4, 5]
let result = arr.splice(2, 2)

console.log(arr) // [1,2,5]
console.log(result) // [3,4,]

범위를 지정하기 위해 두개의 값을 숫자로 받는다. 첫번째 값은 범위의 시작지점이고 두번째 값은 시작지점으로부터 몇개까지를 범위로 정할지 이다. 두번째 값이 없다면 배열의 마지막까지 범위로 지정된다. 즉 arr.splice(2,2)은 배열의 2번 인덱스에서 시작하는 두개의 요소를 잘라낸다는 뜻.

정리

위의 배열 메소드들은 변형된 결과를 새로 만들어내서 리턴하는게 아니라, 원본 배열을 변형한다는 점이다. 어떤 함수가 외부에 어떤 영향을 주는 것을 side effect(부수효과)라고 하는데, 이 7개의 메소드들은 사이드이펙트를 가지고 있다고 말할 수 있다.

원본 변형시키지 않는 배열 메소드

원본배열은 그대로 두고, 변형결과를 새로운 배열로 복사해서 리턴한다.
배열 접근 메소드라고 부르며, 최신 자바스크립트 개발 트랜드로 갈수록 점점 더 사용률이 많아지는 문법들.

concat

여러개의 배열을 인자로 받고, 원본배열과 인자로 받은 배열이 합쳐진 결과를 리턴한다.

const arr = [1, 2, 3, 4, 5]
const newArr = arr.concat(6, 10, [44, 22])
console.log(arr) // [1,2,3,4,5]
console.log(newArr) // [1,2,3,4,5,6,10,44,22]

원본배열은 실제로 변형되지 않는다.

slice

원본배열에서 특정범위를 잘라낸 결과를 리턴한다. 원본배열은 유지 splice와 비슷하나 범위를 결정하는 방법이 조금 다름

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

slice의 첫번째 인자는 splice처럼 범위의 시작지점이다. 두번째 인자는 범위의 마지막지점이며 범위의 크기를 쓰는 splice와는 조금 다르다. 두번째 인자의 인덱스에 해당하는 요소는 결과에서 제외되며, 해당 인덱스 바로 앞 인덱스까지가 결과가 된다. slice의 인자는 음수가 될 수 있다 음수는 뒤에서 샌 순서로인식함.