윤휴먼
ddooyn.log
윤휴먼
전체 방문자
오늘
어제
  • 분류 전체보기 (19)
    • FRONT-END (6)
      • Projects (0)
      • Retrospective (6)
    • HTML CSS (0)
    • JavaScript (6)
    • React (4)
    • Node.js (0)
    • Python (2)
    • Algorithm (0)
    • Tips (1)
    • Books (0)

인기 글

태그

  • react
  • AWS
  • javascript
  • Next.js
  • WIL
  • jQuery
  • mongodb
  • PYTHON
  • github
  • ESLint
  • Tip

최근 댓글

hELLO · Designed By 정상우.
윤휴먼

ddooyn.log

JavaScript

[JavaScript] Array 생성자 함수와 Array.of, Array.from

2022. 6. 24. 22:58

Array 생성자 함수

꼭 new 연산자와 함께 호출하지 않아도 배열을 생성하는 생성자 함수로 동작한다.

생성자 함수 내부에서 new.target을 확인하기 때문!

Array와 Array.of의 차이

Array 생성자 함수는 인수로 숫자 하나를 전달받으면 해당 인수를 length로 갖는 빈(희소) 배열을 생성한다.

Array.of는 숫자 하나를 전달해도 그 인수를 요소로 갖는 배열을 생성한다.

Array.from 이란

Array.from에 length만 존재하는 유사 배열 객체를 전달하면 undefined를 요소로 채운다.

Array 생성자 함수는 undefined를 채우지 않는다.

첫 번째 인수로 전달한 유사 배열 객체에 의해 배열의 요소값과 인덱스를 순차적으로 전달하면서 호출하고,

두 번째 인수로 전달한 콜백 함수의 반환값으로 구성된 배열을 반환한다.

유사 배열(array-like) 객체는 배열처럼 인덱스로 프로퍼티 값에 접근할 수 있고, length 프로퍼티를 갖는 객체를 말한다.

// 유사 배열 객체를 변환하여 배열 생성
Array.from({ length: 2, 0: 'a', 1: 'b' }); // ['a', 'b']

이터러블(iterable) 객체는 스프레드 문법과 배열 디스트럭처링 할당의 대상으로 사용할 수 있는 객체를 말한다.

ES6에서 제공하는 빌트인 이터러블로는 Array, String, Map, Set, DOM 컬렉션(NodeList, HTMLCollection), arguments 등이 있다.

// 이터러블을 변환하여 배열 생성. 문자열은 이터러블
Array.from('Hello'); // ['H', 'e', 'l', 'l', 'o']

문자열 한 글자씩 배열 만들기

1. Array.from 사용

2. 전개(스프레드) 연산자 ... 사용

3. String.prototype.split() 메서드 사용

Reference >

  • 모던 자바스크립트 Deep Dive p.501-503
    'JavaScript' 카테고리의 다른 글
    • [JavaScript] 동기와 비동기, 자바스크립트 엔진과 브라우저 환경
    • [S.A.] JavaScript 이해 | 이노베이션 캠프 - 리액트 입문주차
    • [JavaScript] 화살표 함수와 this
    • [jQuery] Ajax 기본 골격과 로딩 직후 호출 방법
    윤휴먼
    윤휴먼
    프론트엔드 개발자 준비 중. 디테일과 조화를 좋아합니다. ISFP😊

    티스토리툴바