JavaScript- 배열 내장함수

※ 강의를 듣고 제가 이해한 것을 바탕으로 정리한 것이라서 오류가 있을 수 있습니다.

 

1. forEach

forEach문은 배열에 있는 원소들을 반복시킬때 사용되는 함수로 for문을 대체 할 수 있다.

 

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

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

forEach 함수의 파라미터로는 배열의 각 원소에 대하여 처리하고 싶은 코드를 함수로 넣어준다.

위의 함수의 파라미터 hero는 배열의 각 원소를 가르키게 된다.

이렇게 함수형태의 파라미터를 전달하는 것을 콜백 함수라고 부르고 함수를 등록해주면 forEach가 실행을  해주는 것이다.

 

실행결과

 

2. map

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

 

예를 들어 아래와 같은 배열이 있을때 배열안에 있는 모든 원소들을 제곱해서 새로운 배열을 만든다고 할때

map을 사용하면 이렇게 할 수 있다.

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

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

map 함수의 파라미터로는 변화를 주는 함수를 전달해준다.

위 코드에서 변화함수로 사용된 square는  파라미터 n을 받아와서 제곱을 해주고

map함수를 사용할 때 square를 변화함수로 사용함으로서 내부의 모든 값에 대하여  제곱을 해서

새로운 배열을 생성된 것이다.

 

실행 결과

 

 

3. indexOf

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

 

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

위 슈퍼히어로즈 배열에서 토르가 몇번째 원소인지 알고 싶다면 위와 같이 indexOf(토르)라고 indexOf 함수를 쓰면 된다.

 

실행 결과

 

4.findIndex

찾고자 하는 원소가 배열이거나 객체일때 사용하는 함수이다.(indexOf함수로는 배열과 객체를 찾을 수 없다.)

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

 

 

만약 id가 3인 객체가 몇번째 원소인지 찾고자 한다면 위 코드와 같이

findIndex함수를 사용하여 id가 3인 객체를 찾는 함수를 파라미터로 넣어서 찾으면 된다.

 

실행 결과

 

 

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

 

실행 결과

 

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

 

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

여기서는 조건을 false로 해주었기에 실행 결과로 아래와 같이 출력된다.

 

실행 결과

 

7. splice

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

 

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

numbers.splice(2, 1);
console.log(numbers);

 

실행 결과

 

 

8. slice

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

위의 경우에는 2까지 자르는걸로 되어 있는데 지정한 index 바로 앞 순서까지 잘린다.

 

실행 결과

 

9. push

push는 배열의 맨 뒷부분에 새 항목을 추가하는 함수이다.

 

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

numbers.push(8);
console.log(numbers);

실행 결과

 

 

10. pop 

pop은 맨 뒷부분의 항목을 추출하는 함수이다.

 

const numbers = [10, 20, 30, 40];
const value = numbers.pop();
console.log(value); // 추출된 항목 출력
console.log(numbers);// 추출된 후 배열 상태 출력

 

실행 결과

 

 

11. shift

shift는 첫번째 원소를 배열에서 추출해주는 함수이다.

 

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

실행 결과

 

 

12. unshift

unshift는 배열의 맨 앞부분에 원소를 추가해주는 함수이다.

 

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

실행 결과

 

 

13.concat

concat은 여러개의 배열을 하나의 배열로 합쳐주는 함수이다.

 

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

console.log(concated);

concat 함수는 arr1 과 arr2 에 변화를 주지 않고 합쳐진다.

 

실행 결과

 

 

14. 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

 

실행 결과

 

 

 

15. reduce

reduce함수는 정말 유용한 함수인데 배열안의 원소의 총합이나 평균등을 구할때 사용된다.

 

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

console.log(sum);

reduce함수는 두개의 파라미터를 사용하는데 첫번째 파라미터는 accumlator와 current를 파라미터로 하는 함수이고

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

여기서 accumlator는 누적된 값을 의미하고 current는 새롭게 더해질 배열의 값을 의미한다.

 

실행 결과

 

배열을 처음부터 끝까지 반복하면서 첫번째 파라미터로 전달된 함수가 호출이 되는데

처음에 accumlator 값이 0인 이유는 2번째 파라미터에서 0으로 초기값을 설정 했기 때문이다.

처음 함수가 호출되면 0+1이 되어 accumlator에 1이 반환되고 

두번째로 함수가 반복하게 되면 1+2를 해서 3이 되고 이것이 세번째로 호출됬을때 accumlator값으로

쓰이고 쭉 이어져서 총합이 15가 되는 것이다.