JavaScript - Array 메서드 정리

(계속 추가 중)

자바스크립트에는 무수히 많은 메서드가 있습니다.

그 중에 Array에 대해 알아봅시다.

편의상 세미콜론(;)은 붙이지 않겠습니다.

 

 

MDN문서 페이지의 좌측에서 모든 메서드를 볼 수 있습니다.

deprecated (엄지손가락이 아래로 향하고 있는 모양) = 머지 않아 사라지는 기능이므로 가급적 사용하지 않는 것이 좋습니다.

 

1) Array.length

배열의 길이를 반환합니다.

const a = [1, 2, 3]
console.log(a.length) // 3

 

2) Array.isArray(배열)

배열인지 아닌지를 판별하고 배열이면 True, 배열이 아니면 False를 반환합니다.

const a = [1]
const b = 1

console.log(Array.isArray(a)) // true
console.log(Array.isArray(b)) // false

 

3) Array.concat(값)

기존 배열에 원소를 더하고 기존 배열은 유지한 채, 더해진 새 배열을 반환합니다.

const a = [1, 2]
const b = a.concat(3)

console.log(a, a.concat(3), b) // [1,2] [1, 2, 3] [1, 2, 3]

 

4) Array.every((value, index, array) => 함수)

every 메서드는 빈 배열에서 호출하면 무조건 true를 반환하니 주의하세요

주어진 함수에 대해 모든 원소가 만족하면 true, 하나라도 다르면 false를 반환합니다.

 

const a = [1, 2]
const b = ['a', 'b']
const elementIsFinite= (element) => isfinite(element)

console.log(a.every(elementIsFinite)) // true
console.log(b.every(elementIsFinite)) // false

 

5) Array.fill(값, 시작 인덱스, 종료 인덱스)

배열을 시작 인덱스부터 종료 인덱스까지 정적인 값 하나로 채워줍니다. (바꿔준다는 말도 맞겠네요)

 

const a = [1, 2, 3, 4, 5]

a.fill(0, 1, 4)

console.log(a) // [1, 0, 0, 0, 0]

 

6) Array.filter((value, index, array) =>함수)

concat과 마찬가지로 기존 배열은 유지한 채 해당 함수에 만족하는 원소들만 따로 모아서 새 배열을 반환합니다.

 

const a = [1, 2, 3]
const b = a.filter(k => k > 1)

console.log(a, a.filter(k => k > 1), b) // [1, 2, 3] [2, 3] [2, 3]

 

7) Array.find((value, index, obj) => 함수)

배열에서 함수에 만족하는 원소를 찾아서 반환합니다.

const a = [1, 2, 3, 4, 'a']
const b = a.find(k => k === 3)
const c = a.find(k => k > 1)

console.log(b) // 3
console.log(c) // 2 (만족하는 첫 번째 원소만 반환합니다)

 

8) Array.findIndex((value, index, obj) => 함수)

배열에서 함수에 만족하는 원소의 index를 반환합니다. (함수에 만족하는 첫 번째 원소의 인덱스를 반환)

const array = [1, 11, 23]
const b = array.findIndex(k => k > 10)

console.log(b) // 11

 

9) Array.flat(숫자: 탐색할 깊이)

지정한 숫자(탐색할 깊이)만큼 배열을 평탄화합니다.

쉽게 얘기해서 3차원 배열도 1차원 배열로 만들 수 있다는 말입니다.

 

const a = [1, 2, 3, 4, [1, 2, 3,[4, 5]]]
const b = a.flat(3)

console.log(b) // [1, 2, 3, 4, 1, 2, 3, 4, 5]

 

10) Array.forEach((value, index, array) => 함수)

배열의 모든 원소에 함수 내용을 적용합니다.

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

a.forEach((v, i) => {
  if (v === 3 || i === 3) {
    console.log(v, i) // 3 2 and 4 3
  }
})

 

11) Array.includes(값, 시작 인덱스[생략가능])

입력한 값이 배열에 있는지 없는지 판별하고 있으면 true, 없으면 false를 반환합니다.

시작인덱스를 생략하면 배열 전체를 탐색하고 시작인데스가 있으면 그 인덱스부터 탐색합니다.

const a = ['h', 'e', 'l', 'l', 'o']

console.log(a.includes('o')) // true
console.log(a.includes('K')) // false

 

12) Array.indexOf(값, 시작 인덱스[생략가능])

배열에서 입력한 값으로 탐색하고 그 값의 index를 반환합니다.

찾지 못했으면 -1을 반환합니다.

includes와 마찬가지로 시작 인덱스를 생략하면 전체 배열을 탐색합니다.

const a = ['h', 'e', 'l', 'l', 'o']

console.log(a.indexOf('K')) // -1
console.log(a.indexOf('h')) // 0

 

13) Array.join(구분할 문자열)

주어진 문자열로 배열의 모든 문자열을 합쳐서 문자열로 반환합니다.

const a = ['h', 'e', 'l', 'l', 'o']
const b = a.join('')

console.log(b) // hello

 

14) Array.keys()

배열의 인덱스를 값으로 하는 새로운 배열을 반환합니다.

 

const a = ['h', 'e', 'l', 'l', 'o']
const b = a.keys()

for (let i of b) {
  console.log(i) // 0 1 2 3 4
}

 

15) Array.lastIndexOf()

Array.indexOf를 반대방향(오른쪽에서 왼쪽)으로 탐색하는 동일한 메서드라고 생각하면 됩니다.

const a = ['h', 'e', 'l', 'l', 'o']

console.log(a.lastIndexOf('h')) // 4

 

 

updating...