개발/javascript

배열 내장함수 정리

독코더 2022. 10. 2. 16:41
반응형

 

forEach : 각원소들을 반복적으로 호출할 수 있는 함수

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

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

 

map: 각원소들을 다른 형태로 변환해야할 때 사용하는 함수

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

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

 

indexOf: 특정 원소가 어디있는지 알아내는 함수

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

 

findIndex: 특정 원소를 조건을 통해 찾아낼수 있도록 하는 함수

find: findIndex와는 다르게 객체 자체를 리턴하는 함수

filter: 배열에서 특정조건을 만족하는 원소들로 새로운 배열을 만드는 함수

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.findIndext(todo => todo.id === 3);
console.log(index) // 2

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

const tasksNotDone = todos.filter(todo => todo.done === false);
console.log(tasksNotDone); // [{id: 4, text: '배열 내장함수 배우기', done: false}];

 

splice: 특정인덱스에서 몇개를 지우는 함수

const numbers = [10, 20, 30, 40];
const index = numbers.ondexOf(30); // 2
numbers.splice(index, 1); // 2부터 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]

*splice는 기존의 배열에 변화를 주는 반면에 slice는 기존의 배열에 변화를 주지 않습니다.

 

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

 

unshifit: 맨 왼쪽에 새로운 원소값을 삽입하는 함수

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

*왼:shift와 unshift / 오:pop과 push가 짝입니다.

 

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: 배열을 특정 seperator를 이용해서 문자열로 만드는 함수

const arr = [1, 2, 3, 4, 5];
console.log(arr.join());     // 1,2,3,4,5
console.log(arr.join(' '));  // 1 2 3 4 5
console.log(arr.join(', ')); // 1, 2, 3, 4, 5

 

reduce: 누적값을 계산하는 함수

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

console.log(sum);
반응형