배열 내장함수

배열을 다룰 때 알고있으면 유용한 내장함수들을 알아보자.

 

forEach

for문을 대체시킬 수 있다.

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

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

forEach 함수의 파라미터로는, 각 원소에 대항 처리하고 싶은 코드를 함수로 넣어준다. 위 함수의 파라미터 hero 는 각 원소를 가리키게 된다. 이렇게 함수 형태의 파라미터를 전달하는 것을 콜백함수라고 부른다.

 

map

map 은 배열 안의 각 원소를 변환할 때 사용되며, 이 과정에서 새로운 배열이 만들어진다.

map 함수의 파라미터로는 변화를 주는 함수를 전달해준다. 또는 변화 함수를 선언해주지 않아도 바로 전달해주는 방법도 있다.

const items = [
  {
    id: 1,
    text: 'hello'
  },
  {
    id: 2,
    text: 'bye'
  }
];

const texts = items.map(item => item.text);
console.log(texts);  // ["hello", "bye"]

 

예) 배열 안의 모든 숫자를 제곱해서 새로운 배열을 만든다.

• for문 : 배열을 돌아서 숫자를 곱해주고 push로 새로운 배열에 추가해준다.

  • const array = [1, 2, 3, 4, 5, 6, 7, 8]; 
    const squared = []; 
    for (let i = 0; i < array.length; i++) { 
    	squared.push(array[i] * array[i]); 
    } 
    console.log(squared);

• forEach : 동일하게 배열을 돌아 숫자를 곱해주고 push로 새로운 배열에 추가해준다.

  • const array = [1, 2, 3, 4, 5, 6, 7, 8];
    const squared = [];
    array.forEach(n => {
      squared.push(n * n);
    });
    console.log(squared);

• map : 함수의 파라미터로 배열에 변화를 주는 함수를 전달해준다.
  • 변화함수 square 는 파라미터 n 을 받아와서 이를 제곱해준다. array.map 함수를 사용할 때 square 를 변화함수로 사용함으로서 내부의 모든 값에 대하여 제곱을 해서 새로운 배열을 생성하였다. 변화 함수를 꼭 이름을 붙여서 선언할 필요는 없다. 

  • const array = [1, 2, 3, 4, 5, 6, 7, 8];
    
    const square = n => n * n;
    const squared = array.map(square);
    console.log(squared);

  • const squared = array.map(n => n * n);
    console.log(squared);

 

indexOf

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

배열 내부 값으로는 숫자, 문자열, 불리언이 있다.

const superheroes = ['아이언맨', '캡틴 아메리카', '토르', '닥터 스트레인지'];
const index = superheroes.indexOf('토르');
console.log(index);    // 2

 

findIndex

만약 배열 안에 있는 값이 숫자, 문자열, 불리언이라면 찾고자 하는 항목이 몇 번째 원소인지 알아내려면 indexOf 를 사용하면 된다. 하지만 배열 안에 있는 값이 객체이거나 배열이라면 indexOf 로 찾을 수 없다.

객체가 몇 번째인지 찾으려면 findIndex 함수에 검사하고자 하는 조건을 반환하는 함수를 넣어서 객체의 index 값을 찾을 수 있다.

 

예) id 가 3인 객체는 몇 번째인가?

const todos = [
  {
    id: 1,
    text: '자바스크립트 입문',
    done: true
  },
  {
    id: 2,
    text: '함수 배우기',
    done: true
  },
  {
    id: 3,
    text: '객체와 배열 배우기',
    done: true
  },
  {
    id: 4,
    text: '배열 내장함수 배우기',
    done: false
  }
];

const index = todos.findIndex(todo => todo.id === 3);
console.log(index);  // 2

 

find

find 함수는 findIndex 와 비슷하지만 찾아낸 값이 몇 번째인지 알아내는 것이 아니라, 찾아낸 값 자체를 반환한다.

const todos = [
  {
    id: 1,
    text: '자바스크립트 입문',
    done: true
  },
  {
    id: 2,
    text: '함수 배우기',
    done: true
  },
  {
    id: 3,
    text: '객체와 배열 배우기',
    done: true
  },
  {
    id: 4,
    text: '배열 내장함수 배우기',
    done: false
  }
];

const todo = todos.find(todo => todo.id === 3);
console.log(todo);
// {id: 3, text: "객체와 배열 배우기", done: true}

 

filter

filter 함수는 배열에서 특정 조건을 만족하는 값들만 따로 추출하여 새로운 배열을 만든다.

filter 함수에 넣는 파라미터는 조건을 검사하는 함수를 넣어주며, 이 함수의 파라미터로 각 원소의 값을 받아오게 된다.

const todos = [
  {
    id: 1,
    text: '자바스크립트 입문',
    done: true
  },
  {
    id: 2,
    text: '함수 배우기',
    done: true
  },
  {
    id: 3,
    text: '객체와 배열 배우기',
    done: true
  },
  {
    id: 4,
    text: '배열 내장함수 배우기',
    done: false
  }
];

const tasksNotDone = todos.filter(todo => todo.done === false);
console.log(tasksNotDone);

/* 결과
[
  {
    id: 4,
    text: '배열 내장 함수 배우기',
    done: false
  }
];
*/

const tasksNotDone = todos.filter(todo => !todo.done);

이렇게 입력할 수도 있다.

filter 에 넣어준 함수에서 true 를 반환하면 새로운 배열에 따로 추출을 해준다. 만약 todo.done 값이 false 라면, !false 가 되고 이 값은 true 이기 때문에, 이전의 todo.done === false 와 똑같이 작동하게 된다.

 

splice

splice 는 배열에서 특정 항목을 제거할 때 사용한다. 

splice 를 사용할 때 첫번째 파라미터는 어떤 인덱스부터 지울지를 의미하고, 두번째 파라미터는 기준 인덱스로부터 몇 개를 지울지를 의미한다.

 

예) 배열에서 30을 지운다고 해보자.

- 30이 몇 번째 index 인지 알아낸 후, 이를 splice 를 통해 지워줄 수 있다.

const numbers = [10, 20, 30, 40];
const index = numbers.indexOf(30);
const spliced = numbers.splice(index, 1);
console.log(spliced);  // [30]
console.log(numbers);  // [10, 20, 40]

 

slice

slice 는 splice 처럼 배열을 잘라낼 때 사용하는 것은 비슷하지만 기존의 배열은 건드리지 않는다.

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]

 

shift / pop

shift 와 pop 은 비슷하지만 다르다.

shift 는 첫번째 원소를 배열에서 추출해준다. (추출하는 과정에서 배열에서 해당 원소는 사라진다.)

pop 은 맨 마지막 항목을 추출한다. (*push 는 맨 마지막에 새 항목을 추가)

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

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

 

unshift

unshift 는 shift 와 반대로, 배열의 맨 앞에 새 원소를 추가한다.

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

 

concat

concat 은 여러개의 배열을 하나의 배열로 합쳐준다.

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];

 

join

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

 

reduce

reduce 함수에는 두 개의 파라미터를 전달한다.

첫번째 파라미터에는 accumulator 와 current 를 파라미터로 가져와 결과를 반환하는 콜백함수이다.

두번째 파라미터에는 reduce 함수에서 사용할 초기값이다.

accumulator 는 누적된 값을 의미한다.

arr.reduce((누적된 값, 현재값) => 결과 반환(콜백함수), 초기값);

 

예) 주어진 배열에 대하여 총합 구하기

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

let sum = 0;
numbers.forEach(n => {
  sum += n;
});
console.log(sum);  // 15

sum 을 계산하기 위해 sum 을 선언해주고, forEach 를 통하여 배열을 돌면서 sum 에 더해주도록 했다.

 

이것을 reduce 함수로 작성하면 다음과 같이 구현할 수 있다.

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

console.log(sum);  // 15

배열을 처음부터 끝까지 반복하면서 우리가 전달한 콜백함수가 호출된다.

가장 처음엔 accumulator 값이 0 이다. 우리가 두번째 파라미터인 초기값으로 0 을 설정했기 때문이다.

 

처음 콜백 함수가 호출되면, 0 + 1 을 해서 1 이 반환된다.

이렇게 1 이 반환되면 그 다음번에 콜백함수가 호출될 때 accumulator 값으로 사용된다.

콜백함수가 두번째로 호출될 땐 1 + 2 를 해서 3 이 되고, 이 값이 세번째로 호출될 때의 accumulator 가 된다.

그래서 쭉 누적되어 결과로 15 가 나타나는 것이다.

 

예) 평균 계산하기

const numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce((accumulator, current, index, array) => {
  if (index === array.length - 1) {  // index 번호가 배열의 마지막 숫자일 때까지 더하고 나면 return
    return (accumulator + current) / array.length;
  }
  return accumulator + current;
}, 0);

console.log(sum);  // 3

위 코드의 reduce 에서 사용한 콜백함수에서는 추가 파라미터로 index 와 array 를 받아왔다.

index 는 현재 처리하고 있는 항목이 몇번째인지 가리키고, array 는 현재 처리하고 있는 배열 자신을 의미한다.

 

예) 배열 내에 같은 문자의 갯수 세기

const alphabets = ['a', 'a', 'a', 'b', 'c', 'c', 'd', 'e'];
const counts = alphabets.reduce((acc, current) => {
  if (acc[current]) {
    acc[current] += 1; // current 가 존재하면 1을 더해줌
  } else {
    acc[current] = 1;  // current 가 존재하지 않으면 1 설정
  }
  return acc;
}, {})

console.log(counts);
// {a:3, b:1, C: 2, d: 1, e: 1}

초기값으로 { } 객체를 생성해준다.

처음으로 오는 배열 'a' (current) 가 acc 에 존재하는지 확인한다.

current 가 존재하면 1 을 더해주고, current 가 존재하지 않으면 1 로 설정해준다.

따라서 a 가 처음 올때는 a:1, 두번째로 올때는 a:2, 세번째로 올때는 a:3 으로 개수를 점차 늘려가면서 카운팅 해준다. (다른 알파벳도 동일하게 적용)