Chapter 08: 배열 메서드 (Array improvements)

💡 도서 모던 자바스크립트 핵심 가이드를 읽고 정리합니다.

8.1 Array.from()

---

배열처럼 보이지만 배열이 아닌 개체를 받아 실제 배열로 변환해 반환한다.

<div class="fruits">
  <p> Apple </p>
  <p> Banana </p>
  <p> Orange </p>
</div>

const fruits = document.querySelectorAll(".fruits p");
const fruitArray = Array.from(fruits);

console.log(fruitArray);
// [p,p,p]

const fruitNames = fruitArray.map( fruit => fruit.textContent);

console.log(fruitNames);
// ["Apple", "Banana", "Orange"]

아래와 같이 단순화할 수도 있다.

const fruits = Array.from(document.querySelectorAll(".fruits p"));
const fruitNames = fruits.map(fruit => fruit.textContent);

console.log(fruitNames);
// ["Apple", "Banana", "Orange"]

두 번째 인수를 이용해 배열에 map 함수를 적용한 것과 동일한 기능의 코드를 작성할 수도 있다.

const fruits = document.querySelectorAll(".fruits p");
const fruitArray = Array.from(fruits, fruit => {
  console.log(fruit);
  // <p> Apple </p>
  // <p> Banana </p>
  // <p> Orange </p>
  return fruit.textContent;
  // we only want to grab the content not the whole tag
});
console.log(fruitArray);
// ["Apple", "Banana", "Orange"]

8.2 Array.of()

---

전달받은 모든 인수로 배열을 생성한다.

const digits = Array.of(1,2,3,4,5);
console.log(digits);

// Array [ 1, 2, 3, 4, 5];

8.3 Array.find()

---

제공된 테스트 함수를 충족하는 배열의 첫 번째 원소를 반환한다. 충족하는 원소가 없을 경우, undefined를 반환한다.

const array = [1,2,3,4,5];

// this will return the first element in the array with a value higher than 3
let found = array.find( e => e > 3 );
console.log(found);
// 4

8.4 Array.findIndex()

---

조건과 일치하는 첫 번째 원소의 인덱스를 반환한다.

const greetings = ["hello","hi","byebye","goodbye","hi"];

let foundIndex = greetings.findIndex(e => e === "hi");
console.log(foundIndex);
// 1

8.5 Array.some()과 Array.every()

---

• .some() 은 조건과 일치하는 원소가 있는지 검색하고 첫 번째 일치하는 원소를 찾으면 바로 중지한다.
• .every() 는 모든 원소가 주어진 조건과 일치하는지 여부를 확인한다.

const array = [1,2,3,4,5,6,1,2,3,1];

let arraySome = array.some( e => e > 2);
console.log(arraySome);
// true

let arrayEvery = array.every(e => e > 2);
console.log(arrayEvery);
// false