JS 배열 함수 정리

  배열에 대한 가공을 할 때 사실 for문과 if문이면 모든 것을 할 수 있다. 그럼에도 JS에서는 많은 배열함수가 존재한다. 이 배열함수들은 심지어 for문보다 퍼포먼스가 약간 떨어진다고 알고 있는데, 그렇다면 왜 배열함수들은 이렇게나 많고 사람들은 for문보다 배열함수를 더 자주 쓸까?

  그 이유는 사람끼리 소통할 때 더 원활히 하기 위함이다. for문을 코드에 잔뜩 써놓게되면 읽는 사람들은 그 코드가 무엇인지 해석하기 위해 힘을 들여야한다. 하지만 배열 함수를 쓰면 이 함수가 어떤 목적으로 쓰이는 것인지 좀 더 수월하게 알 수 있고 그 의미에 따라 함수를 작성하기에 코드의 길이도 줄일 수 있는 것이다.

배열함수가 코드의 의미를 분명히 하기 위해 쓰인다하면, 이미 배열함수를 자주 쓰고 익숙하지만 한 번 더 그 의미를 좀 더 명확히 짚어가고싶다는 생각에 이 글을 작성해본다.

 

---

 

pop

배열의 뒷부분의 값을 삭제한다

let arr = [1,2,3,4]
arr.pop()
console.log(arr) // [1,2,3]

 

push

배열의 뒷부분에 값을 삽입한다

let arr = [1,2,3,4]
arr.push(5)
console.log(arr) // [1,2,3,4,5]

 

unshift

배열의 앞부분에 값을 삽입한다

let arr = [1,2,3,4]
arr.unshift(0)
console.log(arr) // [0,1,2,3,4]

 

shift

배열의 앞부분의 값을 삭제한다.

let arr = [1,2,3,4]
arr.shift()
console.log(arr) // [2,3,4]

 

splice

배열의 특정 위치에 값을 추가하거나 삭제한다.

splice(index, 제거할 값 개수, 추가할 값)

let arr = [1,2,3,4]
arr.splice(0,2,5)
console.log(arr) // [5,3,4]

 

slice

인자로 넣은 시작인덱스부터 종료인덱스까지의 배열 값들을 새로운 배열로써 만들어낸다.

단, 첫 번째 인자인 시작인덱스는 포함하지만 두 번째 인자인 종료 인덱스는 포함되지 않는다.

slice(시작인덱스, 종료인덱스)

let arr = [1,2,3,4]
let newArr = arr.slice(0,2)
console.log(arr) // [1,2,3,4]
console.log(newArr) // [1,2]

 

concat

두 개의 배열을 합친 후 합쳐진 값으로 새로운 배열을 만들어낸다.

let arr1 = [1,2,3]
let arr2 = [4,5,6]
let newArr = arr1.concat(arr2)
console.log(newArr) // [1,2,3,4,5,6]

 

every

배열의 모든 요소가 주어진 조건에 충족하는지 확인하고 전부 충족되었다면 true, 하나라도 아니라면 false를 내뱉는다.

let arr = [1,2,3,4,5,6]
let isAllNumber = arr.every((val)=> isFinite(val))
console.log(isAllNumber) // true

let arr = [1,2,3,4,5,'A']
let isAllNumber = arr.every((val)=> isFinite(val))
console.log(isAllNumber) // false

 

some

배열의 요소들을 주어진 조건에 충족하는지 확인하다 하나라도 충족한다면 true를 내뱉고 종료한다. 전부 불충족한다면 false를 내뱉는다.

let arr = [1,2,3,4,5,6]
let haveNumber2 = arr.some((val)=> val === 2))
console.log(haveNumber2) // true

 

forEach

배열의 요소를 오름차순 인덱스 순서로 한 번 씩 호출하여 모든 요소를 순회한다. return값은 없고 break나 continue도 사용되지 않으며, promise를 사용할 수도 없다.

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

 

map

배열의 요소를 오름차순 인덱스 순서로 한 번 씩 호출하여 모든 요소를 순회하며 호출된 값들을 반환하여 새로운 배열을 만든다.

let arr = [1,2,3]
let res = arr.map((val)=> val + 1)
console.log(res) // [2,3,4]

 

filter

배열 내의 함수에서 주어진 조건에 통과한 값들로 이루어진 새로운 배열을 생성한다.

let arr = [1,2,3]
let res = arr.filter((val)=> val === 1)
console.log(res) // [1]

 

find/findIndex

배열 내의 함수에서 주어진 조건에 통과한 첫 번째 값만 반환한다. 통과하는 값이 없다면 undefined를 반환한다.

만약 값이 아닌 인덱스가 필요한 경우에는 findIndex를 사용하면 된다.

let arr = [1,2,3,4]
let res = arr.find((val)=> val > 2)
console.log(res) // 3

indexOf

배열에서 주어진 요소가 있다면 해당 요소의 인덱스를 반환한다. 없다면 -1을 반환한다.

let arr = ['A','B','C']
let res = arr.indexOf('B')
console.log(res) // 1

 

includes

배열에서 주어진 요소가 포함되어있다면 true, 없다면 false를 반환한다.

let arr = ['A','B','C']
let res = arr.includes('A')
console.log(res) // ture

 

reduce

배열의 각 값에 대해 함수를 실행하고 누적된 값을 출력할 때 사용되는 함수이다.

reduce(callback(모두 더한 값, 현재 값, 인덱스), 초기값)

let arr = [1,2,3,4]
let res = arr.reduce((acc,cur,idx) => acc = acc + cur, 0)
console.log(res)// 10

 

reverse

배열의 값 순서를 반대로 바꾼다. 새로운 배열을 생성하진 않는다.

let arr = [1,2,3]
arr.reverse()
console.log(arr) //[3,2,1]

 

sort

배열 내부의 값들을 순서대로 정렬해준다. 다만, 배열 내부의 모든 값을 먼저 문자로 만들고 나서 해당 값의 유니코드 값을 기준으로 정렬한다는 점을 주의해야한다. 

let arr = [2,3,1]
arr.sort()
console.log(arr) //[1,2,3]

 

만약 숫자를 정렬하고 싶다면 sort의 콜백 함수를 통해서 할 수 있다.

let arr = [0,-1,2,1]
arr.sort((a,b) => a-b) // [-1,0,1,2]
arr.sort((a,b) => b-a) // [2,1,0,-1]

join

배열의 모든 값들을 하나의 문자열로 합친다.

let arr = ['A','B','C']
let res = arr.join()
console.log(res) //'A,B,C'