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

자바스크립트의 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