[Javascript] 배열 내장함수

forEach

 

각 원소들에 대하여 반복적으로 호출

 

const numbers = ['a', 'b', 'c', 'd', 'e'];

numbers.forEach(number => {
  console.log(number);
});

a 
b 
c 
d 
e 

 

map

 

모든 원소를 다른 형태로 변환해야 할 때

 

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

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

console.log(squared);

(8) [1, 4, 9, 16, 25, 36, 49, 64]

 

indexOf

 

특정 값이 어디에 있는지 알아낼 때

 

const alphabets = ['a', 'b', 'c', 'd']
const index = alphabets.indexOf('c');
console.log(index);

2

 

findIndex

 

특정 원소가 어디 있는지 함수를 돌려서 조건을 만족시키는 원소가 몇번 째 있는지

 

const todos = [
  {
    id: 1,
    text: '자바스크립트'
  },
  {
    id: 2,
    text: '자바'
  },
  {
    id: 3,
    text: '리액트'
  }
];

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

2

 

find

 

객체 자체를 리턴 (findIndex와는 다름)

 

const todos = [
  {
    id: 1,
    text: '자바스크립트'
  },
  {
    id: 2,
    text: '자바'
  },
  {
    id: 3,
    text: '리액트'
  }
];

const index = todos.find(todo => todo.id === 3);
console.log(index);

▶{id: 3, text: "리액트"}
   
▼{id: 3, text: "리액트"}
  id: 3
  text: "리액트"

 

filter

 

배열에서 특정 조건을 만족하는 새로운 배열을 만들 때

 

const todos = [
  {
    id: 1,
    text: '자바스크립트',
    done: true
  },
  {
    id: 2,
    text: '자바',
    done: true
  },
  {
    id: 3,
    text: '리액트',
    done: false
  }
];

const task = todos.filter(todo => todo.done === true);
console.log(task);

▶(2) [Object, Object]

▼(2) [Object, Object]
  0: Object
  1: Object

 

splice

 

특정 인덱스에서 지정하는 갯수만큼 삭제 (기존의 배열에 변화를 줌)

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

▶(3) [10, 20, 40]

 

slice

 

지정 인덱스부터 지정하는 갯수를 삭제 (기존의 배열에 변화를 안줌)

const numbers = [10, 20 , 30, 40];
const sliced = numbers.slice(0, 2);
console.log(sliced);
console.log(numbers);

▶(2) [10, 20]
▶(4) [10, 20, 30, 40]

 

shift

 

배열의 맨 왼쪽에 있는 것을 밖으로 빼냄 (기존의 배열에 변화를 줌)

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

10
▶(3) [20, 30, 40]

 

pop

 

배열의 맨 오른쪽에 있는 것을 밖으로 빼냄 (기존의 배열에 변화를 줌)

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

40
▶(3) [10, 20, 30]

 

unshift

 

배열의 맨 왼쪽에 삽입 

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

▶(5) [5, 10, 20, 30, 40]

 

push

 

배열의 맨 오른쪽에 삽입 

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

▶(5) [10, 20, 30, 40, 50]

 

concat

 

배열 두개를 합쳐서 새로운 배열을 생성

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

console.log(concated);

▶(6) [1, 2, 3, 4, 5, 6]

 

join

 

배열을 특정 세퍼레이터를 사용해서 문자열로 생성

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

console.log(array.join());
console.log(array.join(''));
console.log(array.join(', '));

1,2,3,4,5 
12345 
1, 2, 3, 4, 5 

 

reduce

 

초기값으로 설정한 accumulator를 사용해서 accumulator와 current 값을 이용하여 값을 추출

 

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

console.log(sum);

15

 

 

 

 

 

#패스트캠퍼스 #자바스크립트 #밸로퍼트