Javascript Array 함수 정리

length

배열의 길이 구하는 함수

const arr = [1,2,3,4]
arr.length
// 4

concat()

두 개 이상의 배열을 병합하는 데 사용

기존 배열을 변경하지 않고, 새 배열을 반환합니다.

const arr1 = [1,2,3,4]
const arr2 = [5,6,7,8]

arr1.concat(arr2)
// [1,2,3,4,5,6,7,8]

💡 또 다른 배열 병합 방법

• spread operator

spread operator : 개별 요소로 분리

const arr1 = [1,2,3,4]
const arr2 = [5,6,7,8]

[...arr1, ...arr2]
// [1,2,3,4,5,6,7,8]

// spread 하지 않는다면
[arr1,arr2]
// [[1,2,3,4],[5,6,7,8]]

• push()

배열 끝에 여러 값을 추가

const arr1 = [1,2,3,4]
const arr2 = [5,6,7,8]

arr1.push(...arr2) // arr1 배열이 변해버림

console.log(arr1)
// [1,2,3,4,5,6,7,8]

every()

배열의 모든 요소가 제공된 함수로 구현된 테스트를 통과하는지 테스트

이 메서드는 불리언 값을 반환합니다.

const arr1 = [1,2,3,4]
const arr2 = [2,4,6,8]

// 배열의 모든 요소가 짝수인지 확인

arr1.every(val => val%2==0)
// false

arr2.every(val => val%2==0)
// true

filter()

주어진 배열의 일부에 대한 얕은 복사본을 생성, 주어진 배열에서 제공된 함수에 의해 구현된 테스트를 통과한 요소로만 필터링

const arr = [1,2,3,4]

// 짝수만 남도록 필터링

arr.filter(val => val % 2 ==0)
// [2,4]

find()

제공된 배열에서 제공된 테스트 함수를 만족하는 첫 번째 요소를 반환

테스트 함수를 만족하는 값이 없으면 undefined 반환

const arr = [1,2,3,4]

arr.find(val => val % 2 == 0)
// 2

findIndex()

주어진 판별 함수를 만족하는 배열의 첫 번째 요소에 대한 인덱스를 반환

만족하는 요소가 없으면 -1을 반환

const arr = [1,2,3,4]

arr.findIndex(val => val % 2 == 0)
// 1 

findLast()

배열을 역순으로 순회하며 제공된 테스트 함수를 만족하는 첫 번째 요소의 값 을 반환

테스트 함수를 만족하는 요소가 없으면 undefined가 반환됩니다.

const arr = [1,2,3,4]

arr.findLast(val => val % 2 == 0)
// 4

findLastIndex()

배열을 역순으로 순회하며 주어진 판별 함수를 만족하는 만족하는 배열의 첫번째 요소의 인덱스를 반환

만족하는 요소가 없으면 -1을 반환합니다.

const arr = [1,2,3,4]

arr.findLastIndex(val => val % 2 == 0)
//3

forEach()

각 배열 요소에 대해 제공된 함수를 한 번씩 실행

원본 배열을 변경하지 않고, 반환값은 언제나 undefined 이다.

const arr = [1,2,3,4]
arr.forEach(val => console.log(val))
// 1
// 2
// 3
// 4

const powers = []
arr.forEach(val => powers.push(val**2))
console.log(powers)
// [1,4,9,16]

includes()

배열의 항목에 특정 값이 포함되어 있는지를 판단하여 적절히 true 또는 false를 반환

const arr = [1,2,3,4]
arr.includes(3)
// true

const animals = ['cat','dog','tiger','giraffe']
animals.includes('cat')
// true

animals.includes('ca')
//false

indexOf()

배열에서 주어진 요소를 찾을 수 있는 첫 번째 인덱스를 반환하고, 찾을 수 없는 경우 -1을 반환

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

join()

배열의 모든 요소를 연결해 하나의 문자열로 만들어준다.

const arr = [1,2,3,4]
arr.join()
// '1,2,3,4'

arr.join(' ')
// '1 2 3 4'

map()

배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환

const arr = [1,2,3,4]

arr.map(val => val*2)
// [2,4,6,8]

pop()

배열에서 마지막 요소를 제거하고 그 요소를 반환

const arr = [1,2,3,4]

arr.pop()
// 4

push()

배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환합니다.

const arr = [1,2,3,4]

arr.push(10)
// 5

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

reduce()

배열의 각 요소에 대해 주어진 리듀서 (reducer) 함수를 실행하고, 하나의 결과값을 반환합니다.

arr.reduce(callback[, initialValue])

리듀서 함수는 네 개의 인자를 가집니다.

• callback : 배열의 각 요소에 대해 실행할 함수. 다음 네 가지 인수를 가짐
  • accumulator : 누산기. 콜백의 반환값을 누적. 콜백의 이전 반환값 또는, 콜백의 첫 번째 호출이면서 initialValue를 제공한 경우에는 initialValue의 값임
  • currentValue : 처리할 현재 요소
  • currentIndex (Optional) : 처리할 현재 요소의 인덱스. initialValue를 제공한 경우 0, 아니면 1부터 시작
  • array (Optional) : reduce()를 호출한 배열
• initialValue (Optional) : callback의 최초 호출에서 첫 번째 인수에 제공하는 값. 초기값을 제공하지 않으면 배열의 첫 번째 요소를 사용. 빈 배열에서 초기값 없이 reduce()를 호출하면 오류 발생

const arr = [4, 3, 2, 1];
let sum = arr.reduce((acc, cur) => acc + cur)
// 10

acc 에는 가장 첫 번째 원소인 '4'를 할당하고 (index 0)

cur 에는 나머지 원소인 '3, 2, 1'이 순차적으로 들어간다. (index 1, 2 ...)

acc += cur; // 4 += 3;
acc += cur; // 7 += 2;
acc += cur; // 9 += 1;
console.log(acc); // 10

const arr2 = [1, 2, 3, 4, 5];
const sum2 = arr2.reduce((acc, cur, idx) => { return acc += cur; }, 10);
// 25 ( 10 + 1 + 2 + 3 + 4 + 5 ) 

shift()

배열에서 첫 번째 요소를 제거하고, 제거된 요소를 반환

배열의 길이를 변하게 합니다.

const arr = [1,2,3,4]

arr.shift() // 제거된 첫번째 요소 반환
// 1

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

slice()

begin 부터 end 까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환

원본 배열은 바뀌지 않습니다.

end가 생략되면 slice()는 배열의 끝까지(arr.length) 추출합니다.

begin index나 end index가 음수이면 배열의 끝에서부터 길이를 나타낸다.

const arr = [1,2,3,4]

arr.slice(1) // 1 부터 마지막까지
// [2,3,4]

arr.slice(1,2) // 1부터 2까지 ( 2는 미포함 )
// [2]

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

arr.slice(1,-1) // 1부터 끝에서 두번째 요소까지
// [2,3]

const arr = [1,2,3,4,5,6,7,8,9,10]

arr.slice(3,7) 
// [4, 5, 6, 7]

arr.slice(6)
// [7, 8, 9, 10]

arr.slice(-3,-1)
// [8, 9]

some()

배열 안의 어떤 요소라도 주어진 판별 함수를 적어도 하나라도 통과하는지 테스트

만약 배열에서 주어진 함수가 true을 반환하면 true를 반환합니다. 그렇지 않으면 false를 반환합니다. 이 메서드는 배열을 변경하지 않습니다.

const arr = [1,2,3,4]

arr.some(val => val % 2 == 0)
// true

sort()

배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환

정렬은 stable 정렬이 아닐 수 있다. 기본 정렬 순서는 문자열의 유니코드 코드 포인트를 따릅니다.

const arr = [30,100,2,5,1000]

arr.sort()
// [100, 1000, 2, 30, 5]
// 원하는 결과가 나오지 않는다.

arr.sort((a,b)=> a-b)
// [2, 5, 30, 100, 1000]

javascript 숫자 정렬

a, b중에 더 큰 값을 식별하기 위한 함수

a-b 하는 이유는

음수가 리턴되면 a < b 를 의미하고

양수가 리턴되면 a > b 를 의미하고

0이 리턴되면 a==b를 의미한다.

두 값을 비교하는 기준을 정의하여 sort()의 매개변수로 넘겨준다.

=> a-b 음수를 반환하면 a 가 b 앞에 온다. 양수면 반대

arr.sort((a,b)=> a-b)

splice()

배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경

두번째 인자로 slice() 함수는 종료 인덱스, splice() 함수는 몇개의 값을 떼어낼지를 넘긴다는 것

const arr = [1,2,3,4,5,6,7,8,9]

const newArr = arr.splice(3)
// newArr
// [4,5,6,7,8,9]
// arr
// [1,2,3]

const arr = [1,2,3,4,5,6,7,8,9]
const newArr = arr.splice(2,5)
// newArr
// [3, 4, 5, 6, 7]
// arr
// [1, 2, 8, 9]
const arr = [1,2,3,4,5,6,7,8,9]
const newArr = arr.splice(4,1,100)
arr.splice(-4,-2)