알고리즘 문제풀이를 하며 배열 메서드는 정말 자주 썼던 것 같다. 공부하기 전, for문 중에는 for-of 문을 많이 사용했고 for-in은 들어만 보았다. 이번 기회에 이 내용들을 확실히 정리해본다.

Array.from

Array.from은 여러 기능을 하는 배열 메서드이다.
이 중에 유사 배열 객체와 문자열을 실제 배열로 변환하는 경우에 대해 알아보자.

유사배열 객체
NodeList처럼 '배열처럼 보이지만, 배열이 아닌 객체'를 말한다.
유사배열 객체를 배열로 바꿔주는 이유는 배열 메서드 사용이 가능해지기 때문이다.

NodeList를 배열로 만들기

<div class="fruits">
	<p>Apple</p>
    <p>Banana</p>
    <p>Orange</p>
 </div>

querySelectorAll 메서드를 사용하여
fruits 클래스의 p 태그를 모두 가져온다.

querySelectorAll로 가져온 결과값은 NodeList가 된다.

const fruits = document.querySelectorAll('.fruits p');

이제 이 NodeList(유사배열객체)를 Array.from을 활용해 실제 배열로 만든다.

const fruitArray = Array.from(fruits);

console.log(fruitArray); // [p, p, p] (우선은 p 태그로 출력됨)

실제 배열이 되었기 때문에 배열 메서드(map)를 사용할 수 있다.

const fruitNames = fruitArray.map((fruit) => fruit.textContent); // map 메서드 작업

// map은 작업한 내용을 새로운 배열로 반환
console.log(fruitNames); // ["Apple", "Banana", "Orange"]

Array.from의 두 번째 인수 = map

Array.from의 두 번째 인수를 활용하면 map을 사용한 것과 동일한 결과를 얻을 수 있다.

const fruits = document.querySelectorAll('.fruits p');

const fruitArray = Array.from(fruits, (fruit) => {
	console.log(fruit); 
    // <p>Apple</p>
    // <p>Banana</p>
    // <p>Orange</p>
    
	return fruit.textContent;
});

console.log(fruitArray); // ["Apple", "Banana", "Orange"]

문자열을 배열로 만들기

Array.from을 문자열에 사용하면 .split('') 한 것과 동일한 결과를 얻는다.

const apple = "Apple";

const appleArray = Array.from(apple);

console.log(appleArray); // ["A", "p", "p", "l", "e"]

Array.of()

Array.of는 나열된 인수를 배열로 만들어준다. 자주 쓰일 것 같진 않지만 필요한 경우 알고 있으면 편할 것 같다.

const numbers = Array.of(1, 2, 3, 4, 5);

console.log(numbers); [1, 2, 3, 4, 5]

for-of문과 for-in문

다 뒤에 전치사(from, of, in, ...)을 붙여서 상당히 헷갈린다. (...)
for-of와 for-in의 차이는 간단하다.
for-of는 값(value)을 가져오고 for-in은 키(key)를 가져온다.

for-of문

객체의 경우

for-of를 객체에서 사용하면 객체의 각 키를 잡아내기 위해 Object.keys() 메서드를 사용해야 한다.
Object.keys()로 키들을 배열로 꺼낸 후, 객체의 [키]번째 값을 잡으면 그것이 바로 값(value)이 된다.

const song = {
	title: 'ShutDown',
    year: 2022,
};

for (const key of Object.keys(song)) {
	const value = song[key];
    
    console.log(key, value);
    // title ShutDown
    // year 2022
}	

배열의 경우

for-of를 배열에 쓰면 배열의 각 요소들을 값으로서 차례로 반환한다.
(일반 for문을 간략화한 것과 동일)

const fruits = ['apple', 'banana', 'orange'];

for (const fruit of fruits) {
	console.log(fruit);
	// apple
    // banana
    // orange
}

for-in

for-in은 값이 아닌 '키'를 꺼낸다. 객체의 경우 Object.keys 없이 키를 바로 꺼낼 수 있어 편리하고, 배열의 경우 명시적인 키가 없기 때문에 각 요소의 '인덱스'를 키로 잡는다.

객체의 경우

for-in문을 객체에 사용할 경우 주의할 점은 '순서 없이' 가져온다는 점이다. 따라서 for-in 반복문이 도는 동안 객체에 속성을 추가/수정/삭제 하지 않는 것이 좋다.

const song = {
	title: 'ShutDown',
    year: 2022,
};

for (const key in song) {
	// key를 바로 뽑을 수 있기 때문에 Object.keys가 필요 없다
    
    console.log(key, song[key]);
    // title ShutDown
    // year 2022
}	

배열의 경우

배열에는 키가 없다. 따라서 for-in문은 배열의 인덱스를 키로 인식한다.
(주의: 키는 '문자열'이기 때문에 문자열로 반환된다)

const fruits = ['apple', 'banana', 'orange'];

for (const index in fruits) {
	console.log(index);
	// "0"
    // "1"
    // "2"
}