배열 내장함수

2022년 06월 04일 00시 35분 09초에 업로드 된 글입니다.

작성자: 원2

728x90

indexOf

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

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

findIndex

배열 안에 있는 값이 숫자, 문자열, 또는 불리언일때 찾고 싶은 항목이 몇번쨰 원소인지 ? indexOf

배열 안의 값이 객체, 배열이면 ? findIndex

const memu = [
    {
        id: 1,
        text: '모듬회',
        done: true
    },
    {
        id: 2,
        text: '삼겹살',
        done: true
    },
    {
        id: 3,
        text: '탕수육',
        done: true
    },
    {
        id: 4,
        text: '스시',
        done: true
    }
];

const getIndex = memu.findIndex(get => get.id === 4);
console.log(getIndex);
// result : 3

find

findIndex와 비슷 해당 값 자체를 반환

const memu = [
    {
        id: 1,
        text: '모듬회',
        done: true
    },
    {
        id: 2,
        text: '삼겹살',
        done: true
    },
    {
        id: 3,
        text: '탕수육',
        done: true
    },
    {
        id: 4,
        text: '스시',
        done: true
    }
];

// find
const getFind = memu.find(find => find.id === 3);
console.log(getFind);
// result : {id: 3, text: '탕수육', done: true}

filter

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

filter 함수에 넣는 파라미터는 조건을 검사하는 함수를 넣고 이 함수의 파라미터로 각 원소의 값을 받아옴

const memu = [
    {
        id: 1,
        text: '모듬회',
        done: true
    },
    {
        id: 2,
        text: '삼겹살',
        done: true
    },
    {
        id: 3,
        text: '탕수육',
        done: true
    },
    {
        id: 4,
        text: '스시',
        done: false
    }
];

// filter
const getFilter = memu.filter(filter => filter.done === false);
//아래와 같은 코드로도 가능
//const getFilter = memu.filter(filter => !filter.done);
console.log(getFilter);
// result : 하나의 배열을 가져옴
// [{...}]
// 0: {id: 4, text: '스시', done: false}
// length: 1
// [[Prototype]]: Array(0)

splice

배열에서 특정 항목을 제거할 때 사용

3을 지우기 위해 해다 index를 알아내고 지움

첫번째 파라미터 => 지울 인덱스

두번째 파라미터 => 지울 인덱스로 부터 몇개?

// splice
const numss = [1, 2, 3, 4, 5];
const numssIndex = numss.indexOf(3);
numss.splice(numssIndex, 1);
console.log(numss);
// result : [1, 2, 4, 5]

slice

splice 와 비슷하지만 slice 는 기존의 배열은 건들이지 않음

첫번째 파라미터 => 어디서부터 자를지

두번째 파라미터 => 어디까지 자를지 (해당 인덱스 앞까지)

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

shift

첫번째 원소를 배열에서 추출, 해당 원소는 배열에서 사라짐

pop 와 비슷하지만 다름

// shift
const numbers = [10, 20, 30, 40, 50];
const shifted = numbers.shift();
console.log(shifted);
// result : [20, 30, 40, 50]
console.log(numbers);
// result : 10

pop

배열의 맨 마지막의 원소를 추출, 해당 원소는 배열에서 사라짐

아래의 값은 위 의 shift 와 연결해서 10이 사라져 있는 상태임

// pop
const poped = numbers.pop();
console.log(poped);
// result : [20, 30, 40]
console.log(numbers);
// result : 50

unshift

shift 의 반대, 배열의 맨 앞에서 새 원소를 추가

// unshift
const newNum = [1, 2, 3, 4, 5];
newNum.unshift(7);
console.log(newNum);
// result = [7, 1, 2, 3, 4, 5]

concat

여러개의 배열을 하나로 합침

배열에 변화를 주지 않음 (기존의 상태를 유지)

// concat
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const conscated = arr1.concat(arr2);
console.log(conscated);
// result : [1, 2, 3, 4, 5, 6]

join

배열 안의 값들을 문자열 형태로 합침

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

reduce

첫번째 파라미터 => accumlator, current 를 파라미터로 가져와서 결과를 반환하는 콜백 함수

두번째 파라미터 => reduce 함수에서 사용할 초깃값

함수 방식 => accumlator 에 배열안에 있는 current 의 값을 accumlator 와 currnet 를 더한 값을 저장 후 연산을 계속함

값이 acc 에 누적되어감, 연산 방식을 바꾸어서 acc 에 카운트를 입힐 수도 있음, 저장소라고 생각하면 편할듯

// reduce
const addNumbers = [1, 2, 3, 4, 5];
const getAddNums = addNumbers.reduce((acc, currnet) => acc + currnet, 0);
console.log(getAddNums);
//result : 15

아래와 같이 코드를 고쳐 보면 acc 가 어떻게 동작하는지 알 수 있음

const addNumbers = [1, 2, 3, 4, 5];
let sum = addNumbers.reduce((acc, currnet) => {
    console.log({ acc, currnet });
    return acc + currnet;
}, 0 );

예제)

배열에서 숫자 10 보다 큰 숫자의 갯수를 구하라.

function add(nums) {
    return nums.reduce((acc, current) => {
        if (current > 10) {
            return acc + 1;
        } else {
            return acc;
        }
    }, 0);
}

const count = add([1, 2, 3, 5, 10, 20, 30, 40, 50, 60]);
console.log(count);
//result : 5

해당 배열의 값을 가져온 currnet 가 10 보다 클 때, acc 에 +1 을 해줌으로써 10 보다 큰 숫자의 카운트를 저장,

acc 로 콜백 > result = 5

굿?