Array Function2

저번 글에 이어 배열과 관련된 메서드들을 좀 더 살펴보겠다.

Array.of

Array.of는 []로 배열을 생성하지 않고 ,로 연결된 문자열들을 배열 형태로 만드는 메서드이다.

Array.of() 메서드는 인자의 수나 유형에 관계없이 가변 인자를 갖는 새 Array 인스턴스를 만듭니다.
Array.of()와 Array 생성자의 차이는 정수형 인자의 처리 방법에 있습니다. Array.of(7)은 하나의 요소 7을 가진 배열을 생성하지만 Array(7)은 length 속성이 7인 빈 배열을 생성합니다.
MDN document

const jediNormal = ['Rey', 'Yoda', 'Luke', 'Leia']; // 이렇게 배열을 생성할 수도 있지만
const jediOf = Array.of('Rey', 'Yoda', 'Luke', 'Leia'); // 이렇게도 생성할 수 있습니다

const array4Normal = Array(4); // [ , , , ] length가 4인 빈 배열
const array4Of = Array.of(4); // [4] ()안에 들어 있는 값들로 배열 생성

코드에서 알 수 있듯 Array.of에 인자로 전달되는 값들로 배열을 생성한다.
이때, 주의할 점은 Array(4)와 Array.of(4)의 차이이다. Array(4)는 length가 4인 빈 배열을 생성하고, Array.of(4)는 인자로 4라는 값이 넘어왔기 때문에 4가 담긴 length가 1인 배열을 만들어낸다.

Array.from

Array.from은 array-like object를 배열로 바꿔주는 역할을 한다.

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

🤔 array-like object?

저번 글에서도 잠깐 언급하고 넘어갔던 array-like object는 유사 배열 객체로, 배열의 형태를 가지고 있으나 map, forEach와 같이 배열에 사용하는 메서드나 속성들을 사용할 수 없는 객체를 의미한다. 가장 대표적인 예로, DOM element를 getElementsByClassName 등으로 가져올 때 리턴되는 NodeList (document.querySelectors()의 리턴 타입), HTMLCollection (document.getElementByClassName()의 리턴 타입)이 있다.

아래 예제는 JS 코드만 작성되어 있으니 직접 확인하고 싶다면 <button> 태그가 여러 개 있는 HTML 파일을 생성한 후, <script>로 JS 파일을 HTML에 추가한 후 코드를 실행해보면 된다.

const buttons = document.querySelectorAll('button'); // NodeList
buttons.forEach((e) => { // Error : e.addEventListner is not a function
    e.addEventListner('click', () => {
        console.log('clicked');
    });
});

// 이런 경우 array-like object인 NodeList를 Array.from()을 이용해 배열로 바꿔준다.
Array.from(buttons).forEach((e) => {
    e.addEventListener('click', () => {
        console.log(e);
      });
});

Array.fill

Array.fill은 배열의 설정한 시작점부터 끝점까지의 데이터를 원하는 값으로 바꿀 수 있다.

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

const jedi = ['Rey', 'Yoda', 'Luke', 'Leia'];

// 위 배열의 index 2만 NOT_HERE로 바꾼다
jedi.fill('NOT_HERE', 1, 2); // ['Rey', 'NOT_HERE', 'Luke', 'Leia']

// 위 배열의 index 2, 3만 NOT_HERE로 바꾼다
jedi.fill('NOT_HERE', 1, 3); // ['Rey', 'NOT_HERE', 'NOT_HERE', 'Leia']

// 위 배열 전체를 NOT_HERE로 바꾼다
jedi.fill('NOT_HERE'); // ['NOT_HERE', 'NOT_HERE', 'NOT_HERE', 'NOT_HERE']

fill에 전달되는 인자는 순서대로 바꿀 값, 시작 인덱스 (기본 0), 끝 인덱스 (기본 array.length)이다. 만약 인자에 바꿀 값만 전달하고 시작점과 끝점을 전달하지 않는다면 배열 전체를 변경한다.

 

---

원글

Array Functions2