[ES6 정리] 5. Array

1. Array.of

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/of

// 기존
const friends = ["jay", "walker", "sonny", "taylor"];

// ES6
const friends2 = Array.of("jay", "walker", "sonny", "taylor");

기존에 변수에 배열선언을 했을 때, 첫번째와 같은 방법으로 배열 선언을 했었다. ES6엔 Array.of가 생겼는데, Array.of의 장점은 Element 수가 많을 때 사용하면 편리하다

 

 

2. Array.from

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/from

const buttons = document.getElementsByClassName("btn");

buttons.forEach(button =>{
  button.addEventListener("click", () => console.log("clicked"))
});


const buttons = document.getElementsByClassName("btn");

Array.from(buttons).forEach(button =>{
  button.addEventListener("click", () => console.log("clicked"))
});

Array.from은 배열과 같아 보이는것(유사배열)을 진짜 배열로 만들어준다.
첫번째 코드에서는 btn 클래스에서 불러온 버튼 전체를 배열에 담아 클릭 할때마다 "clicked" 라는 로그가 나타나게 하려고하지만, 그것들은 배열이 아닌 array-like object 라는것이다. 그래서 forEach 함수도 적용되지 않는다.

이런 경우에는 array.from 을 사용하면 그것들을 배열로 바꿔주기 때문에 해당 함수를 사용한 뒤 호출하면 "clicked" 메세지가 나타난다

 

 

3. Array.find

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/find

const eFriends = [
  "charles@naver.com",
  "smith@hanmail.net",
  "brown@gmail.com",
  "neighbor@naver.com",
  "black@yahoo.com"
]

const target = eFriends.find(friend => friend.includes("@naver.com"));

Array.find는 이름 그대로 내가 원하는 문자나 위치 같은것이 조건에 일치하는지 반환해주는 함수이다

위와 같은 경우에는 "@naver.com"을 포함하는것을 찾았기 때문에 charles@naver.com 이 반환된다

 

 

4. Array.findIndex

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex

const eFriends = [
  "charles@naver.com",
  "smith@hanmail.net",
  "brown@gmail.com",
  "neighbor@naver.com",
  "black@yahoo.com"
]

const index = eFriends.findIndex(friend => friend.includes("yahoo"));

 Array.findIndex는 해당하는것의 위치를 반환한다. 위의 상황에서는 yahoo는 포함하는 것은 어디인가를 물어보았으니 4라는 결과값이 반환된다

 

 

5. Array.fill

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/fill

const eFriends = [
  "charles@naver.com",
  "smith@hanmail.net",
  "brown@gmail.com",
  "neighbor@naver.com",
  "black@yahoo.com"
]

eFriends.fill("*".repeat("4"), 1, 3);

Array.fill은 설정한 배열 위치 값을 자신이 설정한 것으로 채워준다. 위의 상황에서는 * 모양을 4번 1번부터 3번미만까지의 위치에 채워라 라는 명령을 해서 1,2번이 4개의 *로 채워졌다