Array method

1. Array.of( )

: argument의 수나 유형에 관계없이, variable arguement를 갖는 새로운 array를 만든다.( = 어떤걸 array로 만들고 싶을 때 사용.)

ex)
const friends = [“nico”, “lynn”, “dal”, “mark”];
/* 위,아래 코드는 동일한 코드. */
const friends = Array.of(“nico”, “lynn”, “dal”, “mark”);

출력값 = [“nico”, “lynn”, “dal”, “mark”]

2. Array.from( ) !!꼭 알아두기!!

: array-like object(유사 배열 객체)나 literable object(반복 가능한 객체)를 복사해 새로운 array를 만든다.
1. array가 아닌 것의 예시 코드.( = array-like object)

ex) html에 10개의 button 생성.
const buttons = document.querySelector("button");
buttons.forEach(button => {
  button.addEventListener("click", () => console.log("I ve been clicked"));
});
console.log(buttons);
/* 이때, 출력값은 array-like object이다.(=array 아님) */
/* array가 아닌 이유, forEach()를 사용할 수 없음. */

• 위 코드 출력 사진.
  

2. 1번의 array-like object를 array로 만드는 예시.

ex) html에 10개의 button 생성.
const buttons = document.querySelector("button");
Array.from(buttons).forEach(button => {
  button.addEventListener("click", () => console.log("I ve been clicked"));
});
console.log(buttons);

• 위 코드에 변수 활용한 예시.

ex) html에 10개의 button 생성.
const buttons = document.querySelector("button");
const arr = Array.from(buttons)
arr.forEach(button => {
  button.addEventListener("click", () => console.log("I ve been clicked"));
});
console.log(buttons);

3. Array.prototype.find( )

: 주어진 조건을 만족하는 첫 번째 요소의 값을 반환한다. 그런 요소가 없다면 undefined를 반환한다.

ex)
cosnt friends = [
  "nico@gmail.com",
  "lynn@naver.com",
  "dal@yahoo.com",
  "mark@hotmail.com",
  "flynn@korea.com"
];
const target = friends.find(friend => friend.includes("@korea.com"));
/* friends.find(function)의 function이 true를 return하면, 찾은 것 중 첫 번째 element를 알려준다. */
console.log(target);

4. Array.prototype.findIndex( )

: 주어진 조건을 만족하는 array의 첫 번째 요소에 대한 index를 반환한다.
만족하는 요소가 없으면, -1을 반환한다.
( element가 어디있는지 알아내어 수정하고 싶을 때 유용하다.)
1. 기본 예시.

ex)
cosnt friends = [
  "nico@gmail.com",
  "lynn@naver.com",
  "dal@yahoo.com",
  "mark@hotmail.com",
  "flynn@korea.com"
];
const target = friends.findIndex(friend => friend.includes("@korea.com"));
console.log(target);

2. element를 수정할 때, 예시.

ex) flynn@gorea.com -> flynn@korea.com으로 수정.
cosnt friends = [
  "nico@gmail.com",
  "lynn@naver.com",
  "dal@yahoo.com",
  "mark@hotmail.com",
  "flynn@gorea.com"
];
const target = friends.findIndex(friend => friend.includes("@gorea.com"));
const username = friends[target].split("@")[0];
const email = "korea.com";
friends[target] = `${username}@${email}`;
console.log(target);

3. 2번 코드 수정한 것 확인하기.

ex) flynn@gorea.com -> flynn@korea.com으로 수정.
cosnt friends = [
  "nico@gmail.com",
  "lynn@naver.com",
  "dal@yahoo.com",
  "mark@hotmail.com",
  "flynn@gorea.com"
];
const check = () => friends.findIndex(friend => friend.includes("@gorea.com"));
let target = check();
console.log(target);
/* 수정 전, index 확인. 출력값 4(true) */
const username = friends[target].split("@")[0];
const email = "korea.com";
friends[target] = `${username}@${email}`;
target = check();
/* 이미 위에서 let target을 선언했으므로, target만 적어준다. */
console.log(target);
/* 수정 후, index 확인. 출력값 -1(false) */

4. 3번 예시 코드의 또다른 작성법.

ex) flynn@gorea.com -> flynn@korea.com으로 수정.
cosnt friends = [
  "nico@gmail.com",
  "lynn@naver.com",
  "dal@yahoo.com",
  "mark@hotmail.com",
  "flynn@gorea.com"
];
const check = () => friends.findIndex(friend => friend.includes("@gorea.com"));
let target = check();
if (target !== -1) {
  console.log(target);
  /* 수정 전, index 확인. 출력값 4(true) */
  const username = friends[target].split("@")[0];
  const email = "korea.com";
  friends[target] = `${username}@${email}`;
  target = check();
  /* 이미 위에서 let target을 선언했으므로, target만 적어준다. */
};
console.log(target);
/* 수정 후, index 확인. 출력값 -1(false) */

5. Array.prtotype.fill( )

: array의 모든 요소를 start idex(defalut 0)부터 end index(default array.length)까지 static value(정적값)으로 바꾼다. 그리고 수정된 array를 반환한다. ( = array를 start index 부터 end index 까지 static value로 채우는 것)

• 구문 : Array.fill("static value".repeat( ), start index, end index);
  ( + repeat( ) 없어도 됨.)

1. 마지막 email을 "*"로 채우기.

ex)
cosnt friends = [
  "nico@gmail.com",
  "lynn@naver.com",
  "dal@yahoo.com",
  "mark@hotmail.com",
  "flynn@korea.com"
];
const check = () => friends.findIndex(friend => friend.includes("@korea.com"));
let target = check();
if (target !== -1) {
  friends.fill("*".repeat(5), target);
};
console.log(target);

• 위 예시 코드 출력 사진.
  

2. index 1 부터 index 3까지 "*"로 채우기.

ex)
cosnt friends = [
  "nico@gmail.com",
  "lynn@naver.com",
  "dal@yahoo.com",
  "mark@hotmail.com",
  "flynn@korea.com"
];
const check = () => friends.findIndex(friend => friend.includes("@korea.com"));
let target = check();
if (target !== -1) {
  friends.fill("*".repeat(5), 1, 3);
};
console.log(target);

• 위 예시 코드 출력 사진.