Array.from() and Array.of()

ES6로 들어오면서 array도 많은 업데이트가 이루어졌는데 먼저 만나볼 method는 array.of이다. of는 새로운 array를 만들어주는 기능이다.

/**
 * friends를 정의하는거와 Array.of는 동일한 동작을 한다.
 */
const friends = ["nico", "lynn", "dal", "mark"];
const friends1 = Array.of("nico", "lynn", "dal", "mark");
console.log(friends1);

modern JS객체인 document에서 얻은 array는 array-like object으로 받아올 수 있다. 하지만 array-like는 array가 아니기에 Array.from()을 사용하여 array로 변환 후 사용해야한다.

/**
 * HTML의 elements를 가져오면 array를 흉내낸 NodeList가 나온다.
 */
const buttons = document.querySelectorAll("button");
console.log(buttons);

/**
 * btns도 마찬가지로 array를 흉내낸 HTMLCollection이 나온다.
 */
const btns = document.getElementsByClassName("btn");
console.log(btns);

/**
 * NodeList와 HTMLCollection은 array를 흉내낸 `array-like object`이며 array가 아니다.
 * 그래서 이론상 array로 접근 가능한 함수들을 사용하면 에러가 발생한다.
 * 그리고 array-like를 array를 변환해주는 함수인 `Array.from()`으로 변환한다.
 * @example
 * btns.forEach((btn) => {
 *   btn.addEventListener("click", () => console.log("I ve been clicked"));
 * });
 * @description
 * 그래서 array함수를 사용하기위해 from을 사용하여 array-like를 변환 후 사용한다.
 */
Array.from(btns).forEach((btn) => {
  btn.addEventListener("click", () => console.log("I ve been clicked"));
});

Array.find() Array.findIndex() Array.fill() Array.includes()

find는 조건에 맞는 첫번째 요소를 반환한다. 그리고 findeIndex는 조건에 맞는 첫번째 요소의 array위치를 반환한다.

const friends1 = [
  "[email protected]",
  "[email protected]",
  "[email protected]",
  "[email protected]",
  "[email protected]",
];

/**
 * find는 처음 true로 트리거된 요소를 반환한다.
 */
const target1 = friends1.find((friend) => friend.includes("@gorea.com"));
console.log(target1);

/**
 * findIndex는 처음 true로 트리거된 요소의 인덱스 위치를 반환한다.
 * 아래는 @gorea.com을 찾아서 @korea.com으로 데이터를 변환하는 소스이다.
 */
const check1 = () =>
  friends1.findIndex((friend) => friend.includes("@gorea.com"));
let target2 = check1();

if (target2 !== -1) {
  console.log(target2);

  const username = friends1[target2].split("@")[0];
  const email = "korea.com";
  friends1[target2] = `${username}@${email}`;
  target2 = check1();
}

console.log(target2);

fill은 주어진 인수로 array요소를 바꾼다. 또한 시작과 끝을 지정하여 원하는 위치에 인수를 채울 수 있다. includes는 조건에 맞는 인수를 array에서 찾아 boolean을 반환한다.

/**
 * fill은 첫번째 주어진 인수로 array를 새롭개 생성하는 함수이다.
 */
const friends2 = [
  "[email protected]",
  "[email protected]",
  "[email protected]",
  "[email protected]",
  "[email protected]",
];
const check2 = () =>
  friends2.findIndex((friend) => friend.includes("@gorea.com"));
let target3 = check2();

if (target3 !== -1) {
  friends2.fill("*".repeat(5), target3);
}

friends2.fill("*".repeat(5), 1, 3);

console.log(friends2);

/**
 * includes는 전달된 인자가 array에 있으면 true, 없으면 false를 반환한다.
 * 주로 array에 해당 인자가 있는지 확인할 때 쓰인다.
 */
console.log(friends2.includes("[email protected]"));