JavaScript - 배열을 생성하는 방식이 4개나 있다구..

김민재·2021년 8월 3일

WeCode 키워드 심화 공부

TIL, Deep Javascript

목록 보기

13/22

*🔐Study Keyword :

✅배열을 🔑생성하는 4가지 방식과 익숙해지자!

1. 배열 리터럴
2. Array 생성자 함수
3. Array.of
4. Array.from

배열 생성

객체 처럼 배열도 다양한 생성 방식이 있는데 그중 가장 일반적이고 간편한 생성 방식이 배열 리터럴을 사용하는 것이다.

‣ 1. 배열 리터럴

-HOW TO USE❓

배열 리터럴은 0개 이상의 요소를 쉼표로 구분해 대괄호([])로 묶는다.

배열 리터럴은 객체 리터럴과 달리 프로퍼티 키가 없고 값(요소)만 존재한다.
<script>
const arr = [1, 2, 3];
console.log(arr.length); // 3
</script>

-배열 리터럴에 요소를 하나도 추가하지 않으면 length 프로퍼티(배열의 길이) 값이 0인 빈 배열이된다.
<script>
const arr = []; // 빈 배열
console.log(arr.length); // 0
</script>

배열 리터럴에 요소를 생략하면 희소 배열이 생성된다.
<script>
const arr = [1, , 3]; // 희소배열, 1번 인덱스 요소 생략
//희소 배열의 length 프로퍼티 값 > 배열의 실제 요소 개수 보다 언.제.나. 크다
console.log(arr.length); // 3
console.log(arr); // [1, empty, 3];
console.log(arr[1]); // undefined
</script>
-arr[1], undefined인 이유는 객체인 arr에 프로퍼티 키(인덱스)가 '1'인 프로퍼티가 존재하지 않기 때문이다.

‣ 2. Array 생성자 함수

-HOW TO USE❓

Object 생성자 함수를 통해 객체를 생성할 수 있듯 Array 생성자 함수를 통해 배열을 생성할 수도 있다.

Array 생성자 함수는 전달된 인수의 개수에 따라 다르게 동작한다.

case1> 전달된 인수가 1개이고 숫자인 경우 → length 프로퍼티 값 = 인수인 배열 생성

<script>
const arr = new Array(10); // 배열의 길이 10(=인수 값, 10)인 배열 생성
console.log(arr); // [empty * 10];
console.log(arr.length); // 10
</script>
이때 생성된 배열은 희소 배열로 length 프로퍼티 값이 0은 아니지만 실제 배열의 요소는 존재하지 않는다.

case2> 전달된 인수가 없는 경우 → 빈 배열을 생성해, 배열 리터럴 []과 같다.

<script>
const arr = new Array(); // []
</script>

case3> 전달된 인수가 2개 이상이거나 숫자가 아닌 경우 → 인수를 요소로 갖는 배열을 만든다.

<script>
// 전달된 인수 2개 이상이면 전달한 인수를 요소로 갖는 배열을 생성
new Array(1, 2, 3); // [1, 2, 3] 
// 전달된 인수 1개지만 숫자가 아니면 전달한 인수를 요소로 갖는 배열을 생성
const arr = new Array({}); // [{}]
</script>

case4> new 연산자와 함께 호출하지 않고 일반 함수로 호출할 경우 → Array 생성자 함수 내부에서 new.target을 확인해 배열을 생성하는 함수로 동작한다.

<script>
// new 연산자 생략가능, 전달된 인수 2개 이상이면 인수를 요소로 갖는 배열을 생성
Array(1, 2, 3); // [1, 2, 3] 
</script>

‣ 3. Array.of

-HOW TO USE❓

Array.of 메서드는 전달된 인수를 요소로 갖는 배열을 생성한다.

Array.of는 Array 생성자 함수와 달리 전달된 인수가 1개이고 숫자이더라도 인수를 요소로 갖는 배열을 생성한다.
<script>
// 전달된 인수가 1개이고 숫자더라도 인수를 요소로 갖느 배열을 생성한다.
Array.of(1); // [1]
Array.of(1, 2, 3); // [1, 2, 3] 
Array.of('string'); // ['string'] 
</script>

‣ 4. Array.from

-HOW TO USE❓

Array.from 메서드는 1)유사 배열 객체 또는 2)이터러블 객체를 인수로 전달받아 배열로 변환하여 반환한다.

<script>
// 1)유사 배열 객체를 변환하여 배열을 생성한다.
Array.from({ length: 2, 0: 'a', 1: 'b' }); // {'a', 'b'}
// 2)이터러블을 변환하여 배열을 생성한다. 문자열은 이터러블이다.
Array.from('string'); // ['s','t','r','i','n','g'] 
</script>

Array.from을 사용하면 두 번째 인수로 전달한 콜백함수를 통해 값을 만들면서 요소를 채울 수 있다.

Array.from 메서드는 두번째 인수로 전달한 콜백 함수에 첫 번째 인수에 의해 생성된 배열의 요소 값과 인덱스를 순차적으로 전달하면서 호출하고, 콜백 함수의 반환 값으로 구성된 배열로 반환한다.
<script>
// Array.from에 length만 존재하는 유사 배열 객체를 전달하면 undefined 요소로 채운다.
Array.from({ length: 3 }); // {undefined, undefined, undefined}
// Array.from은 두번째 인수로 전달한 콜백함수의 반환값으로 구성된 배열을 반환한다.
Array.from({ length: 3 }, (_, i) => i); // {0, 1, 2}
</script>

-WHAT IS❓

1)유사 배열 객체와 2)이터러블 객체?!

1)유사배열 객체란 마치 배열처럼 인덱스로 프로퍼티 값에 접근할 수 있고 length 프로퍼티를 갖는 객체를 말한다.

1)유사 배열 객체는 배열처럼 for문으로 순회가능 하다.
<script>
// 유사 배열 객체
const arrayLike = {
  '0' : 'apple',
  '1' : 'orange',
  '2' : 'banana',
  length: 3
};
// 유사 배열 객체는 마치 배열 처럼 for문 순회 가능
for(let i = 0; i< arrayLike.length; i++){
  console.log(arrayLike[i])
}
</script>