[ javascript ] 08. Array객체

Array 배열객체

 

 

array

 

속성

속성	설명	mdn
length	배열의 개수	바로가기

 

 

메서드

메소드	설명	mdn
push()	배열의 마지막에 추가하고 배열의 총길이를 반환	바로가기
pop()	배열의 가장 마지막 요소를 제거하고, 제거된 요소를 반환	바로가기
shift()	배열의 가장 첫 요소를 제거하고, 그 제거된 요소를 반환	바로가기
unshift()	배열의 가장 앞에 추가하고, 배열의 총 길이를 반환	바로가기
reverse()	배열 요소의 순서를 전부 반대로 교체	바로가기
sort()	배열 요소들을 알파벳 순서에 따라 정렬	바로가기
toString()	배열의 모든 요소를 하나의 문자열로 반환	바로가기
slice()	시작부터 종료 바로 앞까지의 모든 배열 요소를 추출하여 새로운 배열을 반환	바로가기
splice()	배열 요소를 제거하거나 새로운 배열 요소를 추가하여 배열의 내용을 변경	바로가기
concat()	배열의 뒤에 인수로 전달받은 배열을 합쳐서 만든 새로운 배열을 반환	바로가기
indexOf()	배열 요소가 처음으로 등장하는 위치의 인덱스를 반환	바로가기
join()	배열의 모든 요소를 하나의 문자열로 반환	바로가기
forEach()	배열의 모든 요소에 반복적으로 명시된 콜백 함수를 실행	바로가기
map()	배열의 모든 요소에 대하여 반복적으로 명시된 콜백 함수를 실행한 후, 결과를 새로운 배열로 반환	바로가기
filter()	배열의 모든 요소에 대하여 반복적으로 명시된 콜백 함수를 실행한 후, 그 결과값이 true인 것들만 새로운 배열에 담아 반환	바로가기
every()	배열을 반복적으로 명시된 콜백 함수를 실행한 후, 그 결값이 모두 true일 때에만 true를 반환	바로가기
some()	배열을 반복적으로 명시된 콜백 함수를 실행한 후, 그 결값이 g하나라도 true일 때에만 true를 반환	바로가기
find()	주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환합니다. 그런 요소가 없다면 undefined를 반환	바로가기
findIndex()	주어진 판별 함수를 만족하는 배열의 첫 번째 요소에 대한 인덱스를 반환합니다. 만족하는 요소가 없으면 -1을 반환	바로가기
from()	유사 배열 객체(array-like object)나 반복 가능한 객체(iterable object)를 얕게 복사해 새로운Array 객체	바로가기
isArray()	인자가 Array인지 판별	바로가기
includes()	배열이 특정 요소를 포함하고 있는지 판별	바로가기
reduce()	배열의 각 요소에 대해 주어진 리듀서 (reducer) 함수를 실행하고, 하나의 결과값을 반환합니다.	바로가기
at()	정숫값을 받아 해당 인덱스에 있는 항목을 반환하며, 양수와 음수를 사용	바로가기

 

 

 

1) push()

 

배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환

push 메서드는 배열 끝에 여러 값을 추가합니다.

const animals = ['pigs', 'goats', 'sheep'];

const count = animals.push('cows');
console.log(count);
// output: 4
console.log(animals);
// output: Array ["pigs", "goats", "sheep", "cows"]

animals.push('chickens', 'cats', 'dogs');
console.log(animals);
// output: Array ["pigs", "goats", "sheep", "cows", "chickens", "cats", "dogs"]

 

2) pop()

 

배열에서 마지막 요소를 제거하고 그 요소를 반환합니다.

배열에서 제거한 요소. 빈 배열의 경우 undefined를 반환합니다.

const plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato'];

console.log(plants.pop());
// Expected output: "tomato"

console.log(plants);
// Expected output: Array ["broccoli", "cauliflower", "cabbage", "kale"]

plants.pop();

console.log(plants);
// Expected output: Array ["broccoli", "cauliflower", "cabbage"]

 

3) shift()

 

배열에서 첫 번째 요소를 제거하고, 제거된 요소를 반환

const array1 = [1, 2, 3];
const firstElement = array1.shift();
console.log(array1);
// Expected output: Array [2, 3]
console.log(firstElement);
// Expected output: 1

 

4) unshift()

 

새로운 요소를 배열의 맨 앞쪽에 추가

const array1 = [1, 2, 3];

console.log(array1.unshift(4, 5));
// Expected output: 5

console.log(array1);
// Expected output: Array [4, 5, 1, 2, 3]

 

5) indexOf()

 

배열에서 지정된 요소를 찾을 수 있는 첫 번째 인덱스를 반환하고 존재하지 않으면 -1을 반환

const beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];

console.log(beasts.indexOf('bison'));
// Expected output: 1

// Start from index 2
console.log(beasts.indexOf('bison', 2));
// Expected output: 4

console.log(beasts.indexOf('giraffe'));
// Expected output: -1

 

 

6) includes()

배열의 항목에 특정 값이 포함되어 있는지를 판단하여 적절히 true 또는 false를 반환합니다.

 

const result = array.includes(valueToFind[, fromIndex]);

 

 

• valueToFind: 배열에서 찾고자 하는 요소.
• fromIndex: 검색을 시작할 인덱스. 기본값은 0입니다. 음수 값은 배열의 끝에서부터의 오프셋을 나타냅니다.

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

console.log(array.includes(3)); // true
console.log(array.includes(6)); // false

 

 

7) slice()

 

배열의 begin 부터 end 까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환합니다. 원본 배열은 바뀌지 않습니다.

const newArray = array.slice(start, end);

 

 

• start: 배열에서 잘라낼 시작 인덱스입니다. 기본값은 0입니다.
• end: 배열에서 잘라낼 끝 인덱스(포함되지 않음)입니다. 기본값은 배열의 길이입니다.

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

const slicedArray1 = array.slice(1, 3);
console.log(slicedArray1); // [2, 3]

const slicedArray2 = array.slice(2);
console.log(slicedArray2); // [3, 4, 5]

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

 

 

8) splice()

배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경합니다.

array.splice(start, deleteCount[, item1[, item2[, ...]]])

 

 

• start: 배열의 변경을 시작할 인덱스입니다. 음수 값은 배열의 끝에서부터 요소를 세는 데 사용됩니다.
• deleteCount: 배열에서 제거할 요소의 수입니다. 0이면 요소를 제거하지 않습니다.
• item1, item2, ...: 배열에 추가할 요소들입니다. 생략하면 아무 요소도 추가되지 않습니다.

 

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

// 인덱스 2부터 2개의 요소 삭제
const removed = array.splice(2, 2);

console.log(array);   // [1, 2, 5]
console.log(removed); // [3, 4]

 

9) concat()

 

두 개 이상의 배열을 병합하는 데 사용됩니다. 이 메서드는 기존 배열을 변경하지 않고, 새 배열을 반환합니다.

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);

console.log(array3);
// Expected output: Array ["a", "b", "c", "d", "e", "f"]

 

10) sort()

 

배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환합니다. 정렬은 stable sort가 아닐 수 있습니다. 

기본 정렬 순서는 문자열의 유니코드 코드 포인트를 따릅니다. 

원본 배열이 정렬

const months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);
// Expected output: Array ["Dec", "Feb", "Jan", "March"]

const array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1);
// Expected output: Array [1, 100000, 21, 30, 4]

 

 

 

• 양수: 첫 번째 인수가 두 번째 인수보다 큰 경우
• 음수: 첫 번째 인수가 두 번째 인수보다 작은 경우
• 0: 두 인수가 같은 경우

 

 

* 오름차순정렬

function compare(a, b) {
  if (a > b ) {
    return 1;
  }
  if (a < b ) {
    return -1;
  }
  // a must be equal to b
  return 0;
}

 

 

* 내림차순 정렬

function compare(a, b) {
  if (a > b ) {
    return -1;
  }
  if (a < b ) {
    return 1;
  }
  // a must be equal to b
  return 0;
}

 

 

* 오름차순 유형

function compareNumbers(a, b) {
  return a - b;
}

 

 

* 내림차순 유형

function compareNumbers(a, b) {
  return b - a;
}

 

 

 

예) 날짜순으로 정렬하기 

let datesArray = [new Date('2024-03-20'), new Date('2024-03-22'), new Date('2024-03-21')];

// 배열을 날짜순으로 정렬
datesArray.sort(function (a, b) {
    return a - b; // a와 b를 비교하여 정렬
});

for (let item of datesArray) {
    console.log(item.toDateString());
}

 

map을 이용한 새로운 배열

let dateStringArray = ['2024-03-20', '2024-03-22', '2024-03-21'];

let dateObjectsArray = dateStringArray.map(function (dateString) {
    return new Date(dateString);
});

dateObjectsArray.sort(function (a, b) {
    return a - b;
});

console.log(dateObjectsArray);

 

 

11) join()

 

배열의 모든 요소를 연결해 하나의 문자열로 만듭니다.

const elements = ['Fire', 'Air', 'Water'];

console.log(elements.join());
// Expected output: "Fire,Air,Water"

console.log(elements.join(''));
// Expected output: "FireAirWater"

console.log(elements.join('-'));
// Expected output: "Fire-Air-Water"

 

 

12) forEach()

 

각 배열 요소에 대해 제공된 함수를 한 번씩 실행합니다.

 

array.forEach(callback(currentValue[, index[, array]])[, thisArg])

 

 

• callback: 배열의 각 요소에 대해 실행할 함수. 세 개의 인수를 가집니다:
  • currentValue: 처리할 현재 요소.
  • index: 처리할 현재 요소의 인덱스. (Optional)
  • array: forEach를 호출한 배열. (Optional)
• thisArg: callback을 실행할 때 this로 사용할 값. (Optional)

 

 

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

numbers.forEach(function(number) {
  console.log(number);
});
// 출력: 1, 2, 3, 4, 5

const array1 = ['a', 'b', 'c'];

array1.forEach((element) => console.log(element));

// Expected output: "a"
// Expected output: "b"
// Expected output: "c"

 

 

13) map()

 

배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.

 

const newArray = array.map(callback(element[, index[, array]])[, thisArg])

 

 

• callback: 배열의 각 요소에 대해 실행할 함수. 세 개의 인수를 가집니다:
  • element: 처리할 현재 요소.
  • index: 처리할 현재 요소의 인덱스. (Optional)
  • array: map을 호출한 배열. (Optional)
• thisArg: callback을 실행할 때 this로 사용할 값. (Optional)

 

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

const doubled = numbers.map(function(number) {
  return number * 2;
});

console.log(doubled); // [2, 4, 6, 8, 10]

 

const array1 = [1, 4, 9, 16];

// Pass a function to map
const map1 = array1.map((x) => x * 2);

console.log(map1);
// Expected output: Array [2, 8, 18, 32]

 

 

14) filter()

 

주어진 배열의 일부에 대한 얕은 복사본을 생성하고, 주어진 배열에서 제공된 함수에 의해 구현된 테스트를 통과한 요소로만 필터링합니다.

 

const newArray = array.filter(callback(element[, index[, array]])[, thisArg])

 

 

• callback: 배열의 각 요소에 대해 실행할 함수. 세 개의 인수를 가집니다:
  • element: 처리할 현재 요소.
  • index: 처리할 현재 요소의 인덱스. (Optional)
  • array: filter를 호출한 배열. (Optional)
• thisArg: callback을 실행할 때 this로 사용할 값. (Optional)

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

const evenNumbers = numbers.filter(function(number) {
  return number % 2 === 0;
});

console.log(evenNumbers); // [2, 4, 6]

 

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter((word) => word.length > 6);

console.log(result);
// Expected output: Array ["exuberant", "destruction", "present"]

 

15) find()

 

주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환합니다. 그런 요소가 없다면 undefined를 반환합니다.

 

const foundElement = array.find(callback(element[, index[, array]])[, thisArg])

 

 

• callback: 배열의 각 요소에 대해 실행할 함수. 세 개의 인수를 가집니다:
  • element: 처리할 현재 요소.
  • index: 처리할 현재 요소의 인덱스. (Optional)
  • array: find를 호출한 배열. (Optional)
• thisArg: callback을 실행할 때 this로 사용할 값. (Optional)

 

 

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

const firstEvenNumber = numbers.find(function(number) {
  return number % 2 === 0;
});

console.log(firstEvenNumber); // 2

 

const array1 = [5, 12, 8, 130, 44];

const found = array1.find((element) => element > 10);

console.log(found);
// Expected output: 12

 

16) findIndex()

 

주어진 판별 함수를 만족하는 배열의 첫 번째 요소에 대한 인덱스를 반환합니다. 만족하는 요소가 없으면 -1을 반환합니다.

const array1 = [5, 12, 8, 130, 44];

const isLargeNumber = (element) => element > 13;

console.log(array1.findIndex(isLargeNumber));
// Expected output: 3

 

 

17) reduce()

 

 

array.reduce(callback[, initialValue])

 

• callback: 각 요소에 대해 실행할 함수. 네 개의 인수를 가집니다:
  • accumulator: 누산기. 콜백의 반환값을 누적합니다.
  • currentValue: 처리할 현재 요소.
  • currentIndex: 처리할 현재 요소의 인덱스. (Optional)
  • array: reduce()를 호출한 배열. (Optional)
• initialValue: 초기값. (Optional)

 

 

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

const sum = numbers.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);

console.log(sum); // 15

 

 

19) at()

정숫값을 받아 해당 인덱스에 있는 항목을 반환하며, 양수와 음수를 사용할 수 있습니다. 음의 정수는 배열의 마지막 항목부터 거슬러 셉니다.

 

const array = [10, 20, 30, 40, 50];

// 양수 인덱스
console.log(array.at(0)); // 10
console.log(array.at(2)); // 30

// 음수 인덱스
console.log(array.at(-1)); // 50 (마지막 요소)
console.log(array.at(-3)); // 30

 

 

20) some()

배열 안의 어떤 요소라도 주어진 판별 함수를 적어도 하나라도 통과하는지 테스트합니다. 만약 배열에서 주어진 함수가 true을 반환하면 true를 반환합니다. 그렇지 않으면 false를 반환합니다. 이 메서드는 배열을 변경하지 않습니다.

 

const result = array.some(callback(element[, index[, array]])[, thisArg])

 

 

• callback: 배열의 각 요소에 대해 실행할 함수. 세 개의 인수를 가집니다:
  • element: 처리할 현재 요소.
  • index: 처리할 현재 요소의 인덱스. (Optional)
  • array: some을 호출한 배열. (Optional)
• thisArg: callback을 실행할 때 this로 사용할 값. (Optional)

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

const hasEvenNumber = numbers.some(function(number) {
  return number % 2 === 0;
});

console.log(hasEvenNumber); // true

 

 

 

21) every()

 

배열의 모든 요소가 제공된 함수로 구현된 테스트를 통과하는지 테스트합니다. 이 메서드는 불리언 값을 반환합니다.

 

const result = array.every(callback(element[, index[, array]])[, thisArg])

 

 

• callback: 배열의 각 요소에 대해 실행할 함수. 세 개의 인수를 가집니다:
  • element: 처리할 현재 요소.
  • index: 처리할 현재 요소의 인덱스. (Optional)
  • array: every를 호출한 배열. (Optional)
• thisArg: callback을 실행할 때 this로 사용할 값. (Optional)

const numbers = [2, 4, 6, 8, 10];

const allEven = numbers.every(function(number) {
  return number % 2 === 0;
});

console.log(allEven); // true

 

 

 

22) flat()

 

 모든 하위 배열 요소가 지정된 깊이까지 재귀적으로 연결된 새 배열을 생성합니다.

const newArray = array.flat([depth]);

 

const arr1 = [1, 2, [3, 4]];
const flatArr1 = arr1.flat();

console.log(flatArr1); // [1, 2, 3, 4]

 

 

23) Array.from()

 

유사 배열 객체(array-like object) 또는 반복 가능한 객체(iterable object)를 얕게 복사하여 새로운 배열을 만듭니다. 이 메서드는 다양한 자료 구조를 배열로 변환할 때 유용합니다.

 

Array.from(arrayLike[, mapFn[, thisArg]])

 

 

• arrayLike: 배열로 변환할 유사 배열 객체 또는 반복 가능한 객체.
• mapFn: 배열의 모든 요소에 대해 호출할 맵핑 함수. (Optional)
• thisArg: mapFn을 실행할 때 this로 사용할 값. (Optional)

const str = "Hello";
const arr = Array.from(str);

console.log(arr); // ['H', 'e', 'l', 'l', 'o']

 

 

24) fill()

배열의 모든 요소를 지정된 값으로 채웁니다. 이 메서드는 기존 배열을 변경하며, 새로운 배열을 생성하지 않습니다.

 

arr.fill(value[, start[, end]])

 

 

• value: 배열을 채울 값.
• start (선택): 시작 인덱스. 기본값은 0입니다.
• end (선택): 끝 인덱스 (이 인덱스는 제외됨). 기본값은 배열의 길이입니다.

let arr = [1, 2, 3, 4, 5];
arr.fill(0);
console.log(arr); // [0, 0, 0, 0, 0]

 

 

 

유사 배열 객체

유사 배열 객체(array-like object)는 배열처럼 인덱스와 length 속성을 가지지만, 실제 배열은 아닌 객체를 의미합니다.

이러한 객체는 배열 메서드를 직접 사용할 수 없지만, 배열로 변환하면 배열 메서드를 사용할 수 있습니다.

 

유사 배열 객체의 특징

1. 인덱스 프로퍼티: 배열과 마찬가지로 인덱스를 통해 요소에 접근할 수 있습니다.
2. length 속성: 배열의 길이를 나타내는 length 속성을 가지고 있습니다.
3. Array.prototype 메서드 없음: 배열이 아니기 때문에 배열 메서드를 직접 사용할 수 없습니다.