[JavaScript] 한번에 하는 배열 생성 & 초기화

JavaScript의 배열(Array)는 객체(함수)다.

• 따라서, 대표적 객체지향 언어인 자바와 마찬가지로 new Array()가 존재한다.
• 배열의 생성자(new Array())와 하나의 숫자 매개변수로 생성할 수 있지만, 그 결과는 length가 매개변수고, 길이만큼의 빈 슬롯을 가진 배열이다. 배열의 초기값을 확인해보면 undefined가 출력되는 것을 볼 수 있다.

let datas = new Array(5)

console.log(datas[0])     // undefined
console.log(datas.length) // 5

 

• 아래와 같이 new Array()의 매개변수에 원하는 초기값들을 넘겨주는 방법으로 생성과 초기화를 동시에 할 수 있지만, 배열의 길이에 따라 한계가 존재한다. 

// new Array()로 초기값 설정
let datas = new Array(1, 2, 3, 4, 5);

console.log(datas); // [1, 2, 3, 4, 5]
console.log(datas[0]) // 1
console.log(datas.length) // 5

// 길이가 1000, new Array()로 초기값 설정
let datas = new Array(1, 2, 3, 4, ..., 1000);
// datas 배열의 초기값을 전부 직접 입력해줘야 한다. (실수없이..)

 

• JavaScript에는 이러한 한계를 극복할 수 있는 Array.from() 함수가 존재한다. Array.from() 함수는 유사 배열 객체(length 속성과 인덱싱 된 요소를 가진 객체) 및 반복 가능한 객체를 얕게 복사해 새로운 Array 객체를 만들어주는 함수이다.

// Array.from()으로 길이가 5, 값이 (1 ~ 5)인 배열 생성
// 콜백 함수의 첫 번째 매개변수 value, 두 번째 매개변수 index
let datas = Array.from({length: 5}, (v, i) => i + 1); // i(index) + 1

console.log(datas); // [1, 2, 3, 4, 5]
console.log(datas[0]); // 1
console.log(arr.length); // 5

 

마무리.. 😃

알고리즘 공부를 하는 도중에 값이 1부터 차례대로 증가하는 배열을 생성할  필요가 있었다. 직접 초기화하는 것보다는 new Array(length).fill(0)을 이용해 원하는 길이만큼의 배열을 0으로 초기화한 다음 map() 함수를 이용해 새로운 배열을 리턴받아야겠다고 생각했지만 복잡한 부분이 어느정도 있었기에 더 좋은 방법을 찾던 중 Array.from()을 찾게 되었다. 새로운 것을 찾고 공부를 했으니 오늘도 보람찬 하루라고 할 수 있겠다❗

이 글을 읽고 더 좋은 방법이 있다면 댓글로 남겨주세요~🙏

 

참고한 사이트

https://velog.io/@kler/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%B0%B0%EC%97%B4-%EC%83%9D%EC%84%B1-%EC%B4%88%EA%B8%B0%ED%99%94-%ED%95%9C%EB%B2%88%EC%97%90-%ED%95%98%EA%B8%B0

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