[javascript] 배열 생성하는 여러가지 방법(ES6) (배열생성자 new Array() / Array.of() / Array.from() )

 

javascript에서 배열을 생성하는 방법은 변수에 대괄호를 안에 요소를 넣어서 정의해 줄 수 있고,

const arr = ['apple', 'banana', [1,2,3]];

그 외에 Array() 생성자, Array.of(), Array.from()을 이용해서도 만들 수 있다. 

let arr1 = new Arr(100); //[empty, empty .... 100개의 empty]
arr = new Arr(4,6,8); // [4,6,8]

let arr2 = Array.of(2); //[2]
arr2 = Array.of(2,4,6,8); // [2,4,6,8]

let arr3 = Array.from('test'); // ['t','e','s','t']

 

 

1. new Array() 생성자

---

Array 생성자를 통해 배열을 생성할 수 있다. 

new Array() 또는 new 없이  Array()만 호출해도 동일한 결과를 얻을 수 있다.

단, [소수]는 문제 없지만 Array(소수)는 범위 에러를 내뱉는다. 

 

// 1-1. param이 1개고 정수인경우
new Array(1.2); // Error: Uncaught RangeError: Invalid array length
new Array(3); // [empty * 3]
Array(3); // [empty * 3]


// 1-2. param이 1개고 문자인경우
new Array('a'); // ['a']
Array('a'); // ['a']

// 1-3. param이 없는경우
new Array(); // []
Array(); // []

// 1-4. param이 여러개인경우(문자 or 정수)
new Array['t','e','s','t']; // ['t','e','s','t']
Array['t','e','s','t']; // ['t','e','s','t']

 

 

 

 

2. Array.from()

---

ES6 에서 도입된 Array.from 메서드는 유사 배열 객체(array-like object) or 이터러블 객체(반복 가능한 객체)를 인수로 전달 받아 배열로 변환.

• Array.from(arrayLike, mapFn(thisArg))
• return: Array instance
• MDN: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/from

Array.from() - JavaScript | MDN

Array.from('Tom'); // ['T', 'o', 'm']
Array.from([1,2,3]); // [1,2,3]

Array.from([1,2,3], x=> x+x); // [2,4,6]

 

Array.from 은 특정 길이의 배열을 만들어 연속된 수를 넣을 수도 있다.

// params 'v'는  value 로 찍어보면 undefined로 나온다. 이는 유사배열객체에 length값만 입력해주어서이다.
// 사용되지 않는 params는 '_' underscore로 표기 해도 됨!
Array.from({length: 5}, (v,i) => i); // [0,1,2,3,4]

Array.from({length: 길이}, Fuc(_, i){ //i 는 indexing});

=> {length: x}는 x 길이의 유사 배열 객체를 생성한다.

브라우저 콘솔에서  일반 배열의 값을 열어보면 인덱스와 값, length속성을 확인할 수 있다.

 

 

 

 

3. Array.of()

---

ES6에서 도입된 Array.of()는  인자의 수나 유형에 관계없이 전달된 인자를 요소로 갖는 배열을 생성한다. 

 

Array.of()와 Array생성자의 차이는?

Array.of(5)는 하나의 요소 5를 가진 배열을 생성하고,

Array(5)는 length가 5 즉, 빈 요소 5개를 가진 배열을 생성합니다. 

Array.of(5); // [5];
Array(5); // [empty x 5]

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/of

Array.of() - JavaScript | MDN

 

 

잘못된 정보에 대한 피드백은 언제나 환영입니다  (´▽`ʃƪ)♡