[JS] JavaScript 배열, 기초부터 2차원 배열까지 완벽 정리

 

 

JavaScript 배열 개념과 기본 사용법

JavaScript에서 배열은 여러 개의 값을 하나의 변수에 저장할 수 있는 특별한 객체입니다.
일반적으로 숫자, 문자열, 객체 등 다양한 타입의 데이터를 하나의 배열 안에 저장할 수 있어요.

 

const fruits = ['apple', 'banana', 'cherry'];
console.log(fruits); // ['apple', 'banana', 'cherry']

 

배열안에 직접 값을 지정하는 배열 리터럴 방식입니다.

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

 

Array 생성자를 사용하여 배열을 선언하는 방식입니다.

 

// 문자열을 배열로 변환
const strArray = Array.from('hello');
console.log(strArray); // ['h', 'e', 'l', 'l', 'o']

// 배열처럼 보이는 객체를 배열로 변환
const objArray = Array.from({ length: 5 }, (_, i) => i + 1);
console.log(objArray); // [1, 2, 3, 4, 5]

 

Array.from은 유사 배열 객체나 **반복 가능한 객체(iterable)**를 배열로 변환할 때 사용

 

 

정리

• 배열 리터럴: 가장 간단하고 일반적으로 사용되는 방법.
• Array 생성자: 특별히 빈 배열을 생성할 때 사용.
• Array.from: 유사 배열이나 반복 가능한 객체를 변환할 때 유용.

 

배열의 특징에는 크게 3가지가 있습니다.

const arr = [1, 2, 3];
arr.push(4); // 요소 추가
console.log(arr); // [1, 2, 3, 4]

 

1. 배열의 크기가 고정되지 않고 요소를 추가하거나 제거하면 크기가 변하는 동적 타입!

 

const arr = ['a', 'b', 'c'];
console.log(arr[0]); // 'a'

 

2. 0부터 시작하는 인덱스 기반 접근 방식

 

const mixedArray = [42, 'hello', { key: 'value' }];

 

3. 다양한 데이터 타입 지원

 

 

배열의 기본적인 특징을 보았는데요 본격적으로 배열에 대해서 알아보겠습니다~

 

---

 

 

 

 

배열 요소 접근 및 수정

const fruits = ['apple', 'banana', 'cherry'];
console.log(fruits[0]); // 'apple'
console.log(fruits[1]); // 'banana'
console.log(fruits[2]); // 'cherry'
console.log(fruits[3]); // undefined

 

배열을 인덱스 값으로 접근가능하고 해당하지 않은 배열에 접근했을 때는 undefined로 초기화됩니다.

 

 

 

const fruits = ['apple', 'banana', 'cherry'];
fruits[1] = 'blueberry';
console.log(fruits); // ['apple', 'blueberry', 'cherry']

 

해당배열에 접근해서 값을 할당하면 해당 배열 위치에 값이 변경됩니다. 자료형에 구속받지 않습니다!

 

 

 

const fruits = ['apple', 'banana', 'cherry'];
console.log(fruits.length); // 3

 

length메서드를 사용하여 배열의 길이를 알 수 있습니다. for문을 사용할 때 범위 설정용으로 많이 사용됩니다.

 

 

const fruits = ['apple', 'banana'];
fruits.push('cherry');
console.log(fruits); // ['apple', 'banana', 'cherry']

 

배열.push() 메서드를 활용하여 배열의 맨 뒤에 값을 추가할 수 있습니다.

 

 

const fruits = ['apple', 'banana', 'cherry'];
const removed = fruits.pop();
console.log(fruits); // ['apple', 'banana']
console.log(removed); // 'cherry'

 

배열.pop()을 활용하여 배열의 맨 뒤 값을 제거할 수 있고, 그 값을 변수에 할당 할 수 있습니다.

 

 

const fruits = ['banana', 'cherry'];
fruits.unshift('apple');
console.log(fruits); // ['apple', 'banana', 'cherry']

 

배열.unshift()값을 이용하여 배열의 맨 앞에 추가 할 수 있습니다.

 

 

const fruits = ['apple', 'banana', 'cherry'];
const removed = fruits.shift();
console.log(fruits); // ['banana', 'cherry']
console.log(removed); // 'apple'

 

배열.shift()값을 이용하여 배열의 맨 앞의 값을 제거하고 해당 값을 할당 할 수 있습니다.

 

 

 

 

 

 

---

2차원 배열 개념과 사용법

 

이차원 배열을 선언하는 방법에는 여러가지가 있지만 크게 두가지를 알려드리겠습니다.

const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];
console.log(matrix[0][1]); // 2 (첫 번째 행의 두 번째 요소)

 

 

const rows = 3;
const cols = 4;
const emptyMatrix = Array.from({ length: rows }, () => Array(cols).fill(0));
console.log(emptyMatrix);
// [
//   [0, 0, 0, 0],
//   [0, 0, 0, 0],
//   [0, 0, 0, 0]
// ]

 

코딩테스트 문제를 풀 때 위와 같은 방식으로 배열을 선언하고 많이들 풉니다.

 

 

 

 

1, 2차원 배열 선언과 활용법에 대해 알아보았습니다. 

추가적인 공부를 원하시는 분은 아래 링크로 들어가서 학습하시면 좋겠습니다! 

 

 

 

 

• [JavaScript] 자바스크립트 2차원 배열 선언 및 사용법
  젠트의 프로그래밍 세상
• JavaScript 2차원 배열 - 벨로그
  
  Velog
• javascript 1, 2차원 배열 반복문 처리 방법 (for, for in, for of, forEach)
  
  추천 : 네이버 블로그
• [JavaScript] 2차원 배열 - 효니 TIL
  
  효니 TIL
• 자바스크립트에서 2차원 배열 선언 및 사용 방법 | 현업 SW 개발...
  
  현업 SW 개발자의 연구 노트