배열(Array) 생성

배열을 생성하는 방법에는 여러 가지 방법이 있습니다. 

const arr1 = [1];

const arr2 = Array(1);

const arr3 = new Array(1);

const arr4 = ["Hi"];

const arr5 = Array("Hi");

const arr6 = new Array("Hi");

const arr7 = Array.of(1);

const arr8 = Array.of("Hi");

const arr9 = Array.from("Hi");

완전히 다른 메서드는 아니지만 각각의 메서드들이 배열을 생성하는 방법은 메서드에게 넘겨주는 데이터에 따라 다릅니다.

 

각각의 메서드가 어떻게 동작하고 상황 별로 어떤 메서드를 사용해야 되는지 정리해보겠습니다.

 

 

---

배열 생성 메서드 정리

 

const arr1 = [1, 2, 3, 4, 5]; // []사용하여 배열 생성

배열을 만드는 가장 흔한 방법으로 []를 사용하여 배열을 생성합니다.

쉼표로 값을 구분하며 가독성을 위해 맨 끝 값에도 쉼표를 붙여도 됩니다.

 

 

 

const arr2 = new Array(); // 빈 배열 생성

const arr3 = new Array("Hi!", "Welcome!"); //  ["Hi!", "Welcome!"] 생성

const arr4 = new Array(5); // 길이가 5인 빈 배열 생성

new 키워드를 사용하여 배열을 만드는 방법입니다. (소위 말하는 생성자 함수를 이용하는 밥법입니다.)

 

arr2처럼 배열 생성자에 아무것도 넣지 않으면 빈 배열이 생성됩니다. 

 

즉 const moreNumbers = []와 같습니다.

 

arr3처럼 생성자 안에 값을 넣어주면 해당 값이 들어있는 배열을 생성하게 됩니다. 

 

생성자 안에 단일 숫자를 넣게 되면 길이가 숫자만큼인 빈 배열을 생성하게 됩니다.

 

arr4는 길이가 5인 빈 배열을 생성한 게 됩니다.

 

 

 

const arr5 = Array(); // 빈 배열 생성

const arr6 = Array(5); // 길이가 5인 배열 생성

위의 new 키워드를 사용한 것과 같은 결과가 나옵니다.

 

 

 

const arr7 = Array.of(1, 2); // [1, 2] 생성

of는 전역에서 사용 가능한 배열 객체에 대한 메서드이며 값을 넣을 수 있는 메서드입니다.

 

 

 

 const arr9 = Array.from("Hi"); // ['H', 'i'] 로 변환
 
 const arr10 = Array.from([1, 2, 3, 4, 5]); // [1, 2, 3, 4, 5]로 변환

인자로는 여러 개의 값을 넣으면 오류가 발생하기 때문에 1개의 값만 인자로 넣어주셔야 합니다.

 

대신 인자로 이터러블이나 유사 배열 객체 또는 배열이 들어갑니다. 

 

Array.from()은 이터러블이나 유사 배열 객체를 배열로 변환해줍니다.

 

인자로 문자열을 넣게 되면 문자를 분리시켜 배열에 넣습니다.

 

인자로 배열을 넣게 되면 이미 배열인 값이 배열로 변환되는 것이기 때문에 의미가 없습니다.

 

Array.from()를 사용하면 진짜 배열에서만 사용할 수 있는 메서드들을 유사 배열 객체 또한 사용할 수 있게 되어 유용하게 사용됩니다.

 

Array(), Array.of()

성능 면에서 대괄호 방식을 이용하여 생성하는 것보다 느리지만 필요한 몇몇 상황이 존재합니다.

 

특정 길이의 배열을 다양한 방식으로 만들어야 하는 상황입니다.

 

 

 

정리

대부분의 경우 대괄호를 사용하여 배열을 생성하고 Array.from()은 유사 배열이나 이터러블 객체를 진짜 배열로 변환해줍니다.