Array Method

자바스크립트로 코딩을 하면서 아마 가장 많이 쓰이는 메소드가 Array method가 아닐까 합니다. 배열은 데이터를 처리할 때 많이 쓰이기 때문에 그만큼 활용 빈도도 높으며 이에 따른 다양한 메소드들이 있기 때문입니다. 따라서 오늘은 여러가지 Array method를 정리해보도록 하겠습니다.

원본 배열을 수정하는 Method

이 메소드들은 원본 배열을 바로 수정하기 때문에 불변성을 지켜야 하는 경우 유의해서 사용해야 합니다.

.push() : 배열의 마지막에 새로운 요소를 추가하고 변경된 배열의 길이를 반환합니다.

.pop() : 배열의 마지막 요소를 제거한 후, 제거한 요소를 반환합니다.

.unshift() : 배열의 첫 번째 자리에 새로운 요소를 추가하고 변경된 배열의 길이를 반환합니다.

.shift() : 배열의 첫 번째 요소를 제거한 후 제거된 요소를 반환합니다.

let arr = [1,2,3];

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

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

arr.unshift(7)
console.log(arr)
//4
//[ 7, 1, 2, 3 ]

arr.shift()
console.log(arr)
//7
//[ 1, 2, 3 ]

.splice() : 배열의 특정 위치에 배열 요소를 추가하거나 삭제하고 삭제한 배열 요소를 반환압니다. 삭제한 요소가 없을 경우 빈 배열을 반환합니다.

Array.splice(start, delete, elements)
start : 수정할 배열 요소의 인덱스
delete : 삭제할 요소의 갯수. 요소를 제거하지 않고 추가할 경우 0
elements : 배열에 추가될 요소

let arr = [1,2,3];

arr.splice(1, 0, 2, 3, 4)
console.log(arr)
//[]
//[ 1, 2, 3, 4, 2, 3 ]

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

.sort() : 배열 내부의 요소를 정렬합니다.

let arr = [1, 210, 11, 3, 2, 131, 31];
arr.sort()
//[1, 11, 131, 2, 210, 3, 31]

//내림차순, 오름차순으로 정렬하기 위해선 sort를 이렇게 사용해야 합니다.

arr.sort((a,b) => a-b)
//[1, 2, 3, 11, 31, 131, 210]

arr.sort((a,b) => b-a)
//[210, 131, 31, 11, 3, 2, 1]

.reverse() : 배열 요소의 순서를 뒤집습니다.

let arr = [1,2,3];
arr.reverse()

// [3, 2, 1]

원본 배열을 수정하지 않고 새로운 배열을 리턴하는 Method

.concat() : 배열 끝에 새로운 요소를 추가한 뒤 새로운 배열을 반환합니다.

let arr = [1,2,3];
let newArr = arr.concat(4,5,6)
//newArr: [1,2,3,4,5,6]
let plusArr = arr.concat([4,[5,6]])
//plusArr: [1,2,3,4,[5,6]]

.slice() : 인수를 통해 지정한 만큼의 요소를 잘라낸 후 해당 배열을 반환합니다.

Array.slice(start, end)
start: 시작 인덱스
end: 지정한 인덱스의 바로 앞 요소까지를 잘라낼 요소로 지정

let arr = [1,2,3,4,5,6];
let newArr = arr.slice(3)
// [4,5,6]
let sliceArr = arr.slice(3,5)
// [4,5]

.join() 배열의 모든 요소를 하나의 문자열로 반환

let arr = [1,2,3]
let arrToStr = arr.join('')
// '123'
let arrToStr = arr.join(',')
// '1,2,3'

.indexOf() : 메서드의 첫번째 인자로 지정한 값을 배열 내에서 검색한 후, 가장 먼저 찾은 요소의 인덱스를 반환합니다.

Arr.indexOf(value, start)
value: 찾는 요소
start: 시작 인덱스

let arr = [1, 5, "a", o, true, 5, [1, 2], "9"];

arr.indexOf(5);       // 1
arr.lastIndexOf(5);   // 5
arr.indexOf(5, 5);    // 5
arr.indexOf(true, 5)  // -1

.