JavaScript 배열 메소드 (Array method)

JavaScript 배열 메소드 ( Array method )

자바스크립트에서 자주 쓰이는 배열 메소드를 정리

 

Array.isArray() (ES6)

인자에 들어가는 객체가 배열인지 확인할 때 사용
인자 - object

Array.isArray({ a: 1, b: 2}) /// false
Array.isArray([1,2,3]) //true

 

concat()

인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환
인자 - item1, item2, ...

const arr = [1,2,3]
arr.concat(4,5) // [1,2,3,4,5]
arr.concat([4,5]) // [1,2,3,4,5]
arr // [1,2,3] 원본이 바뀌지 않음

인자에 배열을 넣으면 배열의 원소 순서대로 들어감

 

every(), some() (ES6)

배열의 모든 원소가 제공한 함수를 통과하는지 테스트하는 메소드 every
배열의 원소중 하나라도 제공한 함수를 통과하는지 테스트하는 메소드 some
callback의 인자로는

1. currentValue - 현재 순회하는 원소 값
2. index - 순회하는 원소의 index
3. array - 순회되는 배열

const arr = [2,4,6,8]
arr.every( el => el % 2 === 0 ) // true
arr.some( el => el % 2 ) // true
arr // [2,4,6,8] 원본이 바뀌지 않음

 

fill() (ES6)

배열의 시작 인덱스부터 끝 인덱스까지 정적 값으로 채우는 메소드
인자 - value, start(optional), end(optional)
start의 기본값은 0, end의 기본값은 배열의 길이

const arr = Array(3)
arr.fill(2) // [2,2,2]
arr // [2,2,2] 원본이 바뀜

 

map() (ES6)

배열 내의 모든 원소에 대하여 제공된 함수를 호출하고,
결과를 모아 새로운 배열을 리턴하는 메소드
인자 - callback
callback의 인자로는

1. currentValue - 현재 순회하는 원소 값
2. index - 순회하는 원소의 index
3. array - 순회되는 배열

const arr = [1,2,3]
arr.map( el => el * 2 ) // [2,4,6]
arr // [1,2,3] 원본이 바뀌지 않음

 

filter() (ES6)

배열의 원소 중 제공된 함수를 통과하는 원소를 반환하는 메소드
인자 - callback

const arr = [1,2,3,4,5]
arr.filter( el => el < 3 ) // [1,2]
arr // [1,2,3,4,5] 원본이 바뀌지 않음

 

forEach() (ES6)

배열 원소마다 제공한 함수를 실행하는 메소드
인자 - callback
callback의 인자로는

1. currentValue - 현재 순회하는 원소 값
2. index - 순회하는 원소의 index
3. array - 순회되는 배열

const arr = [1,2,3]
arr.forEach( el => console.log(el) )
// 1
// 2
// 3
arr // [1,2,3] 원본이 바뀌지 않음

 

includes() (ES6)

배열에 특정 원소가 포함돼 있는지 여부를 확인해 true, false로 리턴
인자 - searchElement, fronIndex ( optional )

const arr = [1,2,3,4]
arr.includes(3) // true
arr.includes(1,1) // false
arr // [1,2,3,4] 원본이 바뀌지 않음

 

indexOf(), lastIndexOf()

배열에 특정 원소가 포함돼 있는지 여부를 확인해 있으면 해당 인덱스 만약 없다면 -1을 리턴
lastIndexOf는 반대 순서로 탐색
인자 - searchElement, fronIndex ( optional )

const arr = [1,2,3,4]
arr.indexOf(3) // 2
arr.indexOf(5) // -1
arr // [1,2,3,4] 원본이 바뀌지 않음

 

join()

모든 원소를 연결해 하나의 문자열로 만드는 메소드
인자 - separator

const arr = [1,2,3,4]
arr.join() // "1,2,3,4"
arr.join("..") // "1..2..3..4"
arr // [1,2,3,4] 원본이 바뀌지 않음

 

push(), pop() / unshift(), shift()

배열의 맨 뒤에 새로운 원소를 추가하는 메소드 push
인자 - item1, item2, ...
배열의 맨 뒤 원소를 지우는 메소드 pop
인자 - X
배열의 맨 앞에 새로운 원소를 추가하는 메소드 unshift
인자 - item1, item2, ...
배열의 맨 dkv 원소를 지우는 메소드 shift
인자 - X

const arr = [1,2,3]
arr.push(5) // 4 ( 배열의 길이 리턴 )
arr // [1,2,3,5]
arr.pop() // 5 ( 삭제된 원소 리턴 )
arr // [1,2,3]
arr.unshift(2) // 4 ( 배열의 길이 리턴 )
arr // [2,1,2,3]
arr.shift() // 2 ( 삭제된 원소 리턴 )
arr // [1,2,3]

 

reduce(), reduceRight() (ES6)

배열의 원소마다 누적 계산값과 함께 함수를 적용해 하나의 값으로 리턴
reduce는 왼쪽부터, reduceRight는 오른쪽부터 수행
인자 - callback, initialValue ( optional )
callback의 인자로는

1. accumulator - 누적 계산값
2. currentValue - 현재 처리값
3. currentIndex - 현재 처리값의 index
4. array - 호출된 배열

const arr = [1,2,3,4]
arr.reduce( (a,b) => a+b ) // 10
arr.reduce( (a,b) => a+b, 10) // 20
arr // [1,2,3,4] 원본이 바뀌지 않음

단순히 값을 연산하는 용도 뿐만 아니라 여러가지 역할로 사용이 가능

 

reverse()

인자: 없음
배열의 원소 순서를 반대로 정렬해 반환

const arr = [1,2,3]
arr.reverse() // [3,2,1]
arr // [3,2,1] 원본이 바뀜

 

slice()

배열의 start부터 end까지 shallow copy하는 메소드
인자 - start ( optional ), end ( optional )

const arr = [1,2,3,4,5]
arr.slice(2) // [3,4,5]
arr.slice(1, 3) // [2,3]
arr // [1,2,3,4,5] 원본이 바뀌지 않음

 

splice()

배열의 원소를 삭제하거나 새 원소를 추가하는 메소드
인자 - start, deleteCount, item1, item2, ..
start부터 deleteCount만큼 삭제되고
뒤로오는 인자들은 삭제된 위치에 추가되는 원소들

let arr = [1,2,3]
arr.splice(2) // [2,3] ( 삭제된 배열 리턴)
arr // [1] 원본이 바뀜

arr = [1,2,3]
arr.splice(1,1) // [2]
arr // [1,3]

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

 

sort()

배열을 정렬하는데 사용된다.
인자를 넣지 않으면 기본적으로 유니코드 코드 포인트에 따라 정렬된다.
인자 - compareFuntion ( optional )

const arr = [3,20,12,1,4]
arr.sort() // [1, 12, 20, 3, 4]
arr // [1, 12, 20, 3, 4] 원본이 바뀜

위와같이 숫자를 정렬할 때 유니코드 순서로 정렬되기 때문에
오름차순이나 내림차순으로 정렬하기 위해서는 다음과 같이 한다.

const arr = [3,20,12,1,4]
arr.sort( (a,b) => a-b ) // 오름차순 [1, 3, 4, 12, 20]
arr.sort( (a,b) => b-a ) // 내림차순 [20, 12, 4, 3, 1]

 

toString()

배열의 원소를 문자열로 반환
인자 - X

const arr = [1,2,3]
arr.toString() // "1,2,3"
arr // [1,2,3] 원본이 바뀌지 않음

 

마무리

자주 쓰이는 메소드들을 쭉 써봤는데
map, reduce는 익숙하게 사용할 줄 알면 좋음

개인적으로 공부한 내용을 정리한 것이기 때문에 반말을 사용한 점 양해 부탁드립니다.
잘못된 부분이나 피드백이 있으시다면, 댓글에 남겨주시면 감사하겠습니다!