JavaScript 배열 메소드 ( Array method )

표정민·2020년 6월 29일

🥠 Array.isArray()

인자에 들어가는 객체가 배열인지 확인할 때 사용
인자 - 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()

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

rrentValue - 현재 순회하는 원소 값
index - 순회하는 원소의 index
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()

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

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

🥠 filter()

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

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

🥠 find()

배열의 원소 중 제공된 함수를 통과하는 첫번째 원소를 반환하는 메소드
첫 번째 원소를 반환하면 해당 함수는 더 이상 loop를 반복하지 않는다
인자 - callback

const arr = [4, 15, 377, 395, 400, 1024, 3000];
arr.find( el => el % 5 == 0 ) // 15
arr // [1,2,3,4,5] 원본이 바뀌지 않음

🥠 forEach()

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

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

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

🥠 includes()

배열에 특정 원소가 포함돼 있는지 여부를 확인해 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] 원본이 바뀌지 않음

🥠 map()

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

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

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

🥠 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()

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

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()

배열을 정렬하는데 사용된다.
인자를 넣지 않으면 기본적으로 ASCII 문자 순서로 정렬된다.
인자 - compareFuntion ( optional )

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

🥠 toString

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

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

출처

https://takeuu.tistory.com/102

🥠 Object를 배열로 변환

🥠 Object.keys

object key 값을 배열로 반환
인자 - object

const arr = {
	pyo: "first name",
	jung: "middle name",
	min: "last name"
}
Object.keys(arr); // ["pyo", "jung", "min"]
arr // { pyo: "first name", jung: "middle name", min: "last name" } 원본이 바뀌지 않음

🥠 Object.entries

object key, value 값을 묶어서 배열로 반환
인자 - object

const arr = {
	pyo: "first name",
	jung: "middle name",
	min: "last name"
}
Object.entries(arr); // [["pyo", "first name"], ["jung", "middle name"], ["min", "last name"]]
arr // { pyo: "first name", jung: "middle name", min: "last name" } 원본이 바뀌지 않음