✅ 배열 내장 함수(자바스크립트)

forEach

: for문 대체, 배열 안에 있는 모든 원소들을 모두 출력

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

//for문으로 배열 안에 있는 모든 원소 출력
for (let i=0; i<superheroes.length; i++){
	console.log(superheroes[i]);
}

//forEach함수 사용
superheroes.forEach(hero => {
	console.log(hero);
});

- forEach 함수의 파라미터로 각 원소에 대하여 처리하고 싶은 코드를 함수로 넣어줌

- 콜백함수: 함수형태의 파라미터를 전달하는 것

 

map

: 배열 안의 각 원소를 변환할 때 사용, 새로운 배열이 만들어짐

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

const squared = [];

//for문 이용
for (let i=0; i<array.length; i++){
	squared.push(array[i]*array[i]);
}

console.log(squared);

//forEach 이용
array.forEach(n => {
	squared.push(n*n);
});

console.log(squared);

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

- map함수의 파라미터로 변화를 주는 함수 전달(변화함수)

 

indexOf

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

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

const index=superheroes.indexOf('토르');
console.log(index);

- index값은 0부터 시작

 

findIndex

: 배열 안에 있는 값이 객체이거나, 배열인 경우 몇 번째 인지 찾아주는 함수(조건을 반환하는 함수 넣어 찾음)

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

 

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

: 배열에서 특정 조건을 만족하는 값들만 따로 추출하여 새로운 배열 만듦

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
  }
];
*/

- filter함수에 넣는 파라미터: 조건을 검사하는 함수(각 원소의 값 받아옴)

 

splice

: 배열에서 특정 항목 제거

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

//결과값
//[10, 20, 40]

- 첫 번째 파라미터는 어떤 인덱스를 지울지 의미, 두 번째 파라미터는 그 인덱스로 부터 몇 개를 지울지 의미

 

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: 첫 번째 원소를 배열에서 추출 (추출하는 과정에서 배열에서 해당 원소 사라짐)

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

/*
10
[20, 30, 40]
*/

pop: push의 반대 개념, push는 배열의 맨 마지막에 새 항목 추가, pop은 맨 마지막 항목을 추출

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

/*
40
[10, 20, 30]
*/

 

unshift

: 배열의 맨 앞에 새 원소 추가

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과 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

 

reduce

: 배열의 각 요소를 순회하며 콜백함수의 실행 값을 누적하여 하나의 결과값 반환

//주어진 배열에 대한 총합 구하기
const numbers = [1, 2, 3, 4, 5];

let sum = 0;

//forEach 사용
numbers.forEach(n => {
  sum += n;
});
console.log(sum);

//reduce 사용
let sum = array.reduce((accumulator, current) = > accumulator+current,0);

console.log(sum);

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

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