JavaScript 배열 메서드인데요 3

• .from()
• .fromAsync()
• .includes()
• .indexOf()
• .isArray()
• .join()
• .keys()

.from()

Set, Map 등의 이터러블한 객체나 length속성과 인덱싱된 요소를 가지고 있는 유사 배열 객체에 대해 from()메서드를 사용하면 얕은 복사를 통해 새로운 배열을 리턴한다. 문자열 등에 사용하면 다음과 같이 배열로 변환하여 리턴한다.

console.log(Array.from('hello')) // ['h', 'e', 'l', 'l', 'o']

from() 메서드는 두 번째 인자로 콜백 함수를 전달하여 각 요소에 대해 실행되고, 리턴값이 대신 배열에 추가된다.

const numbers = [1, 2, 3]
const multipliedNumbers = Array.from(numbers, (num) => num * 2)

console.log(multipliedNumbers) // [ 2, 4, 6 ]

이 동작은 map()메서드를 사용한 것과 유사하지만, map()의 경우 이미 배열인 경우에 사용하고, from()의 경우는 이터러블한 객체를 배열로 변환할 때 사용하기에 목적에서의 차이가 있다.

.fromAsync()

fromAsync() 메서드는 from() 메서드와 유사하지만, 동기적인 작업에 사용되는 from()과 달리 Promise나 비동기 함수 등 비동기 작업에 대해 사용된다는 특징이 있다. fromAsync()는 for await...of 와 유사하게 작동한다.

.includes()

includes() 메서드는 배열이 특정 요소를 포함하고 있는지를 확인하고, 포함하고 있으면 true, 그렇지 않으면 false를 리턴한다. 말그대로 배열이 내가 찾는 요소를 가졌는지를 확인하고자 할 때 사용하는 메서드이며, 확인 후 요소에 대해 특정 작업을 하기보다는 포함 여부 자체가 필요할 때 사용한다.

const fruits = ['apple', 'banana', 'orange']

console.log(fruits.includes('banana')) // true
console.log(fruits.includes('grape')) // false

.indexOf()

indexOf() 메서드는 배열에서 특정 요소를 찾고, 해당 요소의 첫 번째 인덱스를 리턴한다. includes()가 요소의 포함 여부를 확인하는 메서드라면, indexOf는 해당 요소의 첫 번째 인덱스를 알 수 있다. 만약 배열이 해당 요소를 갖지 않고 있다면 -1을 리턴한다.

const fruits = ['apple', 'banana', 'orange']

console.log(fruits.indexOf('banana')) // 1
console.log(fruits.indexOf('grape')) // -1

.isArray()

isArray() 메서드는 인자가 배열인지 여부를 판별하고, 배열이면 true를, 그렇지 않다면 false를 리턴한다.

Array.isArray([1, 2, 3]) // true
Array.isArray({ foo: 123 }) // false
Array.isArray('foobar') // false
Array.isArray(undefined) // false

.join()

join() 메서드는 배열의 모든 요소를 결합하여 하나의 문자열을 리턴한다. 알고리즘을 풀 때 split()과 함께 굉장히 많이 사용한 메서드이다. 메서드의 인자로 구분자를 전달해 배열의 각 요소를 구분하도록 할 수 있다. 전달하지 않으면 기본적으로 콤마가 사용된다.

const colors = ['one', 'two', 'three']

console.log(colors.join()) // one,two,three
console.log(colors.join('')) // onetwothree
console.log(colors.join(' ')) // one two three
console.log(colors.join('-')) // one-two-three

.keys()

keys() 메서드는 배열의 각 인덱스로 구성된 새로운 이터레이터 객체를 리턴한다. 이터레이터를 통해 배열의 인덱스를 반복하거나 특정 인덱스에 대한 작업을 수행할 때 사용된다. 여러 배열의 각 요소에 대한 작업을 수행할 때 연관된 배열의 요소에 접근하거나 특정 조건을 만족하는 인덱스 등에 활용된다.

const fruits = ['apple', 'banana', 'orange']

for (const idx of fruits.keys()) {
  console.log(idx)
}

// 0
// 1
// 2

참고 문서 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array