Skip to content

Latest commit

 

History

History
374 lines (258 loc) · 9.04 KB

배열 내장함수.md

File metadata and controls

374 lines (258 loc) · 9.04 KB
Raw

배열 내장함수

자바스크립트의 배열에서는 기본적으로 많은 종류의 내장 함수를 제공하고 있고 이를 이용하면 보다 간단한 코드로 다양한 기능을 구현할 수 있다.


forEach, map, filter

forEach와 map, filter함수는 기본적으로 배열을 반복하는데 초점을 둘 필요가 있다.

forEach

forEach는 배열을 반복하여 기존 값을 가져오는데 주로 쓰인다.

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

arr.forEach(item => {
  console.log(item); //1 2 3 4 5
});

map

map과 forEach의 차이는 배열을 반복하면서 각각의 원소에 대하여 특정 로직을 수행한 뒤, 새로운 배열을 반환하고 싶을 때 주로 사용한다.

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

const newArr = arr.map(item => {
  return item * 2;
});

console.log(arr); //[1, 2, 3, 4, 5]
console.log(newArr); //[2, 4, 6, 8, 10]

위에서 볼 수 있듯이 map을 통해 반환한 배열은 깊은 복사를 사용하기 때문에 기존 배열을 영향을 주지 않고 새로운 배열을 반환한다.

filter

filter함수의 기능은 이름 그대로 배열을 반복하며 각각의 원소들 중 특정 조건에 해당하는 원소들만 뽑아내어 새로운 배열을 반환한다. filter또한 map과 마찬가지로 기존 배열에 영향을 주지 않는다.

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

const newArr = arr.filter(item => {
  return item >= 3;
})

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

indexOf, findIndex, find

indexOf

indexOf함수는 배열에서 찾고자 하는 원소가 있다면 그 원소의 index값을 반환한다.

const arr = ['a', 'b', 'c', 'd'];

console.log(arr.indexOf('c')); //2

findIndex

findIndex함수도 indexOf함수와 마찬가지로 찾고자 하는 원소의 index값을 반환한다. 하지만 원소가 객체로 되어있거나 배열로 되어있을 때 indexOf함수로는 index값을 찾을 수 없다. 반면, findIndex 함수는 조건 처리를 통하여 index값을 찾을 수 있다.

const arr = [
  {
    id: 1,
    name: 'BKJang',
    age: 27,
  },
  {
    id: 2,
    name: 'JHKim',
    age: 25,
  }
]

console.log(arr.findIndex(item => item.id === 2)); //1

find

find함수는 findIndex함수와 사용법은 동일하지만 반환하는 값이 index값이 아닌 찾아낸 값 자체를 반환한다.

const arr = [
  {
    id: 1,
    name: 'BKJang',
    age: 27,
  },
  {
    id: 2,
    name: 'JHKim',
    age: 25,
  }
]

console.log(arr.find(item => item.id === 2)); 
// {id: 2, name: "JHKim", age: 25}

splice, slice

splice와 slice함수는 배열에서 특정 원소들을 제거할 때 사용하는 함수다.

splice

splice함수의 첫번째 파라미터는 지우기 시작할 원소의 index, 두번째 파라미터는 지울 원소의 갯수를 넘긴다.

const arr = ['a', 'b', 'c', 'd', 'e'];

const arr2 = arr.splice(2, 3);

console.log(arr); //["a", "b"]
console.log(arr2); //["c", "d", "e"]

slice

slice함수와 splice함수의 가장 큰 차이점은 slice함수는 기존 배열에 영향을 주지 않고 새로운 배열을 반환한다는 것이다.
또 다른 차이점은 slice함수는 두번째 파라미터로 보낸 원소의 index값 전까지 원소를 제거한다.

const arr = ['a', 'b', 'c', 'd', 'e'];

const arr2 = arr.slice(1, 3);

console.log(arr); //["a", "b", "c", "d", "e"]
console.log(arr2); //["b", "c"]

shift, unshift, push, pop

shift, unshift, push, pop 함수는 기존 배열에 앞, 뒤로 새로운 원소를 추가하거나 기존 배열의 원소를 하나씩 제거하는 함수다.
이 함수들은 모두 기존 배열에 영향을 미치는 함수들이다. 보통 Queue나 Stack을 구현할 때 많이 사용하는 함수들이다.

shift

shift함수는 기존 배열의 원소를 앞에서부터 하나씩 제거한다.

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

arr.shift();
console.log(arr); //[2, 3, 4, 5]

arr.shift();
console.log(arr); //[3, 4, 5]

unshift

unshift함수는 기존 배열에 새로운 원소를 앞에 추가한다.

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

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

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

push

push함수는 기존 배열에 새로운 원소를 뒤에 추가한다.

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

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

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

pop

pop함수는 기존 배열의 원소를 뒤에서부터 하나씩 제거한다.

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

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

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

concat, join

concat

concat은 여러 개의 배열을 하나로 합쳐주는 함수다. 기존 배열들에는 영향을 끼치지 않고 새로운 배열을 반환한다. ES6에서는 concat대신 Spread Operator를 많이 사용한다.

//concat
const arr1 = ['a', 'b'];
const arr2 = ['c', 'd', 'e'];

const newArr = arr1.concat(arr2);

console.log(arr1); //["a", "b"]
console.log(arr2); //["c", "d", "e"]
console.log(newArr); //["a", "b", "c", "d", "e"]
//ES6 Spread Operator
const arr1 = ['a', 'b'];
const arr2 = ['c', 'd', 'e'];

const newArr = [...arr1, ...arr2];

console.log(arr1); //["a", "b"]
console.log(arr2); //["c", "d", "e"]
console.log(newArr); //["a", "b", "c", "d", "e"]

join

join함수는 배열의 원소들을 합쳐 문자열 형태로 반환한다.

const arr = ['a', 'b', 'c', 'd', 'e'];

console.log(arr.join(', ')); //a, b, c, d, e
console.log(arr.join('')); //abcde

every, some

every와 some함수는 배열을 반복을 돌리면서 원소들이 특정 조건에 대하여 통과하는지 여부에 대해 검사한다.

every

every함수는 특정 조건에 대하여 배열의 모든 원소가 통과해야만 true를 반환하며 빈 배열에 대해서는 무조건 true를 반환한다.

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

const result1 = arr.every(item => item <= 5);
const result2 = arr.every(item => item < 3);

console.log(result1, result2); //true false

some

some함수는 특정 조건에 대하여 배열의 어떤 한 요소라도 통과하면 true를 반환하며 빈 배열에 대해서는 무조건 false를 반환한다.

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

const result1 = arr.some(item => item <= 5);
const result2 = arr.some(item => item < 3);

console.log(result1, result2); //true true

sort

sort함수는 정렬 기능을 제공하는 함수다. 실제로 Grid의 정렬 기능을 구현할 때 많이 사용된다.

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

fruit.sort();
console.log(fruit); //["apple", "banana", "orange"]
const imD = [
    { name : "BKJang", age : 27},
    { name : "JHKim", age : 25},
    { name : "SHJo", age : 28},
    { name : "DHJung", age : 29},
    { name : "JSKang", age : 23}
]

/* 이름순 */
imD.sort((a, b) => { // 오름차순
    return a.name < b.name ? -1 : a.name > b.name ? 1 : 0;
});
/**
0: {name: "BKJang", age: 27}
1: {name: "DHJung", age: 29}
2: {name: "JHKim", age: 25}
3: {name: "JSKang", age: 23}
4: {name: "SHJo", age: 28}
*/

imD.sort((a, b) => { // 내림차순
    return a.name > b.name ? -1 : a.name < b.name ? 1 : 0;
});
/**
0: {name: "SHJo", age: 28}
1: {name: "JSKang", age: 23}
2: {name: "JHKim", age: 25}
3: {name: "DHJung", age: 29}
4: {name: "BKJang", age: 27}
*/

/* 나이순 */
const sortingField = 'age';

imD.sort((a, b) => { // 오름차순
    return a[sortingField] - b[sortingField];
});
/**
0: {name: "JSKang", age: 23}
1: {name: "JHKim", age: 25}
2: {name: "BKJang", age: 27}
3: {name: "SHJo", age: 28}
4: {name: "DHJung", age: 29} 
*/

imD.sort((a, b) => { // 내림차순
    return b[sortingField] - a[sortingField];
});
/**
0: {name: "DHJung", age: 29}
1: {name: "SHJo", age: 28}
2: {name: "BKJang", age: 27}
3: {name: "JHKim", age: 25}
4: {name: "JSKang", age: 23} 
*/

reduce

reduce함수는 누적 값과 현재 값을 이용하여 여러 가지 기능을 구현할 수 있는 매우 유용한 함수다. 사실, reduce만 잘 사용할 줄 알아도 filter함수의 기능까지도 구현할 수 있다.

reduce에 대해서는 간단히 설명하는 것 보다는 상세히 설명된 글로 대체한다.


Reference