배열 내장함수

forEach

forEach는 배열을 쓸때 쓰는 반복문이다. 배열을 하나씩 출력하여 기조에 쓰던 for문을 대체할수 있다.

const pets = ['코코','임당이','아르','루피'];
for (let i = 0; i < pets.length; i++) {
  console.log(pets[i]);
}

이 for문을 foreach를 써서 바꾸면

const pets = ['코코','임당이','아르','루피'];

pets.forEach((pet) => {   //  반복시킬 배열의 변수값을 적고 그 후 forEach를 적어주고 소가로를 적는다.
    console.log(pet);     //소가로 안에는 화살표 함수를 넣어서 소가로에는 설정하고 싶은 변수의 이름을 적어주고 중가로에는 실행하고자 하는 코드를 적는다.
});

이렇게 된다.

map

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

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

const numArray = array.map((num) => (num * num))

console.log(numArray);

결과는 [1, 4, 9, 16, 25, 36]이다.

indexOf

const pets = ['코코','임당이','아르','루피'];
console.log(pets.indexOf('임당이'));

배열의 원하는 항목의 index값을 찾아주는것 정답은 1이다.

findIndex

const todos = [ 
    {
        id: 1,
        text: "코코",
        done: true,
    },
    {
        id: 2,
        text: "임당",
        done: true,
    },
    {
        id: 3,
        text: "아르",
        done: true,
    },
    {
        id: 4,
        text: "루피",
        done: false,
    },
];

let index = todos.findIndex((todo) => todo.id === 3);  //만약 id 값이 3인게 두개면 더 위에 있는게 나오고 끝남
console.log(index);

객체의 index값을 나타내주는것 정답은 2이다.

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,
    },
];
let findTodo = todos.find((todo) => todo.id === 3);
console.log(findTodo);

답은 {id: 3, text: '아르', done: true}이다.

filter

배열에서 특정 조건을 만족하는 값들만 따로 추출하여 새로운 배열을 만든다. find와는 달리 중복된 값가 있어도 다 걸러짐

const todos = [ 
    {
        id: 1,
        text: "코코",
        done: true,
    },
    {
        id: 2,
        text: "임당",
        done: true,
    },
    {
        id: 3,
        text: "아르",
        done: false,
    },
    {
        id: 4,
        text: "루피",
        done: false,
    },
];
let filterTodo = todos.filter(todo => todo.done === false);
console.log(filterTodo);

[{id: 3,text: "아르",done: false,},{id: 4,text: "루피",done: false,}]
이러한 배열이 만들어진다.

splice

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

const numbers = [10,20,30,40];
const index = numbers.indexOf(30);
numbers.splice(index,1); //(원하는 인덱스값,없애려는 개수) -개수가 두개면 우리가 지정한 인덱스값의 다음번 인덱스가 사라짐 ex) 2면 30,40이 사라짐
console.log(numbers);

[10, 20, 40]

slice

slice 는 splice 랑 조금 비슷한데, 배열을 잘라낼 때 사용하는데, 중요한 점은 기존의 배열은 건들이지 않는 다는 것이다.

const numbers = [10,20,30,40];
const sliced = numbers.slice(0,2) //(잘라낼 시작 인덱스값,어디까지 잘라내줄건지 알려주는 인덱스 ex- 저 경우는 10,20이 사라짐 2이면 30이지만 30의 전까지 없애준다는 의미)

console.log(sliced); //[10,20]
console.log(numbers); //[10,20,30,40]

shift,pop,unshift

shift : 제일 앞에꺼 삭제
pop : 제일 마지막꺼 삭제
unshift : 제일 앞에 추가해주는거

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

const valuePop = numbers.pop();
console.log(numbers); //[20,30]

const valueUnshift = numbers.unshift(100);
console.log(numbers); //[100,20,30]

concat

여러개의 배열을 하나의 배열로 합쳐줌

const arr1 = [1,2,3];
const arr2 = [4,5,6];

const concated = arr1.concat(arr2); //어떤 배열 안에 어떤 배열을 넣을지 결정해줘야함 합쳐지는 거라 1뒤에 2가 붙음
console.log(concated); // [1,2,3,4,5,6]

join

배열안의 값들을 문자열 형태로 바꿔줌

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

reduce함수는 배열의 각 요소를 순회하며 callback함수의 실행 값을 누적하여 하나의 결과값을 반환 한다.

const numbers = [1,2,3,4,5];
let sum = numbers.reduce((item, current)=>{   //item은 결과값인데 처음에는 기본값으로 0이 나온다., current는 numbers배열의 하나하나의 값이다.
    console.log(item, current);
    return item + current;  // 0,1    1,2    3,3   6,4   10,5   이 순서로 찍힌다.
},0) // reduce를 쓸때는 화살표함수를 먼저 쓰고 , 초기값을 설정해줘서 item의 처음에 들어가는 수를 정한다.
console.log(sum);  //15

삼항연산자

if문을 간단하게 표현하고 싶을때 사용한다.
?는 참일 경우 :은 거짓일 경우

const arr = [];
let test = "";
if(arr.length === o){
    text = "배열이 비어있습니다.";
}else{
    text = "배열이 비어있지 않습니다.";
}                                                        

위와 같은 if문을 삼항연산자를 사용하여 바꾸면

let text = arr.length === 0 ? "배열이 비어있습니다." : "배열이 비어있지 않습니다."; 
console.log(text);

이렇게 바꿀수 있다. 하지만 복잡한 조건문에서는 사용하면 가독성이 떨어지므로 간단한 조건문에서만 사용하는걸 추천한다.