[20220606_Array.from()]

YunTrollpark·2022년 6월 6일
0

React

목록 보기
6/12

Array.from()

1. Array.from()이란

: 문자열 등 유사배열(Array-like) 객체나 iterable한 객체를 배열로 만들어주는 메서드

- iterable: 반복을 적용할 수 있는 성질, 내부에 있는 요소들을 차례차례 꺼낼 수 있는 객체
• 문자열
• 리스트
• 딕셔너리
• 범위

- 유사 배열 객체: 키가 인덱스 값으로 되어있고, 길이를 나타내는 length 속성을 갖는 객체
// 1. 문자열을 배열로 만드는 예시
console.log(Array.from("troll"));
// ["t", "r", "o", "l", "l"]

// 2. 유사 배열 객체를 배열로 만드는 예시
console.log(Array.from({0: "제니", 1:"리사", 2:"지수", 3:"로제", length: 4}));
// ['제니', '리사', '지수', '로제']

// 3. 함수의 매개변수들을 순서대로 배열로 만드는 예시
const myFunc = (...arguments) => {
  return Array.from(arguments)
}

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

Array.from()의 첫 번째 인자는 배욜로 만들 iterable한 객체가 됨
• 두 번째 인자는 생성한 배열의 모든 원소에 대해 수행할 맵핑 함수임
(Array.map()이라고 생각하면 됨)

2. Array.from() vs 반복문

// 맵핑 함수의 첫 번째 인자 언더스코어(_)는 특별한 인자가 아니라, 불필요한 인자의 공간을 채우기 위한 용도

const arr = Array.from(Array(31), (_, index) => index + 1)
console.log(arr);

// 만약 Array.from()을 사용하지 않는다면, 하단과 같이 사용해야 함

const arr = [];

for(let i = 1;, i <= 31; i++){
 arr.push(i);
}

console.log(arr);

3. 예시

Array.from([1,2,3], x => x + x);
//결과: 2,4,6
// 첫번째 인자로 배열을, 두번째 인자로 각각의 배열에 적용할 함수를 건내줌

Array.from(
  {length: 20}, //유사배열
  () => Array(10).fill(0) //각각의 배열에 적용할 함수
);

{length: 20}은 유사 배열로 인식하고, 각각의 요소에 10개만큼 0으로 채워줌

4. {length: 20}이 객체인 이유

• 자바스크립트에서 배열은 object임
• 그렇다고 object = 배열이라는 뜻이 아님!
• 배열은 length라는 속성을 가진 object이고, 그렇다면 반대로 objectlength 속성을 넣어주면 배열처럼 인식함
• 그렇다거 length 속성을 추가한 object가 배열과 같다는건 아님 → 배열의 프로토타입인 Array에는 배열로서 동작하기 위한 다른 메소드가 담겨있기 때문

참고: https://velog.io/@teihong93/Array.from%EC%9D%84-%ED%86%B5%ED%95%9C-%EB%B0%B0%EC%97%B4%EC%9D%98-%EC%B4%88%EA%B8%B0%ED%99%94

profile
코딩으로 세상에 이야기하는 개발자

0개의 댓글