[JS/리액트] Array.from()에 대해서 (1)

참고한 글

Array.from()

[JavaScript] Array.from()으로 배열 만들기 (유사 배열 객체) (tistory.com)

[JavaScript] Array.from()으로 배열 만들기 (유사 배열 객체)

set 에 대해서

https://www.daleseo.com/js-set/

자바스크립트 세트(Set) 완벽 가이드

 

---

 

Array.from()

 

= JavaScript의 함수로,

특정한 객체나 값들을 배열로 변환할 때 사용

 

= 주로 배열이 아니지만 배열처럼 동작하는 객체(예: NodeList, arguments)

또는 반복 가능한 객체(예: Set, Map)를 진짜 배열로 만들 때 유용

 

1) 배열처럼 생긴 객체를 배열로 변환

const nodeList = document.querySelectorAll('div'); // NodeList 객체
const array = Array.from(nodeList); // 진짜 배열로 변환

**NodeList란?

NodeList는 브라우저에서 DOM 요소들의 목록을 담고 있는 특수한 객체야.
쉽게 말해, 웹 페이지에서 특정한 HTML 요소들을 한 번에 선택하면 나오는 목록이 바로 NodeList야.
예를 들어, <div> 태그들을 모두 선택하거나, 특정 클래스 이름을 가진 요소들을 선택할 때

NodeList가 만들어져.

NodeList 예시 >> 

웹 페이지에 이런 HTML 코드가 있다고 가정해볼게:

<div>첫 번째 박스</div>
<div>두 번째 박스</div>
<div>세 번째 박스</div>​

이제 JavaScript로 이 <div>태그들을 모두 선택해보자:

const divs = document.querySelectorAll('div');
console.log(divs);​

이렇게 하면 NodeList가 나오고,

그 안에 페이지에 있는 <div> 태그들이 전부 담겨 있어.

divs는 배열처럼 생겼지만, 진짜 배열은 아니야.
그래서 **배열의 메서드(예: map, forEach 등)**를 쓸 수 없을 때도 있어.

NodeList의 특징 >>

배열과 비슷하지만, 배열은 아님.

근데, 배열처럼 숫자로 인덱스에 접근할 수 있어

console.log(divs[0]); // 첫 번째 div​

forEach()같은 반복 메서드를 사용할 수 있지만,
map(), filter() 같은 배열 메서드는 직접 사용할 수 없어.

NodeList를 배열로 바꾸는 방법 >>

NodeList를 진짜 배열로 바꾸고 싶을 때 Array.from()을 사용해!
예를 들어:

const divArray = Array.from(divs); // 이제 NodeList가 진짜 배열로 변했어!​

 

요약

NodeList는 DOM에서 선택된 요소들의 목록이야.
배열처럼 보이지만 완전한 배열은 아니어서,
배열 메서드를 사용하려면 Array.from()으로 변환할 수 있어!

---

2) 반복 가능한 객체를 배열로 변환

const set = new Set([1, 2, 3]);
const array = Array.from(set); // [1, 2, 3]

**"반복 가능한 객체"** 의 의미 >>

반복 가능한 객체는 우리가 한 번에 하나씩 꺼낼 수 있는 물건들이 담긴 상자 같은 거야.
☆★네가 물건을 하나씩 꺼내서 쓸 수 있다면, 그건 반복 가능한 객체야!

물건을 하나씩 꺼내서 쓸 수 있다면, 그건 반복 가능한 객체 ?

반복 가능한 객체란? >>>
반복 가능한 객체는, 한 번에 하나씩 꺼내서 쓸 수 있는 상자라고 생각하면 돼.
상자 안에 여러 물건이 들어있는데,
그 물건들을 차례대로 하나씩 꺼낼 수 있으면 반복 가능하다고 말해.

예시로 설명할게:

const arr = [1, 2, 3];
for (const num of arr) {
  console.log(num); // 1, 2, 3을 차례대로 출력해!
}​

1) 배열은 반복 가능한 객체야!
배열은 여러 값들이 모여 있는 상자야, 그리고 그 값들을 하나씩 꺼내 쓸 수 있어.
여기서 배열 arr는 반복 가능한 객체야,
왜냐하면 값을 하나씩 꺼내서 출력할 수 있거든!

const set = new Set([1, 2, 3]);
for (const value of set) {
  console.log(value); // 1, 2, 3을 차례대로 출력해!
}​

2) Set도 반복 가능한 객체야!
Set도 반복 가능해!
값들을 하나씩 꺼내서 사용할 수 있기 때문이야.
Set도 마찬가지로 안에 여러 값이 들어 있는 상자고, 그 값들을 하나씩 꺼낼 수 있어.

**"반복 가능"**이란 말의 의미
이제 반복 가능이란 말의 의미가 조금 더 명확해졌을 거야.
배열, Set 같은 것들은 안에 여러 개의 값이 들어 있고,
그 값들을 하나씩 꺼내서 반복할 수 있지.
그래서 반복 가능한 객체라고 부르는 거야!

const str = "hello";
for (const char of str) {
  console.log(char); // h, e, l, l, o 차례대로 출력돼!
}​

3) 문자열도 반복 가능한 객체야!
문자열도 반복 가능해.
문자열을 하나씩 꺼내서 문자 단위로 반복할 수 있어.

요약하자면:
반복 가능한 객체는 배열처럼 값을 여러 개 가지고 있고,
그 값들을 하나씩 차례대로 꺼내서 쓸 수 있는 상자야.
그래서 배열, Set, 문자열 같은 것들이 반복 가능한 객체에 해당해!

예를 들어 Set이라는 상자는 여러 개의 숫자, 문자 등을 넣을 수 있는 특별한 상자야.
하지만 이 상자는 배열이랑 좀 달라서 중복된 값은 넣을 수 없어

const set = new Set([1, 2, 3]); // 1, 2, 3이 담긴 상자야!​

Set에서 하나씩 꺼낼 수 있지만 배열은 아닌 것에 대한 설명 >>

Set은 배열처럼 안에 숫자들이 들어 있지만,
배열이 아니어서 배열의 기능들을 바로 사용할 수 없어.

new Set(): 새로운 Set 상자를 만드는 거야.
**new**는 "새로운 Set 상자를 만들어라!"라는 의미야.
Set이라는 도구는 원래부터 있어,
그런데 너가 그 도구를 사용해서 상자를 하나 만드는 거지.​

[1, 2, 3]: 이 숫자들을 Set 상자에 넣겠다는 뜻이야.
상자 안에 1, 2, 3이라는 숫자들을 넣은 거야.
상자 안에는 1, 2, 3이 들어가고,
만약 같은 숫자가 또 들어가려고 하면(예: [1, 2, 2, 3]) 중복은 안 들어가.

Set은 단순한 변수 이름이 아니라, JavaScript의 특별한 자료형이야! 
그냥 일반 변수가 아니라, 특별한 역할을 하는 상자라고 생각하면 돼.
map() 같은 배열 메서드를 쓸 수 없지.

const array = Array.from(set); // 이제 [1, 2, 3]이 담긴 배열로 변했어!​

그래서, **Array.from()**을 써서 이 상자를 배열로 바꿔주는 거야!

>>>그럼 Set에 대해 다시 쉽게 설명해볼게. >>>

1) Set은 변수 이름이 아니라 자료형이다!
Set은 일반 변수가 아니라, **특별한 기능을 가진 데이터 구조(자료형)**야. 
우리가 흔히 쓰는 배열, 문자열 같은 자료형처럼 Set도 특정한 기능을 가지고 있어. 
그 기능 중 하나가 중복된 값을 허용하지 않는다는 거야.

const set = new Set([1, 2, 3]);

여기서 set은 변수가 맞지만, 
**new Set()**은 JavaScript가 제공하는 특별한 자료형을 이용하는 거야. 
이 자료형은 고유한 값만 저장할 수 있어. 
같은 값이 여러 번 들어오려고 해도 한 번만 저장되는 특징을 가지고 있어.

2) Set은 중복된 값을 허용하지 않는다
왜 중복된 값을 허용하지 않냐면, 
Set 자료형은 처음부터 고유한 값만 모으기 위해 만들어졌어. 
예를 들어, 친구 목록을 관리하는데, 같은 친구 이름이 여러 번 들어오면 헷갈리겠지? 
그래서 Set은 중복되는 값을 자동으로 걸러 줘!

const set = new Set([1, 2, 2, 3]); // 2가 두 번 있지?
console.log(set); // Set { 1, 2, 3 } -> 2는 한 번만 저장돼!

 

3) new Set()은 특별한 상자
new Set()은 배열이나 다른 값들을 고유하게 저장할 수 있는 상자를 만드는 도구야.
이 상자에 값을 넣으면, 중복된 값은 자동으로 한 번만 저장돼.
그래서 배열처럼 생긴 값들을 넣어도, 중복된 값이 있으면 한 번만 남는 거야.

const set = new Set([1, 2, 2, 3]); // 숫자 1, 2, 3을 Set 상자에 넣어
console.log(set); // 결과는 Set { 1, 2, 3 }​

이렇게 하면 Set 상자 안에 고유한 값들만 남아.
중복된 2는 한 번만 들어가고, 나머지는 무시되는 거지.

4) Set과 배열의 차이
배열은 값이 중복될 수 있어. [1, 2, 2, 3] 이렇게.
Set은 값이 중복되면 한 번만 들어가. { 1, 2, 3 } 이렇게.

정리하자면:
Set은 단순한 변수 이름이 아니야.
특별한 자료형이고, 값을 고유하게 저장할 수 있어.
중복된 값은 한 번만 들어가는 게 Set의 특징이야.
**new Set()**은 새로운 Set 상자를 만드는 방법이야,
이 상자는 중복된 값을 허용하지 않도록 만들어졌어.

 

비유로 설명하자면

Set은 친구들이 여러 명 모여 있는 상자야.

 

같은 친구는 두 번 못 들어가지만,
모두 하나씩 꺼내볼 수 있어.

하지만 네가 이 상자를 진짜 친구 목록(배열)으로 바꾸고 싶으면,
**Array.from()**이라는 도구를 써서 그 친구들을 한 줄로 정리할 수 있어!
결과적으로, 친구들을 차례대로 배열에 담아서 필요한 작업을 할 수 있지.

요약

Set은 배열처럼 값들을 담는 상자인데, 배열은 아님.
그래서 그 상자를 배열로 바꾸고 싶을 때
Array.from()을 써서 반복 가능한 객체를 진짜 배열로 만들어.

[1, 2, 3] 이게 배열 모양인데 배열이 아닌 이유 >>>

[1, 2, 3] 이 자체는 배열이 맞아.

배열 모양으로 생긴 숫자들이 여러 개 모여 있는 형태지.

그런데 여기서 중요한 건, 이 배열을 Set 상자에 넣었다는 것이야.
배열을 Set에 넣으면, 그 배열의 각각의 값들이 Set이라는 새로운 상자에 담기는 거지.

Set은 배열처럼 값을 여러 개 담을 수 있지만,
동작 방식이 다르기 때문에 배열과는 다르게 취급해.

Set의 주요 차이점은 중복된 값이 안 들어간다는 거야.
배열은 똑같은 값이 여러 번 들어갈 수 있지만, Set은 한 번만 들어가.

const set = new Set([1, 2, 2, 3]); // 2가 두 번 들어가 있지?
console.log(set); // 출력하면 Set(3) { 1, 2, 3 } -> 중복된 2는 한 번만 들어가!​

 

그럼 왜 배열이 아니라 Set을 쓰는 걸까?

= Set은 특정한 목적을 위해 쓰이는 고유한 값들을 모으는 도구야.
배열은 중복된 값들을 허용하는데, Set은 절대 중복을 허용하지 않아.

이런 상황에서는 Set을 쓰는 게 더 적합해:
- 고유한 데이터가 필요할 때 (예: 중복 없이 사용자 ID 모으기)
- 순서보다는 고유 값에 초점을 맞추고 싶을 때

정리하자면:
**[1, 2, 3]**은 배열이 맞아.
하지만 그 배열을 Set이라는 특별한 상자에 넣으면,
Set은 배열이 아니라 중복을 허용하지 않는 상자가 되는 거야.

배열과 Set의 차이 >>

const arr = [1, 2, 2, 3];
console.log(arr); // [1, 2, 2, 3] -> 중복된 2가 두 번 들어가 있어.​

 

배열:
[1, 2, 3]처럼 여러 값을 순서대로 저장할 수 있는 상자야.
같은 값을 여러 번 넣을 수 있어.

const set = new Set([1, 2, 2, 3]);
console.log(set); // Set(3) {1, 2, 3} -> 중복된 2는 한 번만 저장돼!​

Set:
배열과 비슷해 보이지만, 중복된 값은 한 번만 저장하는 특별한 상자야.
순서가 중요하지 않고 중복되는 값은 무시돼.

Set은 중복된 값을 안 넣는 이유에 대해서 >>

const friends = new Set(["Alice", "Bob", "Alice"]);
console.log(friends); // Set { "Alice", "Bob" } -> Alice는 두 번 안 들어가!​

Set은 고유한 값들만 모아놓고 싶을 때 사용해.
예를 들어 같은 친구가 파티에 여러 번 들어올 수 없다고 생각해봐.
파티장에는 한 명씩만 들어갈 수 있어! 그래서 중복된 값은 자동으로 제외돼.

new Set([1, 2, 3])는 뭐냐면? >>

[1, 2, 3]: 배열이야! 숫자 1, 2, 3을 담고 있는 배열.
new Set(): 이 배열을 Set 상자로 변환하는 거야.
이 Set 상자는 중복된 값이 없고, 고유한 값들만 모아둬.

 

---

3) 매핑과 변환을 한 번에

const array = Array.from([1, 2, 3], x => x * 2); // [2, 4, 6]