[자바스크립트] 배열 (Array)

자바스크립트 배열은 크게 두 가지 종류로 나눌 수 있습니다.

1. 리터럴 배열

리터럴 배열은 대괄호 []를 사용하여 직접 값을 나열하는 가장 간단한 방법입니다.

// 숫자 배열
const numbers = [1, 2, 3, 4, 5];

// 문자열 배열
const strings = ["Hello", "World", "!@#"];

// 혼합 배열
const mixedArray = [1, "two", 3.14, true];

2. 생성자 배열

생성자 배열은 new Array() 생성자를 사용하여 만듭니다.

// 빈 배열 생성
const emptyArray = new Array();

// 특정 길이의 빈 배열 생성 (초기화 안됨)
const prefilledArray = new Array(5);

// 특정 값으로 초기화된 배열 생성
const initializedArray = new Array(5).fill(0);

참고:

• 자바스크립트 배열은 동적으로 크기가 변경될 수 있습니다. 즉, 요소를 추가하거나 제거할 수 있습니다.
• 배열의 요소는 모든 데이터 타입일 수 있습니다. 숫자, 문자열, 불리언, 객체, 함수 등이 포함될 수 있습니다.
• 배열은 객체와 유사하지만, 중요한 차이점도 있습니다. 배열은 인덱스 기반이며, 객체는 키-값 기반입니다. 또한 배열은 일반적으로 동일한 데이터 타입의 요소로 구성되는 반면, 객체는 다양한 데이터 타입의 속성을 가질 수 있습니다.

다차원 배열

자바스크립트는 다차원 배열을 지원합니다. 즉, 배열 안에 배열을 포함할 수 있습니다.

// 2차원 배열 (행렬)
const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

// 3차원 배열
const cube = [
  [
    [1, 2, 3],
    [4, 5, 6]
  ],
  [
    [7, 8, 9],
    [10, 11, 12]
  ]
];

예제 코드

다음은 자바스크립트 배열을 사용하는 몇 가지 예제 코드입니다.

1. 배열 요소 접근 및 변경

const numbers = [1, 2, 3, 4, 5];

// 첫 번째 요소 출력
console.log(numbers[0]); // 1

// 마지막 요소 출력
console.log(numbers[numbers.length - 1]); // 5

// 세 번째 요소를 10으로 변경
numbers[2] = 10;
console.log(numbers); // [1, 2, 10, 4, 5]

2. for 루프를 사용한 배열 반복

const numbers = [1, 2, 3, 4, 5];

for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}

3. 배열 길이 확인

const numbers = [1, 2, 3, 4, 5];
console.log(numbers.length); // 5

4. 배열 값 검색

const numbers = [1, 2, 3, 4, 5];

배열 메서드

자바스크립트는 배열을 조작하는 데 사용할 수 있는 다양한 메서드를 제공합니다.

1. 요소 추가 및 제거

• push(): 배열 끝에 요소 추가

const numbers = [1, 2, 3];
numbers.push(4, 5);
console.log(numbers); // [1, 2, 3, 4, 5]

• pop(): 배열 끝에서 요소 제거

const numbers = [1, 2, 3, 4, 5];
const lastNumber = numbers.pop();
console.log(numbers); // [1, 2, 3, 4]
console.log(lastNumber); // 5

• shift(): 배열 처음에서 요소 제거

const numbers = [1, 2, 3, 4, 5];
const firstNumber = numbers.shift();
console.log(numbers); // [2, 3, 4, 5]
console.log(firstNumber); // 1

• unshift(): 배열 처음에 요소 추가

const numbers = [1, 2, 3, 4, 5];
numbers.unshift(0);
console.log(numbers); // [0, 1, 2, 3, 4, 5]

• splice(): 배열의 기존 요소를 삭제 또는 교체

const numbers = [1, 2, 3, 4, 5];
numbers.splice(2, 1)
console.log(numbers); // [1, 2, 4, 5];

2. 배열 복사 및 연결

• slice(): 배열의 일부 추출

const numbers = [1, 2, 3, 4, 5];
const slicedArray = numbers.slice(2, 5);
console.log(slicedArray); // [3, 4]

3. 배열 요소 찾기

• indexOf(): 배열에서 특정 요소의 첫 번째 인덱스 찾기

const numbers = [1, 2, 3, 4, 5];
const index = numbers.indexOf(3);
console.log(index); // 2 (3은 배열의 3번째 요소)

• includes(): 배열에 특정 요소가 포함되어 있는지 확인

const numbers = [1, 2, 3, 4, 5];
const hasThree = numbers.includes(3);
console.log(hasThree); // true
const hasSix = numbers.includes(6);
console.log(hasSix); // false

4. 배열 정렬 및 반복

• sort(): 배열 요소 정렬

const numbers = [5, 2, 4, 1, 3];
numbers.sort();
console.log(numbers); // [1, 2, 3, 4, 5]

• forEach(): 배열 요소마다 함수 실행

const numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(number) {
  console.log(number * 2);
});

5. join() 메서드: 배열 요소를 문자열로 연결합니다.

const numbers = [1, 2, 3, 4, 5];

// 기본 구분자 사용
const joinedString = numbers.join();
console.log(joinedString); // "1,2,3,4,5"

// 커스텀 구분자 사용
const joinedStringWithComma = numbers.join(",");
console.log(joinedStringWithComma); // "1,2,3,4,5"

// 빈 문자열 구분자 사용
const joinedStringWithSpace = numbers.join(" ");
console.log(joinedStringWithSpace); // "1 2 3 4 5"

6. reverse() 메서드: 배열 요소 순서를 뒤집습니다.

const numbers = [1, 2, 3, 4, 5];

numbers.reverse();
console.log(numbers); // [5, 4, 3, 2, 1]

7. fill() 메서드: 배열 요소를 특정 값으로 채웁니다.

const numbers = [1, 2, 3, 4, 5];

// 모든 요소를 0으로 채움
numbers.fill(0);
console.log(numbers); // [0, 0, 0, 0, 0]

// 특정 범위 내 요소를 채움
numbers.fill(10, 2, 4);
console.log(numbers); // [1, 2, 10, 10, 5]

8. filter() 메서드: 조건에 맞는 요소만 포함하는 새 배열을 생성합니다.

const numbers = [1, 2, 3, 4, 5];

// 짝수만 포함하는 새 배열 생성
const evenNumbers = numbers.filter(function(number) {
  return number % 2 === 0;
});
console.log(evenNumbers); // [2, 4]

// 3보다 큰 값만 포함하는 새 배열 생성
const numbersGreaterThanThree = numbers.filter(number => number > 3);
console.log(numbersGreaterThanThree); // [4, 5]

9. map() 메서드: 배열 요소를 변환하여 새 배열을 생성합니다.

const numbers = [1, 2, 3, 4, 5];

const squaredNumbers = numbers.map(number => number * number);
console.log(squaredNumbers); // [1, 4, 9, 16, 25]

const stringNumbers = numbers.map(number => String(number));
console.log(stringNumbers); // ["1", "2", "3", "4", "5"]

10. reduce() 메서드: 배열 요소들을 하나의 값으로 합산합니다.

const numbers = [1, 2, 3, 4, 5];

// 배열 요소들의 합 계산
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // 15

// 배열 요소들의 평균 계산
const average = numbers.reduce((accumulator, currentValue, currentIndex, array) => {
  if (currentIndex === array.length - 1) {
    return accumulator / array.length;
  } else {
    return accumulator + currentValue;
  }
}, 0);
console.log(average); // 3

11. some() 메서드: 조건에 맞는 요소가 하나라도 있는지 확인합니다.

const numbers = [1, 2, 3, 4, 5];

// 홀수가 하나라도 있는지 확인
const hasOddNumber = numbers.some(number => number % 2 !== 0);
console.log(hasOddNumber); // true

// 10보다 큰 값이 하나라도 있는지 확인
const hasNumberGreaterThanTen = numbers.some(number => number > 10);
console.log(hasNumberGreaterThanTen); // false

12. every() 메서드: 모든 요소가 조건을 충족하는지 확인합니다.

const numbers = [1, 2, 3, 4, 5];

// 모든 요소가 5보다 작은지 확인
const allLessThanFive = numbers.every(number => number < 5);
console.log(allLessThanFive); // false

// 모든 요소가 짝수인지 확인
const allEven = numbers.every(number => number % 2 === 0);
console.log(allEven); // false

13. find() 메서드: 조건에 맞는 첫 번째 요소를 찾아 반환합니다.

const numbers = [1, 2, 3, 4, 5];

// 첫 번째 홀수 찾기
const firstOddNumber = numbers.find(number => number % 2 !== 0);
console.log(firstOddNumber); // 1

// 10보다 큰 값 찾기
const numberGreaterThanTen = numbers.find(number => number > 10);
console.log(numberGreaterThanTen); // undefined (배열에 10보다 큰 값이 없음)

14. findIndex() 메서드: 조건에 맞는 첫 번째 요소의 인덱스를 찾아 반환합니다.

const numbers = [1, 2, 3, 4, 5];

// 첫 번째 홀수의 인덱스 찾기
const firstOddIndex = numbers.findIndex(number => number % 2 !== 0);
console.log(firstOddIndex); // 0

// 10보다 큰 값의 인덱스 찾기
const indexGreaterThanTen = numbers.findIndex(number => number > 10);
console.log(indexGreaterThanTen); // -1 (배열에 10보다 큰 값이 없음)

15. includes() 메서드: 특정 요소가 배열에 포함되어 있는지 확인합니다.

const numbers = [1, 2, 3, 4, 5];

// 배열에 3이 포함되어 있는지 확인
const hasThree = numbers.includes(3);
console.log(hasThree); // true

// 배열에 6이 포함되어 있는지 확인
const hasSix = numbers.includes(6);
console.log(hasSix); // false

16. forEach() 메서드: 배열 요소마다 함수를 한 번씩 실행합니다.

const numbers = [1, 2, 3, 4, 5];

// 각 요소를 출력
numbers.forEach(number => console.log(number));

17. concat() 메서드: 두 개 이상의 배열을 연결하여 새로운 배열을 만듭니다.

const numbers1 = [1, 2, 3];
const numbers2 = [4, 5, 6];

const combinedArray = numbers1.concat(numbers2);
console.log(combinedArray); // [1, 2, 3, 4, 5, 6]

18. copyWithin() 메서드: 배열의 일부를 다른 위치로 복사합니다.

const numbers = [1, 2, 3, 4, 5];

// 2번째 인덱스부터 4번째 인덱스 이전까지의 요소를 0번째 인덱스부터 시작하여 복사
numbers.copyWithin(0, 2, 4);
console.log(numbers); // [3, 4, 5, 4, 5]

19. entries() 메서드: 배열 요소를 키-값 쌍으로 구성된 이터레이터 객체를 반환합니다.

const numbers = [1, 2, 3, 4, 5];

const entriesIterator = numbers.entries();

for (const [index, value] of entriesIterator) {
  console.log(`index: ${index}, value: ${value}`);
}

"index: 0, value: 1"
"index: 0, value: 2"
"index: 0, value: 3"
"index: 0, value: 4"
"index: 0, value: 5"

20. keys() 메서드: 배열 요소의 인덱스를 차례대로 반환하는 이터레이터 객체를 반환합니다.

const numbers = [1, 2, 3, 4, 5];

const keysIterator = numbers.keys();

for (const index of keysIterator) {
  console.log(`index: ${index}`);
}

"index: 0"
"index: 1"
"index: 2"
"index: 3"
"index: 4"

21. values() 메서드: 배열 요소를 차례대로 반환하는 이터레이터 객체를 반환합니다.

const numbers = [1, 2, 3, 4, 5];

const valuesIterator = numbers.values();

for (const value of valuesIterator) {
  console.log(`value: ${value}`);
}

22. toLocaleString() 메서드: 배열 요소를 로케일 기반 문자열 표현으로 반환합니다.

const numbers = [1.23, 4.56, 7.89];

console.log(numbers.toLocaleString()); // "1.23, 4.56, 7.89"
console.log(numbers.toLocaleString('ko-KR')); // "1.23, 4.56, 7.89"

23. sortOn() 메서드: 배열을 원하는 속성을 기준으로 정렬합니다.

const products = [
  { name: "Product A", price: 100 },
  { name: "Product B", price: 50 },
  { name: "Product C", price: 200 }
];

// 가격 기준으로 오름차순 정렬
products.sortOn("price");
console.log(products); // [{ name: "Product B", price: 50 }, { name: "Product A", price: 100 }, { name: "Product C", price: 200 }]

// 이름 기준으로 내림차순 정렬
products.sortOn("name", "desc");
console.log(products); // [{ name: "Product C", price: 200 }, { name: "Product B", price: 50 }, { name: "Product A", price: 100 }]

24. flat() 메서드: 다차원 배열을 1차원 배열로 평평하게 만듭니다.

const nestedArray = [1, [2, 3], 4, [[5, 6]]];

const flattenedArray = nestedArray.flat();
console.log(flattenedArray); // [1, 2, 3, 4, 5, 6]

25. flatMap() 메서드: 다차원 배열을 평평하게 만들고 각 요소를 변환합니다.

const nestedArray = [1, [2, 3], 4, [[5, 6]]];

const flattenedAndTransformedArray = nestedArray.flatMap(element => {
  if (Array.isArray(element)) {
    return element.map(num => num * 2);
  } else {
    return element;
  }
});
console.log(flattenedAndTransformedArray); // [1, 4, 10, 12]

26. lastIndexOf() 메서드: 배열에서 특정 요소의 마지막 인덱스를 찾아 반환합니다.

const numbers = [1, 2, 3, 1, 4, 5];

const lastIndexOfOne = numbers.lastIndexOf(1);
console.log(lastIndexOfOne); // 3 (1이 마지막으로 나타나는 인덱스)

27. isArray() 메서드: 값이 배열인지 확인합니다.

const array = [1, 2, 3];
const number = 4;
const string = "hello";

console.log(Array.isArray(array)); // true
console.log(Array.isArray(number)); // false
console.log(Array.isArray(string)); // false

28. Array.from() 메서드: 이터레이터 객체나 유사 배열 객체를 기반으로 새로운 배열을 만듭니다.

const set = new Set([1, 2, 3]);
const map = new Map([[1, "one"], [2, "two"]]);

const arrayFromSet = Array.from(set);
console.log(arrayFromSet); // [1, 2, 3] (순서는 보장되지 않음)

const arrayFromMap = Array.from(map.keys());
console.log(arrayFromMap); // [1, 2]