배열의 생성 방식

배열의 생성 방식

프로그래머스 문제를 풀면서 정말 재밌었는데, 배열이 들어가는 문제부터 다소 어렵다고 느껴짐…
그래서 TIL의 첫 번째 주제는 배열로 선택하게 되었슴니닷!

자바스크립트에서 배열이란?

• 배열은 자바스크립트에서 가장 중요한 데이터 구조 중 하나로, 여러 값을 하나의 변수에 저장할 수 있다.
• 배열은 숫자 인덱스를 사용하여 순서대로 값을 저장하고 액세스할 수 있다.

배열 생성 방법

배열의 생성 방법은 리터럴, 생성자, 빈 배열을 만드는 방법으로 총 3가지가 있습니다.

// 배열 리터럴
let z = ['a', 'b', 'c'];

// 배열 생성자
let numbers = new Array(1, 2, 3);

// 빈 배열
let empty = [];

문득 리터럴 방식과 생성자 방식에 대해 차이점이 무엇인지 궁금해졌고, 찾아보니 아래와 같았다.

배열의 생성 방식

3-1) 배열 리터럴 방식

let numbers = [1,2,3]

• 배열 리터럴은 배열을 생성하는 가장 간단하고 직관적인 방법임
• 대괄호 안에 요소를 직접 나열하여 배열을 생성
• 사용성이 간편하고 가독성이 높음

3-2) Array 생성자 방식

let numbers = new Array(1,2,3);

• Array 생성자를 사용하여 배열을 생성
• new Array()는 다양한 방식으로 호출될 수 있음 (길이가 지정된 빈 배열을 생성)
• 배열 요소를 인수로 전달하면 해당 요소들을 포함한 배열이 생성됨

3-3) 리터럴, 생성자 배열의 차이점

1. 동작의 차이 (인수가 하나일 경우)
   • Array 생성자를 하나의 숫자 인수와 함께 사용하면 그 숫자만큼의 길이를 가진 빈 배열을 생성한다.

   let numbers = new Array(3); // 길이가 3인 빈 배열을 생성합니다.
   console.log(numbers); // [ , , ]
   console.log(numbers.length); // 3
   

   • 배열 리터럴 방식은 항상 배열을 해당 요소들과 함께 즉시 생성한다.

   let numbers = [3];
   console.log(numbers); // [3]
   console.log(numbers.length); // 1
   

2. 가독성과 사용성
   • 배열 리터럴 방식은 직관적이고 더 간결해서 대 부분의 상황에서 선호하는 편
   • Array 생성자는 길이가 지정된 빈 배열을 생성할 때 사용 되는 것 같다.

3-4) 리터럴, 생성자 배열의 비교 예시 코드

// 배열 리터럴
let numbers01 = [1,2,3];
console.log(numbers01); // [1,2,3]
console.log(numbers01.length) // 3

// Array 생성자
let numbers02 = new Array(1,2,3);
console.log(numbers02); // [1,2,3]
console.log(numbers02.length) // 3

// 인수가 한 개일 경우
let numbers03 = new Array(3); // 길이가 3개인 빈 배열을 생성
console.log(numbers03) // [ , , ]
console.log(numbers03.length) // 3

마무리

• 배열 리터럴 방식은 직관적이고 일반적으로 많이 선호함
• Array 생성자 방식은 특정 상황에서 사용되며, 인수가 하나일 때 주의가 필요함 (실무에서 사용해본 적이 없어서 크게 와닿지 않지만 사용하게 되면 글에 추가할 예정!)