Array Functions - 2

저번 포스트에 이어 배열과 관련된 메서드들을 좀 더 살펴보도록 하겠습니다.

1. Array.of

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

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

이번에도 코드로 확인해봅시다! ⌨️

const gascoigneNormal = ['Guy', 'Tommy', 'Jim', 'Donald']; // 이렇게 배열을 생성할 수도 있지만
const gascoigneOf = Array.of('Guy', 'Tommy', 'Jim', 'Donald'); // 이렇게 생성할 수도 있습니다

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

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

2. 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를 스크립트를 통해 가져올 때 document.querySelectors()나 docuemnt.getElementsByClassName()를 사용하죠? 이 메서드 각각의 리턴값인 NodeList와 HTMLCollection이 있습니다.

코드도 확인해볼까요?
아래 예제는 JS 코드만 작성할테니 직접 확인하고 싶으신 분들은 <button> 태그가 여러 개 있는 HTML 파일을 생성하신 후, <script>로 JS 코드를 HTML 파일에 추가한 후 테스트해주세요 :)

const buttons = document.querySelectorAll('button'); // NodeList

buttons.forEach((e) => { // ERROR : buttons.forEach is not a function
	e.addEventListener('click', () => {
		console.log('clicked');
	});
});

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

3. Array.fill

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

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

이건 쉬우니 코드를 바로 볼게요! 👉

const gascoigne = ['Guy', 'Tommy', 'Jim', 'Donald']; 

// 위의 배열의 index 2만 NOT_HERE로 바꿔보겠습니다
gascoigne.fill('NOT_HERE', 1, 2); // ['Guy', 'NOT_HERE', 'Jim', 'Donald']

// 위의 배열의 index 2, 3만 NOT_HERE로 바꿔보겠습니다
gascoigne.fill('NOT_HERE', 1, 3); // ['Guy', 'NOT_HERE', 'NOT_HERE', 'Donald']

// 위의 배열 전체를 NOT_HERE로 바꿔보겠습니다
gascoigne.fill('NOT_HERE'); // ['NOT_HERE', 'NOT_HERE', 'NOT_HERE', 'NOT_HERE']

위의 코드에서 알 수 있다시피, fill에 전달되는 인자는 순서대로 바꿀 값, 시작 인덱스 (기본 0), 끝 인덱스 (기본 array.length)입니다. 만약 인자에 바꿀 값만 전달하고 인덱스들을 전달하지 않는다면 기본값인 인덱스 0부터 length까지이므로 배열 전체를 변경합니다.

참고 :
노마드 코더 ES6의 정석