배열 내장함수

이번에는 배열을 다룰 때 알고있으면 너무나 유용한 다양한 내장 함수들에 대하여 알아보겠습니다.

forEach

forEach는 가장 쉬운 배열 내장함수입니다. 기존에 우리가 배웠던 for 문을 대체 시킬 수 있습니다.

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

다음과 같은 배열이 있고, 배열 안에 있는 모든 값을 출력해야 한다면 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 함수는 피라미터로는, 각 원소에 대하여 처리하고 싶은 코드를 함수로 넣어줍니다. 이 함수의 파라미터(매개변수) hero는 각 원소를 가르키게 됩니다.

이렇게 함수형태의 파라미터(매개변수)를 전달하는 것을 콜백함수 라고 부릅니다. 함수를 등록해주면, forEach가 실행을 해주는거죠.

map

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

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

위와 같은 배열이 있고, 이 배열 안의 숫자를 모두 제곱해서 새로운 배열을 만들고 싶다고 어떻게 해야 할까요?

map 함수를 사용하지 않고 우리가 지금까지 배운 지식들을 활용하면 다음과 같이 구현 할 수 있습니다.

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

배열에 반복문을 사용해서  계속해서 제곱해나간다는 값을 주는 것입니다.

[1, 4, 9, 16, 25, 36, 49, 64];

결과는 다음과 같이 출력이 될 것입니다. 이것을 map을 사용하면 더 짧은 코드를 사용하여 구현이 됩니다.

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

  const add = n => n * n;
  const abc = array.map(add);
  console.log(abc);

위와 같은 결과가 나타났는지 확인 해봅니다.

map함수의 파라미터(매개변수)로는 변화를 주는 함수에게 전해줍니다. 이를 변화함수라고 부르도록 하겠습니다.

현재 우리의 변화함수 add는 파라미터 n을 받아와서 이를 제곱해줍니다.

array.map 함수를 사용 할 때 add는 파라미터 n을 받아와서 이를 제곱해줍니다.

array.map 함수를 사용 할 때 add는 변화함수로 사용함으로서, 내부의 모든 값에 대하여 제곱을 해서 새로운 배열을 생성하였습니다.

변화함수를 꼭 이름을 붙여서 선언 할 필요는 없습니다. 코드를 다음과 같이 작성해도 됩니다.

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

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

훨씬 간결 해지죠?

indexOf

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

예를 들어서 다음과 같은 배열이 있을 때

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

여기에서 토르가 몇 번째 항목인지 알고싶다고 가정해봅시다.

그렇다면 아래와 같이 입력 할 수 있습니다.

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

결과는 배열은 0부터 시작하기 때문에, 2에 위치한 토르가 나타납니다.

2

index 값은 0 부터 시작하기 때문에 0: 아이언맨 1: 캡틴 아메리카 2: 토르 이렇게 돼서 2라는 값이 나타나는 것 입니다.

findlndex

만약에 배열 안에 있는 숫자, 문자열, 또는 불리언이라면 찾고자 하는 항목이 몇번째 값인지 알아내려면 indexOf를 사용하면 됩니다. 

하지만, 배열 안에 있는 값이 객체이거나, 배열이라면 indexOf로 찾을 수 없습니다.

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

];

다음과 같은 배열이 있다고 가정해봅시다.

여기서 만약 id가 3인 객체가 몇번째에 있는지 찾으려고 한다면, findIndex함수에 검사하고자 하는 조건을 반환하는 함수를 넣어서 찾을 수 있습니다.

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

결과는 다음과 같습니다.

Object {id: 3, text: "객체와 배열 배우기", done: true}

 

filter

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

예를 들어서, 우리가 방금 만들었던 todos 배열에서 done 값이 false인 항목들만 따로 추출해서 새로운 배열을 만들어봅시다.

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

filter 함수에 넣는 파라미터는 조건을 검사하는 함수를 넣어주며, 이 함수의 파라미터로 각 원소의 값을 받아오게 됩니다. 방금 우리가 작성한 코드는 이렇게 입력 할 수도 있습니다.

splice

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

const numbers = [10, 20, 30, 40];

위 배열에서 30을 지운다고 가정해봅시다. 그러면, 30이 몇번째 index인지 알아낸 이후, 이를 splice를 통해 지워줄 수 있습니다.

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

결과는 다음과 같습니다.

[10, 20, 40]

splice를 사용 할 때 첫번째 파라미터는 어떤 인덱스부터 지울지를 의미하고 두번째 파라미터는 그 인덱스부터 몇개를

지울지를 의미합니다.

 

slice

slice는 splice랑 조금 비슷한데요, 배열을 잘라낼  때 사용하는데, 중요한점은 기존의 배열은 건들이지 않는 다는 것입니다.

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에는 두개의 파라미터를 넣게 되는데 첫번째 파라미터는 어디서부터 자를지, 그리고 두번째 파라미터는 어디까지 자를지를 의미합니다.

shift 와 pop

shift 와 pop은 비슷하지만, 다릅니다.

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

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

결과는 다음과 같습니다.

10
[20, 30, 40]

 

다음으로 pop을(를) 해볼까요?

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

pop는 push의 반대로 생각하시면 됩니다. push는 배열의 맨 마지막에 새 항목을 추가하고, pop는 맨 마지막 항목을 추출합니다.

unshift

unshift는 shift의 반대입니다.

배열의 맨 앞에 새 원소를 추가합니다.

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

결과는 다음과 같습니다.

[5, 10, 20, 30, 40]

 

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

concat 함수는 arr1과 arr2에 변화를 주지 않습니다.

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함수는 잘 사용 할 줄 알면 정말 유용한 내장함수이니다. 마약 여러분이 주어진 배열에 대하여 총합을 구해야 하는 상황이 왓다고 가정해봅시다. 이렇게 구현을 할 수 있을텐데요.

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

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

(결과는 15가 됩니다)

여기서 sum을 계산하기 위해서 사전에 sum을 선언하고, forEach를 통하여 계속해서 덧셈을 해주었는데요,

reduce라는 함수를 사용하면 다음과 같이 구현 할 수 있습니다.

 

accumulator는 값의 의미는 누적된 값, 

는 어렵다 나중에 수정해야지