자바스크립트 배열(Array) 메서드 정리

 

arr.push()

: 배열 맨 뒤 데이터 삽입

arr.pop()

배열 맨 뒤 데이터 제거

arr.shift()

: 배열 맨 앞 데이터 제거

arr.unshift()

: 배열 맨 앞 데이터 삽입

arr.reverse()

: 배열 역순 출력 (원본 배열 변형)

 

🔎 원본 배열을 유지하고 싶으면?

[...arr].reverse() -> 얕은 복사 해주기

arr.fill(배열에 추가할 값, 시작 인덱스, 끝 인덱스)

: 배열안에 같은값으로 채우기. 시작인덱스와 끝인덱스(끝인덱스는 포함x)를 정해서 일부 값만 바꿀 수 있음

arr.join(구분자)

: 배열의 모든 요소들을 연결해 새로운 문자열로 만들기

let x = ['hello', 'world', 'javascript']
x.join() //구분자 생략 시 (,)콤마가 붙음

// 'hello,world,javascript'

let x = ['hello', 'world', 'javascript']
x.join('-')

// 'hello-world-javascript'

 

arr.splice(시작인덱스, 갯수, 추가 문자열)

원본 배열에 새로운 요소를  추가하거나 삭제 또는 교체

let x = ['a', 'b', 'c', 'd']
x.splice(1, 2) // 인덱스 1부터 2개를 지움 (b, c)

//['a', 'd']

x.splice(0, 1, 'y', 'z') // 인덱스 0부터 1개를 지우고 그 자리에 'y', 'z'넣기

//['y', 'z', 'd']

 

arr.sort(비교함수)

: 배열 정렬. 순서 정의 생략시 오름차순 정렬 또는 ASCII문자 정렬

[10, 2, 7, 1, 8].sort()
// [1, 10, 2, 7, 8]
// 유니코드 값으로 정렬되어 원하는 값이 나오지 않음

[10, 2, 7, 1, 8].sort((a, b) => a - b)
// a - b로 크기 비교.  a < b 일 때 0보다 작은 값 return -> 오름차순
// [1, 2, 7, 8, 10] 오름차순


[10, 2, 7, 1, 8].sort((a, b) => b - a)
// [10, 8, 7, 2, 1] 내림차순

arr.forEach(콜백함수)

: 배열 순회 (for문 대신 사용 가능)

let x = [10, 20, 30, 40]
x.forEach(x => console.log(x ** 2)) // 배열을 순회하면서 제곱

// 100, 200, 300, 400

arr.map(콜백함수)

: 베열을 순회하여 값을 변경하여 새로운 배열 생성

[100, 200, 300, 400].map(x => x+10) // x에 10을 더하여 새로운 배열 생성

//[110, 210, 310, 410]

🔎 forEach() vs map()

forEach() 각 요소마다 한번씩 콜백함수 실행. 반환값은 undefined
map()은 콜백함수를 실행 후 새 배열을 반환

 

arr.filter(콜백함수)

: 주어진 조건을 만족하는 모든 요소를 모아 새 배열로 반환

[1, 2, 3, 4, 5].filter(x => x > 3) // 3보다 큰 요소들을 새 배열로 반환
//[4, 5]

 

arr.reduce((콜백함수 누적값, 현재값) ⇒ , 초기 누산값)

: 누산기. 배열의 요소를 순차적으로 순회 후 하나의 결과값 반환

let arr = [1, 2, 3, 4, 5]
let sum = arr.reduce((acc, cur) => acc + cur)

//15

let arr = [1, 2, 3, 4, 5]
let sum = arr.reduce((acc, cur) => acc + cur, 10)
// 초깃값을 10으로 설정 후 10 + 1 + 2 + 3 + 4 + 5 실행
//25

 

arr.find(콜백함수)

: 조건을 만족하는 첫번째 요소값만 반환 (조건이 일치하지 않으면 undefined)

[1, 2, 3, 4, 5].find(x => x > 3)

// 4