자바스크립트의 배열

1. 배열이란?

배열(Array)이란 여러 개의 데이터를 순차적으로 나열한 자료구조입니다.
JavaScript의 배열은 다음과 같은 특징을 가지고 있습니다.

• 다양한 타입의 데이터를 하나의 배열에 저장 가능
• 배열의 크기가 동적 (필요에 따라 크기가 자동으로 조정)
• 인덱스 번호를 통해 각 요소에 접근 (0부터 시작)

let fruits = ['사과', '오렌지', '망고'];
let mixed = [1, '문자열', true, null, [2, 3]];

 

---

2. 배열 생성 방법

1) 리터럴 방식

let numbers = [1, 2, 3, 4, 5];
let emptyArray = [];

 

2) Array 생성자 방식

let arrayFruits1 = new Array(3); // 크기 지정 (빈 값)
let arrayFruits2 = new Array('사과', '오렌지', '망고'); // 초기값 지정

---

3. 배열 다루기

1) 요소 접근 및 수정

const sports = ['축구', '야구', '농구'];
console.log(sports[1]); // 야구

sports[2] = 'basketball'; // 수정
console.log(sports); // [ '축구', '야구', 'basketball' ]

 

 

2) 배열 길이 확인

console.log(sports.length); // 3
---배열의 크기를 임의로 늘리거나 줄일 수도 있다.---
sports.length = 5;
console.log(sports);//

 

위와 같이 배열의 크기를 임의로 늘리거나 줄일 수 있는데, 배열의 길이를 임의로 늘릴때는 empty items라고 콘솔에 표시되게 되며, 해당 개수만큼 반환된다.(ex.<2 empty items>)

---

4. 배열 탐색 및 확인

let snacks = ['칸쵸', '초코송이', '포테토칩'];

console.log(snacks.indexOf('초코송이')); // 1
console.log(snacks.includes('포테토칩')); // true

 

---

5. 배열 조작 (추가 & 삭제)

let fruits = ['Apple', 'Banana'];

fruits.push('Cherry'); // 추가
fruits.pop(); // 삭제
fruits.shift(); // 첫 요소 삭제
fruits.unshift('Mango'); // 첫 요소 추가

fruits.splice(1, 0, 'Strawberry'); // 중간 추가
fruits.splice(2, 1); // 중간 삭제

---

6. 배열 정렬

let fruits = ['Banana', 'Mango', 'Apple'];

console.log(fruits.sort()); // 오름차순
console.log(fruits.reverse()); // 내림차순

console.log(fruits.join(', ')); // 문자열 변환
console.log('사과,바나나,망고'.split(',')); // 배열 변환

 

---

7. 배열 메서드

 

1) map(): 새로운 배열 생성

let nums = [1, 2, 3];
let doubled = nums.map(n => n * 2);
console.log(doubled); // [2, 4, 6]

2) filter(): 조건에 맞는 요소만

let even = nums.filter(n => n % 2 === 0);
console.log(even); // [2]

3) forEach(): 반복 작업

nums.forEach(n => console.log(n));

---

8. 배열 복사와 참조(⭐)

1) 일반 자료형(값 복사)

let num1 = 10;
let num2 = num1;

num2 = 20;
console.log(num1); // 10 (영향 없음)
console.log(num2); // 20

2) 참조 자료형(주소 복사)

let array01 = [11, 22, 33];
let array02 = array01; // 주소 복사

array01[1] = 55;
console.log(array02); // [ 11, 55, 33 ] (같이 바뀜)

 

3)개별 요소 혹장을 위한 스프레드 연산자

let sports = ['축구', '야구', '농구'];
let copySports = [...sports]; // 독립적 복사

copySports[0] = 'soccer';
console.log(sports[0]); // '축구' (영향 없음)
console.log(copySports); // [ 'soccer', '야구', '농구' ]

4) 여러 요소를 하나의 형태로 결합하기위 한 스프레드 연산

let copy = ['배구', ...sports, '수영'];
console.log(copy); // [ '배구', '축구', '야구', '농구', '수영' ]

let mergeSports = [...sports, ...copy];
console.log(mergeSports); // 결합된 배열