[JS] 유사배열객체를 배열로 변환(Array.from, slice.call, map.call, 전개구문, 얕은복사)

✅ 유사배열객체

: 유사배열객체는 이름 그대로 배열과 '유사한' 것으로, 배열처럼은 보이지만 실제는 key값과 length 값을 가지고 있는 개체이다.

이거처럼 0, 1, 2의 key 값들이 있고 length가 있는 객체 형태이다.

 

 

getElementsByTagName, getElementsByClassName 등은 유사배열객체로 가져오기 때문에

forEach문, map, filter, reduce 등의 메서드를 사용할 수가 없다

사용하기 위해서는 배열 형태로 바꿔주는 작업이 필요하다

 

0️⃣ 유사배열객체 그대로 가져오는 방법 -> for문 사용

const strong = document.getElementsByTagName('strong');
for (let i=0; i<strong1.length; i++) {
    strong1[i].style.color = "blue";
}

 

---

유사배열객체 -> 배열

 

1️⃣ 전개구문

전개구문은 "..."를 사용해서 배열로 바꿔줄 수 있다.

let test1 = [...strong];
test1.forEach((e) => {
e.style.color = "blue";
})

---

2️⃣ from

Array.from()는 괄호 안의 값을 얕게 복사해 새로운 배열을 만드는 메서드이다.

let test2 = Array.from(strong);
test2.map((item) => (item.style.color = "blue"));

---

3️⃣ slice.call

Array.prototype.slice.call()를 통해 Array 객체의 메서드를 prototype으로 가져오고 값을 얕게 복사하여 배열로 가져온다.

다만, 스타일 적용을 위해서는 map으로 적용하는 작업이 추가적으로 필요

let test3 = [].slice.call(strong);
test3.map((item) => (item.style.color = "blue"));

---

4️⃣ map.call

Array.prototype.map.call()를 통해 Array 객체의 메서드를 prototype으로 가져오고 값을 얕게 복사하여 배열로 가져온다.

스타일 적용을 한 번에 할 수 있음

let test4 = [].map.call(strong, (item) => (item.style.color = "blue"));

---

 

➕ 얕은 복사란?

자바스크립트에는 원시값, 참조값 두 가지의 데이터 타입이 존재한다.

원시값은 기본 자료형을 의미하며 변수에 원시값을 저장하면 변수의 메모리 공간에 실제 데이터 값이 저장된다.

참조값은 여러 자료형으로 구성되는 메모리에 저장된 객체이다. 변수에 객체를 저장하면 독립적인 메모리 공간에 값을 저장하고 변수에 저장된 메모리 공간의 참조를 저장하게 된다.

 

원시값을 복사할 때는 다른 독립적인 메모리 공간에 할당되기 때문에 복사를 하고 값을 수정해도 기존 원시값을 저장한 변수에는 영향 x -> 깊은 복사: 실제 값 복사

 

참조값을 복사할 때는 변수가 객체의 참조를 가리키고 있기 때문에 복사한 객체도 같은 메모리 공간의 참조를 가리키고 있다. 따라서 복사한 값을 수정하면 기존 객체에 저장한 변수에도 영향 미침 -> 얕은 복사: 객체의 참조값 복사