자바스크립트 배열 생성 & 초기화 한번에 하기

kler_HJ·2020년 5월 13일
10

JS

목록 보기
8/8
post-custom-banner

자바스크립트의 Array객체(함수)다.

  • 따라서, 대표적 객체지향 언어인 자바와 마찬가지로 new Array()가 존재한다.

  • new Array()의 첫번째 매개변수로 배열의 길이를 넘겨서 특정 길이로 배열의 생성은 할 수 있지만,
    초기값은 undefined로 설정된다.

    /* new Array() */
    const arr = new Array(5);
    console.log(arr); // => Array(5) []
    console.log(arr[0]); // => undefined
    console.log(arr.length); // => 5
    /* 직접 초기화 */
    const arr2 = [0, 0, 0, 0, 0]; // => Array(5) [0, 0, 0, 0, 0] 
    console.log(arr2[0]); // => 0
    console.log(arr2.length); // => 5
  • 아래와 같이 new Array()의 매개변수에 원하는 초기값들을 넘겨주는 방법으로
    생성과 초기화를 동시에 할 수 있지만, 이는 사실 직접 초기화와 유사한 방법으로 한계가 존재한다.

    /* new Array()로 초기값 설정 */
    const arr = new Array(0, 0, 0, 0, 0);
    console.log(arr); // => Array(5) [0, 0, 0, 0, 0] 
    console.log(arr[0]); // => 0
    console.log(arr.length); // => 5
    /* 길이가 1000, 값이 0 인 배열을 생성할 경우..*/
    const arr = new Array(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,...);
    //arr배열의 원소 1000개를 정확히 직접 입력해줘야한다.
  • 다행히, 자바스크립트의 Array 객체에는 Array.from() 함수가 존재한다.

    /* Array.from()으로 길이가 5, 값이 0인 배열 생성하기 */
    const arr = Array.from({length: 5}, () => 0);
    console.log(arr); // => Array(5) [0, 0, 0, 0, 0]
    console.log(arr[0]); // => 0
    console.log(arr.length); // => 5

    Array.from()의 첫번째 매개변수로 {length: 원하는 길이} 객체를,
    두번째 매개변수로 원하는 값을 반환하는 콜백함수를 넘겨주면 된다.

    /* Array.from()으로 길이가 5, 값이 (0~5)인 배열 생성 */
    const arr = Array.from({length: 5}, (v, i) => i); // i(index) 1씩 증가
    console.log(arr); // => Array(5) [0, 1, 2, 3, 4]
    console.log(arr[0]); // => 0
    console.log(arr.length); // => 5
    
    /* 콜백함수의 첫번째 매개변수, v 생략시 undefined 반환 */
    const arr = Array.from({length: 5}, (i) => i);
    console.log(arr); // => Array(5) [undefined, undefined, undefined, undefined, undefined]
    console.log(arr[0]); // => undefined
    console.log(arr.length); // => 5
    /* console.log()로 v의 값을 확인해보면 undefined가 출력된다. */
    const arr = Array.from({length: 5}, (v, i) => {
      console.log(v, i)
      return i;
    });
    // => undefined 0
    // => undefined 1
    // => undefined 2
    // => undefined 3
    // => undefined 4
    

    즉, Array.from()에 콜백함수의 첫번째 매개변수를 넘겨주어야,
    두번째 매개변수index를 불러올 수 있는 것이다.

    /* Array.from() 콜백의 첫번째 매개변수는 undfined. */
    const arr = Array.from({length: 5}, (undefined, i) => i); 
    console.log(arr); // => Array(5) [0, 1, 2, 3, 4]
    console.log(arr[0]); // => 0
    console.log(arr.length); // => 5
profile
더 나은 제품과 디자인에 대해 고민하기를 즐기는 Front-end 개발자입니다.
post-custom-banner

0개의 댓글