JavaScript의 배열 관련 함수를 정리해보자.
- JavaScript 에서 자주 쓰이는 배열 메소드를 정리
Array.isArray(object)
- object가 배열인지 확인
Array.isArray({ a: 1, b: 2}) /// false Array.isArray([1,2,3]) /// true
concat()
- 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환
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
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의 인자로는
const arr = [1,2,3] arr.map( el => el * 2 ) // [2,4,6] arr // [1,2,3] 원본이 바뀌지 않음
filter() (ES6)
- 배열의 원소 중 제공된 함수를 통과하는 원소를 반환하는 메소드
const arr = [1,2,3,4,5] arr.filter( el => el < 3 ) // [1,2] arr // [1,2,3,4,5] 원본이 바뀌지 않음
forEach() (ES6)
- 배열 원소마다 제공한 함수를 실행하는 메소드
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, ... - 배열의 맨 앞 원소를 지우는 메소드 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는 오른쪽부터 수행
accumulator - 누적 계산값 currentValue - 현재 처리값 currentIndex - 현재 처리값의 index 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()
- 배열의 원소를 문자열로 반환
const arr = [1,2,3] arr.toString() // "1,2,3" arr // [1,2,3] 원본이 바뀌지 않음
출처: https://takeu.tistory.com/25 [takeU]
