Javascript 배열 마스터하기: 모든 배열 함수 사용 예시와 팁!

배열의 모든 함수에 대해서 어떻게 사용하는지 외울 필요는 없지만, 어떤 것들이 있는지는 알고 있는 것이 좋아. 아래 별표 쳐놓은 것들은 다 외우고 있는 것이 좋을거야.

at()

at() 메서드는 배열에서 인덱스로 요소를 가져오고, 음수 인덱스는 배열 끝에서부터 요소를 카운트해.

const array = [10, 20, 30, 40, 50];
console.log(array.at(-1)); // 50

concat() ★

concat()은 두 개 이상의 배열을 합쳐 새 배열을 만들어.

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
console.log(arr1.concat(arr2)); // [1, 2, 3, 4, 5, 6]

copyWithin()

copyWithin()은 배열의 일부를 동일한 배열 내에서 복사해서 다른 위치에 덮어쓰고 배열을 반환해.

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

entries()

entries()는 배열의 각 인덱스에 대한 [key, value] 쌍을 포함하는 새로운 Array Iterator 객체를 반환해.

const iterator = ['a', 'b', 'c'].entries();
console.log(iterator.next().value); // [0, 'a']

entry() ★

every()는 배열의 모든 요소가 주어진 함수를 만족하는지 확인해.

console.log([10, 20, 30].every(value => value >= 10)); // true

fill()

fill()은 배열의 요소를 정적인 값으로 채워넣어.

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

filter() ★★★

filter()은 주어진 함수의 테스트를 통과하는 요소들로 이루어진 새 배열을 만들어.

console.log([5, 10, 15, 20].filter(num => num > 10)); // [15, 20]

find() ★★★

find()는 주어진 판별 함수를 만족하는 첫 번째 요소를 반환해.

console.log([5, 12, 8, 130, 44].find(num => num > 10)); // 12

findIndex() ★★★

findIndex()는 판별 함수를 만족하는 첫 번째 요소의 인덱스를 반환해.

console.log(['apple', 'banana', 'mango'].findIndex(fruit => fruit === 'banana')); // 1

flat()

flat()은 모든 하위 배열 요소를 지정한 깊이까지 재귀적으로 이어붙여 새 배열을 생성해.

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

findLast()

findLast() 메서드는 배열에서 뒤쪽부터 주어진 판별 함수를 만족하는 첫 번째 요소를 찾아 반환해.

const array1 = [1, 2, 3, 4, 5];
const found = array1.findLast(element => element % 2 === 0);
console.log(found); // 4

findLastIndex()

findLastIndex() 메서드는 배열에서 뒤쪽부터 주어진 판별 함수를 만족하는 첫 번째 요소의 인덱스를 찾아 반환해.

const array2 = [1, 2, 3, 4, 5];
const foundIndex = array2.findLastIndex(element => element % 2 === 0);
console.log(foundIndex); // 3

flatMap()

flatMap()은 먼저 각 요소를 매핑한 다음, 결과를 새 배열로 평탄화해.

console.log([1, 2, 3, 4].flatMap(x => [x, x * 2])); // [1, 2, 2, 4, 3, 6, 4, 8]

forEach() ★★★

forEach()는 배열의 각 요소에 대해 함수를 실행해.

['apple', 'banana', 'cherry'].forEach(fruit => console.log(fruit));

from() ★

Array.from()은 유사 배열 객체나 반복 가능한 객체를 얕게 복사해 새 Array 객체를 만들어.

console.log(Array.from('foo')); // ['f', 'o', 'o']

includes() ★

includes()는 배열이 특정 요소를 포함하고 있는지 판별해.

console.log([1, 2, 3].includes(2)); // true

indexOf() ★

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

console.log(['apple', 'banana', 'mango'].indexOf('banana')); // 1

isArray() ★

isArray()는 주어진 값이 Array인지 판별해.

console.log(Array.isArray([1, 2, 3])); // true

join() ★

join()은 배열의 모든 요소를 연결해 하나의 문자열로 만들어.

console.log(['Hello', 'world'].join(' ')); // 'Hello world'

keys()

keys()는 배열의 각 인덱스에 대한 key를 반환하는 새로운 Array Iterator 객체를 반환해.

const iterator = ['a', 'b', 'c'].keys();
console.log(iterator.next().value); // 0

lastIndexOf()

배열 내에서 요소를 뒤에서부터 찾아 인덱스를 반환해. 못 찾으면 -1을 반환해.

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

map() ★★★

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

console.log([1, 2, 3, 4].map(x => x * 2)); // [2, 4, 6, 8]

of()

주어진 인수로 만든 새 Array 인스턴스를 생성해.

console.log(Array.of(1, 2, 3)); // [1, 2, 3]

pop()

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

const arr = [1, 2, 3];
console.log(arr.pop()); // 3
console.log(arr); // [1, 2]

push() ★★★

배열의 끝에 하나 이상의 요소를 추가하고, 변경된 배열의 길이를 반환해.

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

reduce() ★★★

배열의 각 요소에 대해 주어진 리듀서 함수를 실행하고, 하나의 결과값을 반환해.

console.log([1, 2, 3, 4].reduce((acc, cur) => acc + cur, 0)); // 10

reduceRight()

배열의 각 요소에 대해 주어진 리듀서 함수를 오른쪽에서 왼쪽으로 실행하고, 하나의 결과값을 반환해.

const array1 = [[0, 1], [2, 3], [4, 5]].reduceRight(
  (acc, cur) => acc.concat(cur)
);
console.log(array1); // [4, 5, 2, 3, 0, 1]

reverse() ★

배열의 요소 순서를 반전시켜.

console.log(['one', 'two', 'three'].reverse()); // ['three', 'two', 'one']

shift() ★

배열에서 첫 번째 요소를 제거하고 그 요소를 반환해. 이 메서드는 배열의 길이를 변경해.

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

slice() ★

배열의 복사본의 일부분 또는 전체를 새 배열 객체로 반환해. 원본 배열은 변경되지 않아.

console.log(['ant', 'bison', 'camel', 'duck', 'elephant'].slice(2)); // ["camel", "duck", "elephant"]

some() ★

배열 안의 어떤 요소라도 주어진 판별 함수를 통과하는지 테스트해.

console.log([1, 2, 3, 4, 5].some(elem => elem > 3)); // true

sort() ★

배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환해. 기본 정렬 순서는 문자열의 유니코드 코드 포인트를 따라서 정렬돼.

console.log(['March', 'Jan', 'Feb', 'Dec'].sort()); // ["Dec", "Feb", "Jan", "March"]

splice() ★

배열의 내용을 변경해, 요소를 제거하거나 추가해.

const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
console.log(months); // ["Jan", "Feb", "March", "April", "June"]

toLocaleString()

배열의 요소를 문자열로 변환하고, 그 요소들을 로케일에 맞게 연결해.

const array1 = [1, 'a', new Date('21 Dec 1997 14:12:00 UTC')];
const localeString = array1.toLocaleString('en', { timeZone: 'UTC' });
console.log(localeString); // "1,a,12/21/1997, 2:12:00 PM"

toString()

배열과 그 요소를 문자열로 변환해.

const array1 = [1, 2, 'a', '1a'];
console.log(array1.toString()); // "1,2,a,1a"

unshift() ★

하나 이상의 요소를 배열의 시작 부분에 추가하고, 배열의 새로운 길이를 반환해.

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

values()

배열의 요소 값에 대한 iterator 객체를 반환해.

const array1 = ['a', 'b', 'c'];
const iterator = array1.values();

for (const value of iterator) {
  console.log(value); // 'a' 'b' 'c'
}