javascript #10. 배열 내장 함수

실무에서 많이 쓰이는 배열 내장 함수!!

배열을 다루어 써야할 때 유용한 내장 함수에 대해서 알아보겠습니다!

 

 

forEach - for문을 대체하는 함수 

//for문 
const superheroes = ['아이언맨', '캡틴 아메리카', '토르', '닥터 스트레인지'];

for (let i = 0; i < superheroes.length; i++) {
  console.log(superheroes[i]);
}


//forEach문
const superheroes = ['아이언맨', '캡틴 아메리카', '토르', '닥터 스트레인지'];

superheroes.forEach(hero => {
  console.log(hero);
});

만약 배열의 전체 원소를 출력하고 싶다면 forEach문을 사용하여 더 간편하게 구현할 수 있습니다. 

forEach문을 보면 forEach의 파라미터 hero는 각 원소에 대하여 처리하고 싶은 코드를 함수로 넣어줍니다. 

 

log(hero)를 찍어보면 각각의 원소가 출력됩니다.

 

 

.map 

.map은 배열 안의 원소들을 반환할 때 사용되는데, 다시 반환할 때 새로운 배열이 만들어지고 새로운 배열에 원소들이 담겨져 반환됩니다. 

 

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

const add = n => n + n;
const added = array.map(add);
console.log(added);

위 코드는 원소 4개를 가진 배열이 있습니다.

 

added는 map 함수의 파라미터로 add를 가진 배열의 원소들을 새로 저장할 배열입니다. 

add는 파라미터 n을 받아 한번 더 자신을 더해줍니다. 

그렇게 변화된 함수의 원소를 added라는 새로운 배열에 저장해줍니다. 

 

const added = array.map(n => n + n);
console.log(added);

굳이 add라는 함수의 이름을 생성하지 않고 map() 안에 바로 작성해줘도 됩니다. 

 

 

indexOf - 원하는 항목이 몇번째 원소인지 찾아주는 함수 

 

const class = ['동국', '영아', '병운', '진아'];
const index = class.indexOf('병운');
console.log(index);

indexOf는 찾고싶은 항목이 몇번째 항목에 있는지 알려주는 함수입니다. 

위 코드를 보면 class라는 배열에 4개의 원소값이 있습니다. 

여기서 병운이가 몇번째 항목에 있는지 알려면 indexOf를 사용하여 찾을 수 있습니다. 

병운이는 2번째 배열에 있기 때문에 2가 출력됩니다. (배열은 0부터 시작) 

 

findIndex- 배열 안에 있는 객체 또는 배열, 그  안에 있는 값을 찾고자 할 때 사용 

 

find - 배열 안에 있는 객체 또는 배열, 그  안에 있는 값을 반환

const todoLists = [
  {
    id: 1,
    todo: '공부하기',
    date: 23.01.11
  },
  {
    id: 2,
    todo: '집청소하기',
    date: 23.01.11
  },
  {
    id: 3,
    todo: '장보기',
    date: 23.01.11
  },
  {
    id: 4,
    todo: '취미활동하기',
    date: 23.01.11
  }
];

const todoList = todoLists.find(list => list.id === 3);
console.log(todoList);

예를들어, 해야 할 일을 나열해놓은 배열이 있다고 합시다.

해야할일은 총 4가지이고 그 안에 각각의 id, todo, date 의 값들이 있습니다. 

 

즉, 배열안에 4개의 객체가 들어가있습니다. 

4개의 객체중에서 id가 3인 객체가 뽑아내고 싶을 때 사용하는것이 find입니다. 

todoList를 보면 todoLists에서 id가 3인 객체만 뽑아내고있습니다. 

 

따라서 {id: 3, todo: '장보기', date: 23.01.11}인 객체가 나옵니다. 

 

filter - 특정 조건으로 새로운 배열 추출 

filter 함수도 find랑 비슷한데 , 배열에서 특정 조건을 만족하는 값들만 따로 추출하여 새로운 배열을 만드는 함수입니다. 

const todoList = todoLists.filter(list => list.todo === "장보기);
console.log(todoList);
//[{
    id: 3,
    todo: '장보기',
    date: 23.01.11
    }];

todolists 배열에서 todo가 장보기인 객체를 추출하여 새로운 배열 todoList를 만듭니다. 

 

.filter() 파라미터 안에는 조건을 검사해주는 함수를 넣어주고 , 조건에 맞는 원소 값을 추출합니다. 

 

splice- 배열의 특정 항목 제거 

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

const index = numbers.indexOf(2);
numbers.splice(index, 1);
console.log(numbers);

1,2,3,4의 원소가 포함된 배열 numbers를 생성했습니다. 

 

예를 들어 값이 2인 원소를 지우고 싶을 때, 

먼저 위에서 배웠던 indexOf 를 사용하여 2의 값이 몇번째 항목에 위치했는지 찾아줍니다. 

찾은 후 배열 numbers에서 2를 제거해줍니다. 

splice(index,1) 에서 첫번째 파라미터는 어떤 인덱스를 지울 지, 두번째 파라미터는 그 인덱스부터 몇개를 지울 지 결정합니다. 

 

slice - 배열을 잘라날 때 사용 

const numbers = [10, 20, 30, 40];
const sliced = numbers.slice(0, 2); // 0부터 시작해서 2전까지

console.log(sliced); // [10, 20]
console.log(numbers); // [10, 20, 30, 40]

slice를 splice랑 비슷하게 배열을 잘라날 때 사용하는데 

slice는 기존 배열을 건들지 않습니다. 

 

10,20,30,40 을 각 원소로 받는 배열 numbers가 있고 배열.slice(0,2)를 사용하여 배열[0]에서 시작해서 배열[2] 전까지 자릅니다. 

.slice(a ,b) 에서 a는 자르는 시작위치를, b는 b전까지 자르겠다를 의미합니다. 

 

 

shift / pop -배열 추출

shift는 배열에서 첫 번째 원소를 추출을, 

pop은 배열에서 마지막 원소를 추출해줍니다. 

 

이때 추출해주고 기존에 배열에서는 추출한 값은 사라집니다. 

 

const numbers = [10, 20, 30, 40];
const value = numbers.shift();
const result = numbers.pop();
console.log(value);  //10
console.log(result); //40
console.log(numbers);  //[20,30]

 

 

unshift  - 배열 맨 앞에 원소 추가 

shift의 반대로 배열에서 맨 앞에 새로운 원소를 추가해줍니다. 

const numbers = [10, 20, 30, 40];
numbers.unshift(5);
console.log(numbers);  //[5, 10, 20, 30, 40]

 

concat - 여러 배열을 하나의 배열로 합침 

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

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

arr1.concat(arr2) 코드를 추가하여 배열 두개를 새로운 배열에 하나로 합쳐주었습니다. 

concated라는 새로운 배열에 코드가 합쳐졌지만 기존 배열 arr1 과 arr2는 그대로 유지됩니다. 

 

 

join - 배열 안에 원소들을 문자열 형태로 합침

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

array 배열을 join () 파라미터로 공백을 주면 각 원소들이 공백이 생긴채로 문자열 형태로 합쳐져서 변환됩니다. 

파라미터 안에 공백 값을 넣으면 자동으로 쉼표로 원소 값이 구분되어 반환됩니다. 

 

reduce 

const numbers = [1, 2, 3, 4, 5];
let sum = array.reduce((accumulator, current) => accumulator + current, 0);

console.log(sum);

reduce 함수는 유용한 함수입니다. 

위 코드에서 array.reduce() 코드를 보면 첫 번째 파라미터는 accumulator(누적된 값) 과 current 값을 받아와서 결과를 반환해주는 콜백함수이고 , 두번째 파라미터는 reduce 함수에서 사용하는 초기값을 의미합니다. 

 

const numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce((accumulator, current) => {
  console.log({ accumulator, current });
  return accumulator + current;
}, 0);

console.log(sum);

값 5개를 배열 numbers를 reduce 함수를 실행시켜 반환하는 새로운 변수를 sum이라고 선언했습니다. 

배열에서 누적된 값과 현재 값을 가져와서 더해주고 반환시켜준 값을 sum 에 저장합니다. 

초기값은 0이므로 처음에는 0과 1이 들어가고 더해준 값 1을 반환시켜 누적값이 됩니다. 

그 다음으로는 누적값 1과 2가 각 acuumulator과 current에 들어갑니다. 

 

실행하면 총합은 15가 나오게 됩니다. 

 

이처럼 여러가지 상황에서 reduce 함수를 적용하여 사용할 수 있습니다. 

 

 

참고자료: 벨로퍼트