[JS] 배열 (Array) 메소드 정리

Array

: 자바스크립트에서 Array 객체는, 다른 프로그래밍 언어의 배열과 마찬가지로, 여러 항목의 컬렉션을 단일 변수 이름 아래 저장할 수 있다. 여기서는 배열의 생성과, 접근, 그리고 주요 메소드를 정리해보려고 한다.

배열 생성하기

: 배열은 대괄호로 감싸진 요소들의 목록으로 정의된다.

let 배열이름 = [요소1, 요소2, 요소3, ...];

배열 요소에 접근하기

: 배열의 각 요소에 접근하려면 인덱스를 사용한다. 인덱스는 0부터 시작하며, 배열의 길이보다 작아야한다.

let numbers = [1, 2, 3, 4, 5];
console.log(numbers[0]); // 첫 번째 요소에 접근
console.log(numbers[2]); // 세 번째 요소에 접근

배열의 주요 메소드

Array.isArray()

주어진 값이 배열인지 여부를 확인하는 자바스크립트 내장함수로, 인자로 전달된 값이 배열인 경우 'true'를 그렇지 않을 경우 'false' 를 반환한다. 배열과 객체를 구별할 때 유용하게 사용될 수 있다.

const arr = [1, 2, 3];
const obj = { key: 'value' };

console.log(Array.isArray(arr)); // true
console.log(Array.isArray(obj)); // false

Array.from()

유사 배열 객체나 반복 가능한 객체를 얕게 복사하여 새로운 배열을 생성한다. 배열 형태로 변환하고자 하는 객체를 받아들이고, 배열로 변환된 새로운 객체 배열을 반환한다.

• Array.from() 메소드 문법

Array.from(arrayLike, mapFn, thisArg)

• arrayLike : 배열로 반환하고자 하는 유사 배열 객체나 반복 가능한 객체
• mapFn (옵션) : 배열의 각 요소에 대해 호출할 매핑 함수
• thisArg (옵션) : mapFn에서 사용될 this 값

const str = 'hello';
const strArray = Array.from(str);

console.log(strArray); // ['h', 'e', 'l', 'l', 'o']

const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = Array.from(numbers, x => x * x);

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

Array.of()

전달된 인자를 요소로 가지는 새로운 배열을 생성한다. 이 메소드는 전달된 값을 요소로 갖는 배열을 생성할 때 유용하게 사용할 수 있다.

const arr1 = Array.of(1, 2, 3, 4, 5);
console.log(arr1); // [1, 2, 3, 4, 5]

const arr2 = Array.of('a', 'b', 'c');
console.log(arr2); // ['a', 'b', 'c']

Array.of() 메소드는 전달된 인자를 요소로 가지는 배열을 항상 생성한다. 이는 Array 생성자를 사용하여 배열을 생성할 때 발생할 수 있는 혼란을 방지한다.

const singleNumberArray = new Array(3);
console.log(singleNumberArray); // [undefined, undefined, undefined]

위의 코드에서 new Array(3)은 길이가 3이고 요소가 'undefined'로 채워진 배열을 생성한다. 반면에 Array.of(3)은 값이 3인 배열을 생성한다. 즉, Array.of()는 명시적으로 원하는 값을 요소로 가지는 배열을 생성할 때 유용하게 사용된다.

push()

배열의 끝에 하나 이상의 요소를 추가하고, 배열의 길이를 반환한다.

const fruits = ['apple', 'orange'];
const newLength = fruits.push('banana', 'kiwi');

console.log(fruits); // ['apple', 'orange', 'banana', 'kiwi']
console.log(newLength); // 4 (배열의 새로운 길이)

pop()

배열 마지막의 요소를 제거하고, 제거된 요소를 반환한다. 또한 배열이 비어있을 경우 undefined를 반환한다.

const fruits = ['apple', 'orange', 'banana', 'kiwi'];
const removedElement = fruits.pop();

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

push() 메소드는 배열의 끝에 요소를 추가하고, pop 메소드는 배열의 긑에서 요소를 제거한다. 이러한 메소드들은 배열을 Stack 자료루조 사용할 때 유용하게 사용될 수 있다.

shift()

배열의 첫번째 요소를 제거하고, 반환한다. 이후 배열의 모든 다른 요소들은 한 자리씩 앞으로 이동하며, 배열의 길이가 1감소한다.

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

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

unshift()

배열의 시작 부분에 하나 이상의 요소를 추가한다. 배열의 모든 다른 요소들은 한 자리씩 뒤로 이동하며, 배열의 길이가 증가한다.

const fruits = ['orange', 'banana'];
const newLength = fruits.unshift('apple', 'kiwi');

console.log(fruits); // ['apple', 'kiwi', 'orange', 'banana']
console.log(newLength); // 4 (배열의 새로운 길이)

shift() 메소드는 배열의 시작에서 요소를 제거하고, unshift() 메소드는 배열의 시작에 요소를 추가한다.

reverse()

배열의 요소 순서를 거꾸로 뒤집는데 사용한다. 원래의 배열의 변경하며, 뒤집힌 배열을 반환한다.

const numbers = [1, 2, 3, 4, 5];
numbers.reverse();

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

reverse() 메소드는 원본 배열을 변경하여 뒤집힌 배열을 반환하므로, 원본 배열을 변경하지 않고 새로운 배열을 얻고 싶다면, slice() 메소드나, 전개 연산자를 사용하여 원본 배열의 복사본을 만든 후 reverse() 메소드를 호출해야한다.

const numbers = [1, 2, 3, 4, 5];
const copiedArray = numbers.slice().reverse();

console.log(copiedArray); // [5, 4, 3, 2, 1]
console.log(numbers); // [1, 2, 3, 4, 5] (원본 배열은 변경되지 않음)

const numbers = [1, 2, 3, 4, 5];
const copiedArray = [...numbers].reverse();

console.log(copiedArray); // [5, 4, 3, 2, 1]
console.log(numbers); // [1, 2, 3, 4, 5] (원본 배열은 변경되지 않음)

sort()

배열의 요소를 문자열로 변환한 후 유니코드 순서에 따라 정렬한다. 기본적으로 문자열로 변환된 요소들의 유니코드 순서에 따라 정렬되기 때문에 숫자 정렬 시 주의가 필요하다.

const fruits = ['apple', 'orange', 'banana', 'kiwi'];
fruits.sort();

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

숫자를 정렬할 때는 비교함수를 사용하여 정렬 순서를 결정해야한다.

//오름차순으로 정렬 시
const numbers = [10, 2, 5, 1, 9];
numbers.sort((a, b) => a - b);

console.log(numbers); // [1, 2, 5, 9, 10]

slice()

배열의 특정부분응ㄹ 추출하여 새로운 배열로 반환한다. start 인덱스부터 end 인덱스 전까지의 요소를 포함하는 새로운 배열을 반환한다. 원본 배열을 변경하지 않는다.

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

console.log(slicedArray); // [2, 3, 4]
console.log(numbers); // [1, 2, 3, 4, 5] (원본 배열은 변경되지 않음)

splice()

벼앨에서 요소를 제거하거나 새로운 요소를 추하갈 수 있다. splice(start, deleteCount, item1, item2...)로 사용하며, start 인덱스로부터 deleteCount 개수만큼의 요소를 제거하고, 필요한 경우 새로운 요소를 추가할 수 있다. 이는 원본 배열을 변경한다.

const numbers = [1, 2, 3, 4, 5];
const removedElements = numbers.splice(1, 2, 6, 7);

console.log(numbers); // [1, 6, 7, 4, 5] (원본 배열이 변경됨)
console.log(removedElements); // [2, 3] (제거된 요소들)

위의 코드에서 splice(1,2,6,7)은 인덱스 1부터 시작하여 2개의 요소를 제거하고, 그 자리에 6,7를 추가한다. splice()는 제거된 요소들을 포함하는 배열을 반환한다.

slice()와 splice()의 가장 중요한 차이점은 slice()는 원본 배열을 변경하지 않고 새로운 배열을 반환하며, splice()는 원본 배열을 변경하고 제거된 요소들을 반환한다.

fill()

배열의 모든 요소를 특정 값으로 채워주는 메소드이다. 원본 배열을 변경하며, 배열된 배열을 반환한다.

// 예제 배열 생성
const numbers = [1, 2, 3, 4, 5];

// 모든 요소를 0으로 채우기
numbers.fill(0);
console.log(numbers); // 출력: [0, 0, 0, 0, 0]

// 인덱스 1부터 3 전까지의 요소를 9로 채우기
numbers.fill(9, 1, 3);
console.log(numbers); // 출력: [0, 9, 9, 0, 0]

join()

배열의 모든 요소를 하나의 문자열로 합쳐 반환한다 요소들은 구분자(sepearator)로 분리된다. 구분자를 지정하지 않으면 기본적으로 쉼표(,)가 사용된다.

const fruits = ['사과', '바나나', '오렌지'];
const joinedString = fruits.join(', '); // 쉼표와 공백을 구분자로 사용하여 문자열 생성
console.log(joinedString); // 출력: '사과, 바나나, 오렌지'

toString()

배열의 모든 요소를 하나의 문자열로 합쳐 반환한다. join() 메소드와 달리 구분자를 지정할수 없으며, 기본적으로 쉼표(,)로 요소들을 구분한다.

const fruits = ['사과', '바나나', '오렌지'];
const stringRepresentation = fruits.toString();
console.log(stringRepresentation); // 출력: '사과,바나나,오렌지'

concat()

배열에 다른 배열이나 값들을 추가하여 새로운 배열을 생성한다. 원본 배열은 변경되지 않는다.

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const newArray = array1.concat(array2, 7, 8);

console.log(newArray); // 출력: [1, 2, 3, 4, 5, 6, 7, 8]
console.log(array1); // 출력: [1, 2, 3] (원본 배열은 변경되지 않음)
console.log(array2); // 출력: [4, 5, 6] (원본 배열은 변경되지 않음)

indexOf()

배열에서 지정한 요소를 찾아 첫번째로 나타난 위치의 인덱스를 반환한다. 요소를 찾지 못할 경우 -1을 반환한다.

const array = [1, 2, 3, 4, 3];
const indexOfThree = array.indexOf(3);
console.log(indexOfThree); // 출력: 2

lastIndexOf()

배열에서 지정한 요소를 찾아, 마지막으로 나타나는 위치의 인덱스를 반환한다. 요소를 찾지 못할 경우 -1을 반환한다.

const array = [1, 2, 3, 4, 3];
const lastIndexOfThree = array.lastIndexOf(3);
console.log(lastIndexOfThree); // 출력: 4

forEach()

배열의 각 요소에 대해 함수를 실행하는 메소드이다. 배열의 각 요소에 대해 반복문을 수행하면서, 요소를 한 번씩 처리할 때 유용하다.

array.forEach(callback(currentValue, index, array))

• callback : 각 요소에 대해 실행할 함수
• currentValue : 현재 처리 중인 요소의 값
• index : 현재 처리 중인 요소의 인덱스
• array : forEach()를 호출한 배열 자체

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

numbers.forEach(function (element) {
  squaredNumbers.push(element * element);
});

console.log(squaredNumbers); // 출력: [1, 4, 9, 16, 25]

const ages = [25, 30, 18, 15, 22];
let foundAge = null;

ages.forEach(function (age) {
  if (age >= 18) {
    foundAge = age;
    return; // 특정 조건을 만족하는 요소를 찾았으면 더 이상 반복을 수행하지 않음
  }
});

console.log(foundAge); // 출력: 25

map()

배열의 모든 요소에 대해 주어진 함수를 호출하고, 그 결과를 모아서 새로운 배열을 반환하는 메소드이다. 원본 배열을 변경하지 않으며, 각 요소에 대해 주어진 함수를 적용한 결과를 새로운 배열에 담아서 반환한다.

const newArray = array.map(callback(currentValue, index, array))

• callback : 각 요소에 대해 실행할 함수
• currentValue : 현재 처리 중인 요소의 값
• index : 현재 처리중인 요소의 인덱스
• array : map()을 호출한 배열 그 자체

const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map(function (element) {
  return element * element;
});
console.log(squaredNumbers); // 출력: [1, 4, 9, 16, 25]

const numbers = [1, 2, 3, 4, 5];
const stringNumbers = numbers.map(function (element) {
  return element.toString();
});
console.log(stringNumbers); // 출력: ['1', '2', '3', '4', '5']

filter()

배열의 요소 중에서 주어진 함수의 조건을 마족하는 요소들로 이루어진 새로운 배열을 반환

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

• callback : 각 요소에 대해 실행할 함수, 조건을 만족하는 경우 true, 그렇지 않을경우 false를 반환
• element : 현재 처리 중인 요소의 값
• index : 현재 처리 중인 요소의 인덱스
• array : filter를 호출한 배열 자체

const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter(function (element) {
  return element % 2 === 0;
});
console.log(evenNumbers); // 출력: [2, 4, 6]

reduce()

배열의 모든 요소에 대해 주어진 함수를 실행하고, 이전 결과와 현재 요소를 이용하여 하나의 값으로 축약

const result = array.reduce(callback(accumulator, currentValue, index, array), initialValue);

• callback : 각 요소에 대해 실행할 함수. 누산기와 현재 요소를 이용하여 계산을 수행
• accumulator : 누산기로서 각 단계ㅔ서 콜백 함수의 반환값을 누적
• currentValue : 현재 처리 중인 요소의 값
• index : 현재 처리 중인 요소의 인덱스
• array : reduce()를 호출한 배열 자체
• initialValue : 누산기의 초기값으로 선택적으로 전달할 수 있음

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce(function (accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);
console.log(sum); // 출력: 15

entries()

Map 객체의 각 키-값 쌍을 나타내는 배열을 반환. 각 배열 요소는 [key, value] 형태인 배열이다.

const map = new Map([
  ['a', 1],
  ['b', 2],
  ['c', 3]
]);

const entries = map.entries();
console.log([...entries]); // 출력: [['a', 1], ['b', 2], ['c', 3]]

keys()

Map 객체의 모든 키를 나타내는 배열을 반환

const map = new Map([
  ['a', 1],
  ['b', 2],
  ['c', 3]
]);

const keys = map.keys();
console.log([...keys]); // 출력: ['a', 'b', 'c']

values()

Map 객체의 모든 값을 나타내는 배열을 반환한다.

const map = new Map([
  ['a', 1],
  ['b', 2],
  ['c', 3]
]);

const values = map.values();
console.log([...values]); // 출력: [1, 2, 3]

find()

배열에서 주어진 콜백함수의 조건을 만족하는 '첫 번째' 요소를 반환한다. 조건을 만족하는 요소가 없을 경우 undefined를 반환한다.

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

• callback : 각 요소에 대해 실행할 함수로 조건을 만족하는 경우 true, 만족하지 않을 경우 false를 반환
• element : 현재 처리 중인 요소의 값
• index : 현재 처리 중인 요소의 인덱스
• array : find()를 호출한 배열 자체

const numbers = [1, 5, 8, 10, 12];
const foundNumber = numbers.find(function (element) {
  return element > 7;
});

console.log(foundNumber); // 출력: 8

요약

메소드	설명
Array.isArray()	전달된 값이 배열인지 아닌지를 확인하고, boolean으로 결과를 반환한다.
Array.from()	배열과 비슷한 객체와 반복할 수 있는 객체를 배열처럼 반환한다.
Array.of()	인수의 수나 타입에 상관없이, 인수로 전달받은 값을 요소로 가지는 배열을 항상 생성한다.
push()	하나 이상의 요소를 배열의 가장 마지막에 추가한다.
pop()	배열의 가장 마지막 요소를 제거한다.
shift()	배열의 가장 첫 요소를 제거한다.
unshift()	하나 이상의 요소를 배열의 가장 앞에 추가한다.
reverse()	배열 요소의 순서를 뒤집는다.
sort()	배열의 요소를 유니코드 값에 따라 정렬한다.
slice()	시작 인덱스부터 종료 인덱스 바로 앞까지의 배열 요소로 새로운 배열을 반환한다.
splice()	기존의 배열 요소를 제거하거나, 새로운 배열 요소를 추가하여 배열의 내용을 변경한다.
fill()	시작인덱스부터 종료 인덱스 바로 앞까지의 모든 배열 요소를 특정 값으로 교체한다.
join()	배열의 모든 요소를 하나의 문자열로 반환한다.
toString()	해당 배열의 모든 요소를 하나의 문자열로 반환한다.
concat()	해당 배열의 뒤로, 전달받은 배열을 합쳐 새로운 배열을 반환한다.
indexOf()	전달받은 값과 동일한 배열 요소가 '처음으로' 등장하는 위치의 인덱스를 반환한다.
lastIndexOf()	전달 받은 값과 동일한 배열 요소가 '마지막으로' 등장하는 위치의 인덱스를 반환한다.
forEach()	해당 배열의 모든 요소에 대해 명시된 콜백함수를 실행한다.
map()	해당 배열의 모든 요소에 대해 명시된 콜백함수를 실행하고, 그 실행 결과를 새로운 배열로 반환한다.
filter()	해당 배열의 모든 요소에 대해 명시된 콜백함수를 실행하고, 그 결괏값이 True인 요소들만을 새로운 배열로 반환한다.
reduce()	해당 배열의 모든 요소의 값을 하나로 줄이기 위해, 두 개의 인수를 전달받는 콜백 함수를 실행한다.
entries()	배열 요소별로 키와 값의 한 쌍으로 이루어진 새로운 배열 반복자 객체를 배열 형태로 반환한다.
keys()	배열 요소로 키만 포함하는 새로운 배열 반복자 객체를 배열 형태로 반환한다.
values()	배열 요소별로 값만 포함하는 새로운 배열 반복자 객체를 배열 형태로 반환한다.
find()	전달받은 함수를 만족하는 배열의 요소 값을 반환하고, 없을 경우 undefined를 반환한다.