DevJavascript

JavaScript Array APIs

⏱ 19 min.

출처 : Unsplash - @amyhirschi https://unsplash.com/photos/9EFF087BPXk

Index


Map

Reference : MDN - Array.prototype.map()

배열내 모든 요소에 대해 주어진 함수로 호출한 결과를 바탕으로 새로운 배열을 반환

1
2
3
4
const array = [1,2,3,4,5];
const map = array.map(x => x*2);

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

Filter

Reference : MDN - Array.prototype.filter()

파라미터로 주어진 callback 함수의 조건을 통과하는 모든 요소를 모아 새로운 배열로 반환

1
2
3
4
5
6
7
8
9
10
const players = [
   { name: 'rooney', goal: 22 }, 
   { name: 'nistelrooij', goal: 30 },
   { name: 'jisung', goal: 5 },
   { name: 'scholes', goal: 6 }
];
const strikers = players.filter(player => player.goal > 10);

console.log(strikers);
// [{ name: 'rooney', goal: 22 }, { name: 'nistelrooij', goal: 30 }]

Find, FindIndex

Reference :

Find

주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환한다.

파라미터로 callback 함수를 받을 수 있는데, 이 callback 함수가 true를 반환할대까지 callback 함수를 실행한다.

true이면 해당 값을 반환하고, callback 함수가 true인 값을 찾지 못하면 undefined를 반환한다.

1
2
3
4
const array1 = [5, 12, 8, 130, 44];
const found = array1.find(element => element > 10);

console.log(found);     // 12

filter()와 달리 true인 모든 값을 찾아서 반환하지 않고, callback 함수가 처음으로 true인 값만 반환한다는 특징에 주의하자.

FindIndex

위의 find()와 비슷하게 파라미터로 받은 callback 함수가 true일 때 값 대신 배열의 인덱스를 반환한다.

1
2
3
4
const array1 = [5, 12, 8, 130, 44];
const found = array1.findIndex(element => element > 10);

console.log(found);     // 1

IndexOf, Includes

IndexOf(searchElement, fromIndex)

파라미터로 주어진 값(searchElement)에 해당하는 배열의 인덱스를 반환한다.

두번째 인자는 배열의 인덱스 어디서부터 조회할지를 결정한다.

1
2
3
4
5
const array = ['andy', 'bart', 'chris', 'lex', 'sam'];

console.log(array.indexOf('andy'));      // 0
console.log(array.indexOf('bart', 2));   // -1 
console.log(array.indexOf('kevin'));     // -1

두번째 console.log에서 'bart'라는 element는 배열에 존재하나 array[2]부터 조회했을때는 조회되지 않아서 -1을 반환했다.

1
array.indexOf('bart') = 1;

Includes

indexOf와 같게 파라미터로 주어진 값과 일치하는 값이 배열에 있는지를 조회하되 인덱스는 반환하지 않고 boolean 타입만 반환한다.

1
2
3
4
5
const array = ['andy', 'bart', 'chris', 'lex', 'sam'];

console.log(array.includes('andy'));      // true
console.log(array.includes('bart', 2));   // false 
console.log(array.includes('kevin'));     // false

Sort

Reference : MDN - Array.prototype.sort()

배열의 요소를 유니코드 기준으로 정렬하는 함수이다. 원본 배열을 변환하고, 변환된 배열을 반환한다.

1
2
3
4
const numbers = [21,1,17,4,5];
numbers.sort();

console.log(numbers);     // [ 1, 17, 21, 4, 5]

수를 정렬할 때에도 왜 이렇게 정렬되는지에 대해 MDN 문서에서 설명되어 있다. Go to MDN

수를 정렬할 때 sort()를 그냥 사용하면 기대와 같이 정렬되지 않는다. 이 때는 아래와 같이 이용하면 numeric하게 sort()를 사용할 수 있다.

1
2
3
4
const numbers = [21, 1, 17, 4, -5]
numbers.sort((a,b) => a-b);

console.log(numbers);   // [1, 4, 5, 17, 21]

Reduce

Reference : MDN - Array.prototype.reduce()

배열의 모든 요소에 대해 reducer 함수를 실행하여 하나의 결과값만 반환

reduce() 함수는 reducer 함수와 실행시 필요한 초기값, 두개의 인자를 갖는다.

1
2
3
4
5
6
7
8
9
const array = [1, 2, 3, 4, 5];

const initValue = 0;
const sum = array.reduce( (x,y) => x+y, initValue);
// x는 reducer 함수에서 실행하는 previousValue,
// y는 currentValue
// 따라서 reducer 함수는 초기값이 필요한데, 이를 reduce() 인자로 넣어줘야 한다.

console.log(sum); // 15

Join

Reference : MDN - Array.prototype.join()

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

파라미터로 들어온 문자열을 기준으로 배열의 각 요소를 구분한다.

1
2
3
4
5
6
7
const array = ['Fire', 'Air', 'Water'];

console.log(array.join());        // Fire,Air,Water
console.log(typeof array.join()); // string

console.log(array.join(''));      // FireAirWater
console.log(array.join('-'));     // Fire-Air-Water

Reverse

Reference : MDN - Array.prototype.reverse()

배열의 순서를 반전한다. 호출한 배열을 반전하고, 원본 배열을 변형한다.

1
2
3
4
const array = ['one', 'two', 'three'];

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

원본 배열을 변환한다는 사실에 주의하자.


Slice

Reference : MDN - Array.prototype.slice()

Array.prototype.slice(firstIndex, lastIndex)

배열의 [firstIndex]부터 [lastIndex-1] 까지 반환하는 배열

1
2
3
4
5
6
const array = ['hello', 'prototype', 'language', 'javascript'];

console.log(array.slice(1,3));   // ['prototype', 'language']
console.log(array.slice(1, -1)); // ['prototype', 'language']
console.log(array.slice(-1));    // ['javascript']
console.log(array.slice());      // ['hello', 'prototype', 'language', 'javascript']

Some

Reference : MDN - Array.prototype.some()

파라미터로 주어진 callback 함수가 배열의 모든 요소를 대상으로 하나로 true를 반환하면, 함수의 결과로 true를 반환한다.

1
2
3
4
5
6
const array = [2, 5, 8, 1, 4];
const isBiggerThan5 = array.some((number)=>number>5);
const isBiggerThan10 = array.some((number)=>number>10);

console.log(isBiggerThan5);      // true
console.log(isBiggerThan10);     // false