[javascript] 배열 2 / 배열 생성 방식 (리터럴, new Array, Array.of, Array.from, 전개 연산자)

1. 배열 리터럴(Literal) 방식

• 가장 흔히 사용되고, 가장 간단한 방법.
• 배열 길이는 요소 개수에 따라 자동 결정.
• 요소 타입은 혼합 가능: 숫자, 문자열, 객체, 함수, 다른 배열 등.
• 배열 내부는 0부터 시작하는 인덱스로 접근 가능.

장점

• 직관적
• 빠르고 읽기 쉬움
• for..of, map, filter 등 반복문과 함께 사용하기 좋음

// [문법]
const 배열이름 = [요소1, 요소2, ...];

const fruits = ["사과", "바나나", "체리"];

console.log(fruits[0]); // "사과"
console.log(fruits[fruits.length - 1]); // "체리"

---

2. Array 생성자 사용

• new Array() 로 배열 생성
• new Array(요소1, 요소2, ...) → 배열 생성, 요소 포함
• new Array(숫자) → 배열 길이만 지정
  • 요소는 아직 빈 슬롯(empty slot) 상태
  • 반복 메서드에서 주의 필요 (forEach 등은 건너뜀)
  • 요소를 추가하려면 push()나 인덱스로 할당 필요

// [문법 - 요소(초기값)를 넣는 경우]
const 배열이름 = new Array(요소1, 요소2, ...);

// [문법 - 길이만 지정하는 경우]
const 배열이름 = new Array(길이);

const numbers = new Array(1, 2, 3, 4);
const emptyArray = new Array(5);

// ex) 배열 길이만 지정한 상태일때,요소는 빈 슬롯 상태임
const arr = new Array(3);
arr.forEach(el => console.log(el)); // 출력 없음

---

3. Array.of() 사용

• 숫자 하나라도 요소로 배열에 넣음
• 일관된 방식으로 배열 생성 가능, 숫자 하나일 때 혼동 방지
• new Array(숫자)와 다른 점: new Array(7) → 길이 7, Array.of(7) → 요소 7

// [문법]
const 배열이름 = Array.of(값1, 값2, ...);

// 숫자 하나를 요소로 배열 생성
const 배열1 = Array.of(7); // [7]

// 여러 값
const 배열2 = Array.of(1, 2, 3); // [1, 2, 3]

---

4. Array.from() 사용

• 배열이 아닌 iterable 객체(문자열, Set, Map 등)나 유사 배열 객체(length 가진 객체)를 배열로 변환할 때 유용
• 두 번째 인자로 map 함수 사용 가능 → 배열 생성과 동시에 값 변환
• 주로 DOM NodeList → 배열 변환 시 많이 사용

// [문법]
const 배열이름 = Array.from(변환할대상 [, map함수]);

// ex) 문자열을 배열로 변환
Array.from("hello"); // ["h","e","l","l","o"]

// ex) 2번째 인자로 map 함수 활용
Array.from([1, 2, 3], x => x * 2); // [2, 4, 6]

// ex) DOM NodeList를 배열 변환
const divs = document.querySelectorAll("div");
const divArray = Array.from(divs);

---

5. 전개 연산자(...) (Spread Operator) 사용

• 기존 배열이나 iterable 객체를 풀어서 새 배열 생성
• 배열 복사 및 확장 시 유용
• 기존 배열을 수정하지 않고 새로운 배열 생성 가능 → 불변성 유지

// [문법]
const 새배열 = [...기존배열, 추가값1, 추가값2, ...];

// ex) 배열 확장
const oldArr = [1, 2, 3];
const newArr = [...oldArr, 4, 5]; // [1,2,3,4,5]

// ex) 배열 복사
const arr1 = [1,2,3];
const arr2 = [...arr1];
arr2.push(4);
console.log(arr1); // [1,2,3] 원본은 그대로
console.log(arr2); // [1,2,3,4]

 

---

References

[javascript] 유사배열

[javascript] 전개 연산자(Spread Operator)