오늘 알게된 지식 1 (유사 배열 객체)

hojoon·2023년 8월 10일
0

자바스크립트

목록 보기
8/14

새로운 시리즈 한번 만들어봄

const range = (start, end) => {
    const length = end - start + 1;

    return Array.from({ length }).map((_, index) => index + start);
  
  };
  • range 함수는 시작과 끝을 지정했을 때 그 사이에 해당하는 값들을 배열로 반환
  • 1,5를 받으면 [1,2,3,4,5]
  • 배열로 리턴해주는데 length를 받는다 -> 예시대로라면 length는 5
  • {length} 구조분해 할당으로 {length:5}와 같아서 Array.from에 전달하면
  • 길이가 5인 빈 배열이 생성된다.
  • 거기서 map을 돌면 index는 0, start값만큼 더해줘서
  • start부터 시작하는 length값만큼의 길이의 배열이 생성됨
  • [1,2,3,4,5]가 만들어짐

이거 코드 이해하기 어려웠다. 왜냐하면 Array.from()을

Array.from() 메서드는 유사 배열 객체(array-like object)나 반복 가능한 객체(iterable object)를 얕게 복사해 새로운Array 객체를 만듭니다.

라고 하는데 {length:5}를 Array.from하는거 아닌가? 근데 어떻게 map을 돈다는거지 뭔 말이지 이거 왜 length값만큼의 길이를 가지는 배열이 생기냐? 이러면서 계속 막혔음

저 텍스트를 잘보면 '유사 배열 객체'라는 단어가 있다.

array = [1,2,3] ;
var nodes = document.querySelectorAll('div');

둘중에 하나는 유사배열이다.
length 라는 속성을 가지는게 유사 배열 객체라고 한다.
그래서 이러한 유사배열객체를 Array.from()으로 새로운 array를 만들어내는것이다.!
즉, {length:5} 라는 length 속성을 가지고있기 때문에 빈배열 5개짜리를 가지는 배열을 만들어내는 거다.
ㄹㅇ 신기함!!
아직도 자바스크립트 모르는게 너무많고 이래서 딥다이브를 무조건 한번은 읽어야 하나보다. 화이팅~! 굿~바이~~

profile
프론트? 백? 초보 개발자의 기록 공간

1개의 댓글

comment-user-thumbnail
2023년 8월 10일

정보에 감사드립니다.

답글 달기