[JavaScript] 자바스크립트 | 배열 array

이 글은 드림코딩 유튜브 강의를 보며 학습한 내용을 정리한 JavaScript 복습 노트입니다.

'use strict';

// Array🎉 (배열)

// 1. Declaration (배열 선언)
const arr1 = new Array(); // 배열 생성자 사용
const arr2 = [1, 2]; // 배열 리터럴 사용 (일반적으로 더 많이 사용됨)

// 2. Index position (인덱스 위치)
const fruits = ['🍎', '🍌'];
console.log(fruits); // 배열 전체 출력
console.log(fruits.length); // 배열 길이 출력
console.log(fruits[0]); // 첫 번째 요소 출력 (🍎)
console.log(fruits[1]); // 두 번째 요소 출력 (🍌)
console.log(fruits[2]); // 없는 인덱스 접근 → undefined
console.log(fruits[fruits.length - 1]); // 마지막 요소 접근
console.clear();

// 3. Looping over an array (배열 순회하기)
// print all fruits (배열 모든 요소 출력)

// a. for문 사용
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

// b. for..of 사용 (ES6 문법)
for (let fruit of fruits) {
  console.log(fruit);
}

// c. forEach 사용 (콜백 함수)
fruits.forEach((fruit) => console.log(fruit));

// 4. Addition, deletion, copy (배열 추가, 삭제, 복사)

// push: add an item to the end (배열 끝에 요소 추가)
fruits.push('🍓', '🍑');
console.log(fruits);

// pop: remove an item from the end (배열 끝 요소 제거)
const poped = fruits.pop(); // 마지막 요소 저장 후 제거
fruits.pop();
console.log(fruits);

// unshift: add an item to the beginning (배열 앞에 요소 추가)
fruits.unshift('🍓', '🍋');
console.log(fruits);

// shift: remove an item from the beginning (배열 앞 요소 제거)
fruits.shift();
fruits.shift();
console.log(fruits);

// note!! shift, unshift are slower than pop, push
// (주의!! shift, unshift는 pop, push보다 성능이 느림)

// splice: remove an item by index position (특정 위치 요소 제거 및 추가)
fruits.push('🍓', '🍑', '🍋');
console.log(fruits);
fruits.splice(1, 1); // 인덱스 1의 요소 제거
console.log(fruits);
fruits.splice(1, 0, '🍏', '🍉'); // 인덱스 1 위치에 두 개의 요소 추가
console.log(fruits);

// combine two arrays (두 개의 배열 합치기)
const fruits2 = ['🍐', '🥥'];
const newFruits = fruits.concat(fruits2);
console.log(newFruits);

// 5. Searching (배열에서 특정 요소 찾기)
console.clear();
console.log(fruits);
console.log(fruits.indexOf('🍎')); // '🍎'의 인덱스 반환 (없으면 -1)
console.log(fruits.indexOf('🍉')); // '🍉'의 인덱스 반환
console.log(fruits.indexOf('🥥')); // 없는 요소는 -1 반환

// includes (요소 존재 여부 확인)
console.log(fruits.includes('🍉')); // true
console.log(fruits.includes('🥥')); // false

// lastIndexOf (마지막으로 등장한 인덱스 찾기)
console.clear();
fruits.push('🍎'); // '🍎' 추가
console.log(fruits);
console.log(fruits.indexOf('🍎')); // 첫 번째 '🍎'의 위치
console.log(fruits.lastIndexOf('🍎')); // 마지막 '🍎'의 위치

1. 배열

배열(Array)은 여러 개의 데이터를 순차적으로 저장하는 자료구조입니다.

JavaScript의 배열은 동적으로 크기가 변할 수 있으며, 다양한 데이터 타입을 포함할 수 있습니다.

2. 배열 선언 방법

• const arr1 = new Array(); → 배열 생성자 사용 (거의 사용되지 않음)
• const arr2 = [1, 2]; → 배열 리터럴 사용 (더 간결하고 일반적)

3. 배열 요소 접근

배열은 0부터 시작하는 인덱스를 사용하여 각 요소에 접근할 수 있습니다.

const fruits = ['🍎', '🍌'];
console.log(fruits[0]); // 🍎
console.log(fruits[1]); // 🍌
console.log(fruits[2]); // undefined (존재하지 않는 요소)
console.log(fruits[fruits.length - 1]); // 마지막 요소 접근

4. 배열 순회 방법

1. for 문: 고전적인 반복문
2. for..of 문: 요소 자체를 순회 (ES6 도입)
3. forEach() 메서드: 콜백 함수를 사용하여 배열 순회

fruits.forEach((fruit) => console.log(fruit));

5. 배열 조작

✅ 요소 추가 및 제거

• push() → 배열 끝에 요소 추가
• pop() → 배열 끝 요소 제거
• unshift() → 배열 앞에 요소 추가
• shift() → 배열 앞 요소 제거

fruits.push('🍓'); // ['🍎', '🍌', '🍓']
fruits.pop(); // ['🍎', '🍌']

✅ 특정 위치 요소 조작

• splice(start, deleteCount, item1, item2, ...) → 특정 위치의 요소 제거 및 추가

fruits.splice(1, 1, '🍏', '🍉');

• splice(1, 1, '🍏', '🍉')
  • 인덱스 1 위치에서 1개 요소 삭제 
  • 해당 위치에 '🍏', '🍉' 삽입.

✅ 배열 결합

• concat() → 두 개 이상의 배열을 결합하여 새 배열 반환

const allFruits = fruits.concat(fruits2);

6. 배열 검색

• indexOf(value) → 특정 요소의 첫 번째 인덱스 반환 (없으면 -1)
• includes(value) → 배열에 특정 요소가 있는지 확인 (true / false 반환)
• lastIndexOf(value) → 특정 요소의 마지막 인덱스 반환

console.log(fruits.includes('🍉')); // true