JavaScript의 배열(Array)의 모든 함수들

• push(): 배열의 끝에 하나 이상의 요소를 추가합니다.

const fruits = ['apple', 'banana'];

fruits.push('orange');
console.log(fruits); // ['apple', 'banana', 'orange']

fruits.push('grape', 'mango');
console.log(fruits); // ['apple', 'banana', 'orange', 'grape', 'mango']

• pop(): 배열의 마지막 요소를 제거하고 반환합니다.

const fruits = ['apple', 'banana', 'orange'];

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

• unshift(): 배열의 시작 부분에 하나 이상의 요소를 추가합니다.

const fruits = ['apple', 'banana'];

fruits.unshift('orange');
console.log(fruits); // ['orange', 'apple', 'banana']

fruits.unshift('grape', 'kiwi');
console.log(fruits); // ['grape', 'kiwi', 'orange', 'apple', 'banana']

• shift(): 배열의 첫 번째 요소를 제거하고 반환합니다.

const fruits = ['apple', 'banana', 'orange'];

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

• concat(): 두 개 이상의 배열을 합쳐 새로운 배열을 생성합니다.

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const array3 = ['a', 'b', 'c'];

const mergedArray = array1.concat(array2, array3);
console.log(mergedArray); // [1, 2, 3, 4, 5, 6, 'a', 'b', 'c']

• join(): 배열의 모든 요소를 문자열로 결합합니다.

const array = ['Hello', 'World', '!'];

const joinedString = array.join(' ');
console.log(joinedString); // 'Hello World !'

• slice(): 배열의 일부분을 추출하여 새로운 배열을 반환합니다.

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

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

• splice(): 배열에서 요소를 추가/제거하거나 대체합니다.

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

// 요소 제거
const removedElements = array.splice(2, 2);
console.log(array); // [1, 2, 5]
console.log(removedElements); // [3, 4]

// 요소 추가
array.splice(2, 0, 6, 7);
console.log(array); // [1, 2, 6, 7, 5]

• indexOf(): 배열에서 특정 요소의 첫 번째 인덱스를 반환합니다.

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

console.log(array.indexOf(3)); // 2
console.log(array.indexOf(6)); // -1
console.log(array.indexOf(2, 2)); // -1

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

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

console.log(array.lastIndexOf(3)); // 4
console.log(array.lastIndexOf(6)); // -1
console.log(array.lastIndexOf(3, 3)); // 2

• includes(): 배열이 특정 요소를 포함하는지 여부를 확인합니다.

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

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

• reverse(): 배열의 순서를 역순으로 변경합니다.

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

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

array.reverse();

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

• sort(): 배열을 정렬합니다.

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

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

// 기본 정렬
array.sort();

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

// 내림차순 정렬
array.sort((a, b) => b - a);

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

• forEach(): 배열의 각 요소에 대해 주어진 함수를 실행합니다.

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

// 각 요소에 대해 콘솔에 값을 출력하는 콜백 함수
array.forEach((value, index, array) => {
  console.log(`Value: ${value}, Index: ${index}, Array: ${array}`);
});

// 출력 결과:
// Value: 1, Index: 0, Array: 1,2,3,4,5
// Value: 2, Index: 1, Array: 1,2,3,4,5
// Value: 3, Index: 2, Array: 1,2,3,4,5
// Value: 4, Index: 3, Array: 1,2,3,4,5
// Value: 5, Index: 4, Array: 1,2,3,4,5

• map(): 배열의 각 요소에 대해 주어진 함수를 호출한 결과로 새로운 배열을 생성합니다.

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

// 각 요소를 제곱한 새로운 배열 생성
const squaredArray = array.map((value, index, array) => {
  return value * value;
});

console.log(squaredArray); // [1, 4, 9, 16, 25]

• filter(): 주어진 함수의 조건을 만족하는 요소로 이루어진 새로운 배열을 생성합니다.

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

// 짝수만 필터링하여 새로운 배열 생성
const evenArray = array.filter((value, index, array) => {
  return value % 2 === 0;
});

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

• reduce(): 배열의 각 요소에 대해 주어진 함수를 사용하여 단일 값으로 축소합니다.

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

// 배열의 모든 요소를 누적하여 합산
const sum = array.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
}, 0);

console.log(sum); // 15

• some(): 배열의 요소 중 하나라도 주어진 함수의 조건을 만족하는지 확인합니다.

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

// 배열에 짝수가 있는지 확인
const hasEvenNumber = array.some((element) => {
  return element % 2 === 0;
});

console.log(hasEvenNumber); // true

• every(): 배열의 모든 요소가 주어진 함수의 조건을 만족하는지 확인합니다.

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

// 배열의 모든 요소가 양수인지 확인
const allPositive = array.every((element) => {
  return element > 0;
});

console.log(allPositive); // true

• find(): 주어진 함수의 조건을 만족하는 첫 번째 요소를 반환합니다.

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

// 배열에서 첫 번째 짝수를 찾기
const evenNumber = array.find((element) => {
  return element % 2 === 0;
});

console.log(evenNumber); // 2

• findIndex(): 주어진 함수의 조건을 만족하는 첫 번째 요소의 인덱스를 반환합니다.

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

// 배열에서 30보다 큰 첫 번째 요소의 인덱스를 찾기
const index = array.findIndex((element) => {
  return element > 30;
});

console.log(index); // 2

• fill(): 배열의 모든 요소를 정적인 값으로 채웁니다.

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

// 배열의 모든 요소를 0으로 채우기
array.fill(0);

console.log(array); // [0, 0, 0, 0, 0]

• reduceRight(): 배열의 요소를 오른쪽에서 왼쪽으로 순서대로 축소합니다.

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

// 배열의 모든 요소의 합 구하기
const sum = array.reduceRight((accumulator, currentValue) => accumulator + currentValue);

console.log(sum); // 15

• copyWithin(): 배열의 일부분을 동일한 배열 내에서 복사하여 다른 위치에 붙여넣습니다.

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

// 배열의 일부분을 다른 위치로 복사하기
array.copyWithin(2, 0, 2);

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

• entries(): 배열의 각 인덱스/요소 쌍에 대한 반복 가능한 객체를 반환합니다.

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

// 배열의 각 요소에 대한 인덱스와 값을 반복적으로 접근하기
const iterator = array.entries();

for (const [index, value] of iterator) {
  console.log(index, value);
}

• keys(): 배열의 인덱스를 나타내는 반복 가능한 객체를 반환합니다.

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

// 배열의 각 요소에 대한 인덱스를 반복적으로 접근하기
const iterator = array.keys();

for (const index of iterator) {
  console.log(index);
}

• values(): 배열의 값들을 나타내는 반복 가능한 객체를 반환합니다.

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

// 배열의 각 요소에 대한 값을 반복적으로 접근하기
const iterator = array.values();

for (const value of iterator) {
  console.log(value);
}

• findLast(): 주어진 함수의 조건을 만족하는 마지막 요소를 반환합니다.

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

// 배열을 뒤집고, 첫 번째 요소를 찾음
const lastElement = array.reverse().find((_, index, arr) => index === arr.length - 1);

console.log(lastElement); // 5

• flatMap(): 배열의 각 요소에 대해 주어진 함수를 호출하고 결과를 평탄화한 새로운 배열을 생성합니다.

const arr = [1, 2, 3];

const result = arr.flatMap((num) => [num, num * 2]);

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

• from(): 다른 객체나 반복 가능한 객체로부터 배열을 생성합니다.

// 유사 배열 객체를 배열로 변환
const arrayLike = { 0: 'a', 1: 'b', 2: 'c', length: 3 };
const arr1 = Array.from(arrayLike);
console.log(arr1); // ['a', 'b', 'c']

// 이터러블 객체를 배열로 변환
const iterable = 'hello';
const arr2 = Array.from(iterable);
console.log(arr2); // ['h', 'e', 'l', 'l', 'o']

// 콜백 함수를 적용하여 초기화
const arr3 = Array.from([1, 2, 3], (num) => num * 2);
console.log(arr3); // [2, 4, 6]

• isArray(): 주어진 값이 배열인지 여부를 확인합니다.

console.log(Array.isArray([1, 2, 3])); // true
console.log(Array.isArray([])); // true
console.log(Array.isArray({})); // false
console.log(Array.isArray('hello')); // false
console.log(Array.isArray(123)); // false
console.log(Array.isArray(null)); // false

• of(): 주어진 인수로 배열을 생성합니다.

console.log(Array.of(1, 2, 3)); // [1, 2, 3]
console.log(Array.of(7)); // [7]
console.log(Array.of('hello', 'world')); // ['hello', 'world']
console.log(Array.of()); // []

• toLocaleString(): 배열의 모든 요소를 지역화된 문자열로 변환합니다.

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

• toString(): 배열의 모든 요소를 문자열로 변환합니다.

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

• at(): 주어진 인덱스에 해당하는 요소를 반환합니다. (ECMAScript proposal stage 1)

const array = ['apple', 'banana', 'cherry'];

console.log(array.at(0)); // 'apple'
console.log(array.at(2)); // 'cherry'
console.log(array.at(-1)); // 'cherry'

• flat(): 중첩된 배열을 지정한 깊이까지 평탄화한 새로운 배열을 생성합니다. (ECMAScript proposal stage 3)

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

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

• flatMapDepth(): 배열의 각 요소에 대해 주어진 함수를 호출하고 지정한 깊이까지 결과를 평탄화한 새로운 배열을 생성합니다. (ECMAScript proposal stage 3)

const nestedArray = [1, [2, [3, [4]]]];
const depth = 2;

const flattenedAndTransformedArray = nestedArray.flatMapDepth((value, currentDepth) => {
  return currentDepth === depth ? value * 2 : value;
}, depth);

console.log(flattenedAndTransformedArray); // [1, 2, 3, 8]