Array.from() MDN의 설명입니다

정적 메서드는 반복 가능하거나 배열 과 유사한 객체 에서 **Array.from()**얕은 복사된 새 인스턴스를 만듭니다 .Array

Array.from() 의 첫번째 파라미터는 배열의 길이를 나타 냅니다.

문자열은 배열과 유사한형태의 객체이므로

Array.from("안녕하세요")

[ '안', '녕', '하', '세', '요' ]

이렇게 글자하나하나를 가진 리스트로 반환해준다

또한 임의의 숫자 리스트를 만들기위해서는 from()메소드에 두번째파라미터는 콜백함수를 사용할수있습니다.

Array.from() 메소드의 콜백 함수는 세 개의 인자를 받습니다:

  1. 현재 생성되는 요소의 값
  2. 현재 생성되는 요소의 인덱스
  3. 생성되는 배열 자체

길이 10개짜리 배열을 만들고싶다면

Array.from({length:10})

[ undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined ]

from()메소드에 첫번째 파라미터은 배열과 유사한객체를 전달할떄 속성값을 length로 지정해두면 해당길이의 배열을 만듭니다

하지만 이코드는 길이는 10개인 리스트이지만 값이없기때문에 길이가 10개이나 값이 undefined 인 배열10개가 만들어집니다.

Array.from({length:10},(_,i)=>i+1)

[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]

Array.from()의 콜백함수의 파라미터는 위의 설명처럼

  1. 현재 생성되는 요소의 값 : undefined
  2. 현재 생성되는 요소의 인덱스 : 0부터 길이만큼시작

첫번째 파라미터를 “_” 언더바로 표시하게되면 사용하지않겠다는 자바스크릡트의 관례적인표현입니다.

요소의값을 사용하지않고 인덱스값에 +1 을 해주므로써

[1,2,3,4,5,6,7,8,9,10] 과같은 배열을 만들수있습니다.

+ Recent posts