[ES6] Array Method

Array Method

array method 역시도 ES6 에서 많이 업데이트 되었습니다.

이들에 대해서 알아보도록 하겠습니다.

Array.of

Array.of() 는 인자의 수나 유형에 관계없이 가변 인자를 갖는 새 Array 인스턴스를 만듭니다.

const fruit = Array.of("apple","banana","strawberry");

console.log(fruit);
// [ 'apple', 'banana', 'strawberry' ]

 

Array.from

Array.from() 은 유사 배열 객체(array-like object)나 반복 가능한 객체(iterable object)를 얕게 복사해새로운 Array 객체를 만듭니다.

글로만 봐서는 어려울 수 있으니 예제를 통해 살펴보도록 합시다.

우선 10개의 button 을 만들고 각 button에 대해 이벤트리스너를 붙이고자 합니다.

body>
    <button class="btn">1</button>
    <button class="btn">2</button>
    <button class="btn">3</button>
    <button class="btn">4</button>
    <button class="btn">5</button>
    <button class="btn">6</button>
    <button class="btn">7</button>
    <button class="btn">8</button>
    <button class="btn">9</button>
    <button class="btn">10</button>
</body>

 

이제 버튼을 가져오기 오기 위해서 아래 두 가지 방법으로 접근해보았습니다.

const buttonsByTag = document.querySelectorAll("button");
const buttonsByClass = document.getElementsByClassName("btn");

console.log(buttonsByTag);   // NodeList(10)
console.log(buttonsByClass); // HTMLCollection(10)

두 가지 방법 모두 결과값이 Array 가 아닙니다. NodeList 와 HTMLCollection 으로서 이들을 위해서 언급했던 유사 배열 객체(array-like object) 입니다.

 

이들에게 이벤트리스너를 부여하기 위해서 다음과 같이 하면 오류가 발생합니다.

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

// uncaught TypeError: buttonsByClass.forEach is not a function

buttonByClass 는 Array 가 아니기 때문에 forEach 함수가 존재하지 않는 것이죠.

 

따라서 Array.from 을 통해 Array 로 만들어주도록 합니다.

그 결과 문제 없이 작동합니다.

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

buttonsByTag, 즉 NodeList 에 대해서는 Array.from 없이 정상적으로 동작합니다.

 

Array.find

Array.find() 는 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환합니다.

const nameList = [
    "minsung_kang",
    "sungbin_lee",
    "junseok_kim",
    "sungjun_lee"
]

const foundName = nameList.find(item => item.includes("_lee"));

console.log(foundName); // sungbin_lee

 

Array.findIndex

Array.index() 는 메서드는 주어진 판별 함수를 만족하는 배열의 첫 번째 요소에 대한 인덱스를 반환합니다. 만족하는 요소가 없으면 -1을 반환합니다.

Array.find() 을 통해서는 찾아도 그 위치를 모르니 수정을 할 수 가 없습니다.

따서 값을 찾은 후에 수정해야할 경우가 있을 때 유용하게 사용됩니다.

const nameList = [
    "minsung_kang",
    "sungbin_lee",
    "junseok_kim",
    "sungjun_lee"
]

const foundNameIndex = nameList.findIndex(item => item.includes("_lee"));

console.log(foundNameIndex); // 1

 

Array.fill

Array.fill() 메서드는 배열의 시작 인덱스부터 끝 인덱스의 이전까지 정적인 값 하나로 채웁니다.

매개변수는 다음과 같습니다.

• value

  • 배열을 채울 값.

• start

  • Optional
  • 시작 인덱스, 기본 값은 0.

• end

  • Optional
  • 끝 인덱스, 기본 값은 this.length

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


console.log(array.fill(0, 2, 4));
// [ 1, 2, 0, 0, 5 ]