[JavaScript] 배열

배열 요소 조작

1. push

배열의 맨 뒤에 새로운 요소를 추가하는 메서드

let arr1 = [1,2,3];
const newLength = arr1.push(4,5,6);

2. pop

배열의 맨 뒤에 있는 요소를 제거하고 반환

let arr2 = [1,2,3];
const poppedItem = arr2.pop();

3. shift

배열의 맨 앞에 있는 요소를 제거하고 반환

let arr3 = [1,2,3];
const shiftedItem = arr3.shift();

4. unshift

배열의 맨 앞에 새로운 요소를 추가하는 메서드

let arr4 = [1,2,3];
const newLength2 = arr4.unshift();

5. slice

배열의 특정 범위를 잘라내서 새로운 배열로 반환

let arr5 =[1,2,3,4,5];
let sliced = arr5.slice(2,5);
let sliced2 = arr5.slice(2);
let sliced3 = arr5.slice(-3);

6. concat

두개의 서로 다른 배열을 이어 붙여서 새로운 배열을 반환

let arr6 = [1,2];
let arr7 = [3,4];
let concatedArr = arr6.concat(arr7);

---

배열 요소 순회 및 탐색

1. forEach

모든 요소를 순회하면서, 각각의 요소에 특정 동작을 수행시키는 메서드

let arr1 = [1,2,3];
arr1.forEach(function(item, idx, arr){
    console.log(idx, item * 2);
});

let doubledArr = [];
doubledArr.forEach((item) => {
    doubledArr.push(item * 2);
});

2. includes

배열에 특정 요소가 있는지 확인하는 메서드

let arr2 = [1,2,3];
let isInclude = arr2.includes(10); // false 반환

3. indexOf

특정 요소의 인덱스(위치)를 찾아서 반환하는 메서드

let arr3 = [1,2,3];
let index = arr3.indexOf(2); // 1번째
// 존재하지 않으면 -1 반환

4. findIndex

모든 요소를 순회하면서 콜백함수를 만족하는 특정요소의 인덱스(위치)를 반환하는 메서드

let arr4 = [1,2,3];

// const findIndex = arr4.findIndex((item) => {
//     if (item % 2 !==0) return true;
// });

const findIndex = arr4.findIndex((item) =>  item % 2 !==0);

console.log(findIndex); // 0 출력. 조건을 만족하는 배열은 1이고 1의 인덱스는 0번이기 때문
// 만족하는 배열의 요소가 존재하지 않으면 -1

4.5 indexOf 와 findIndex의 차이점

indexOf는 객체에서 사용할 수 없음. 원시타입에서만 사용가능

 let objectArr = [
        { name: "김아무개" },
        { name: "홍길동" },
    ];
    
    console.log(
        objectArr.indexOf({ name: "김아무개" })
    );
    // 값을 찾지 못하고 -1 출력됨
    
    console.log(
        objectArr.findIndex(
        (item) => item.name === "김아무개"
        )
    );
    // 0 출력됨

5. find

모든 요소를 순회하면서 콜백함수를 만족하는 첫번째 요소를 찾고 그대로 반환

let arr5 = [
    { name: "김아무개" },
    { name: "홍길동" },
]

const finded = arr5.find((item) => item.name === "김아무개");
console.log(finded); // { name: "김아무개" } 출력

---

배열 변형

1. filter

기존 배열에서 조건을 만족하는 요소들만 필터링하여 새로운 배열로 반환

let arr1 = [
    { name : "김아무개", hobby : "테니스" },
    { name : "홍길동", hobby : "축구" },
    { name : "정길이", hobby : "수영" },
]

const tennisPeople = arr1.filter(
    (item) => item.hobby === "테니스"
);

2. map

배열의 모든 요소를 순회하면서 각각 콜백함수를 실행하고 그 결과값들을 모아서 새로운 배열로 반환

let arr2 = [1,2,3];
const mapResult1 = arr2.map((item, idx, arr)=>{
    return item * 2;
})

활용)
let names = arr1.map((item) => item.name);

3. sort

배열을 사전순으로 정렬하는 메서드

let arr3 = ["b", "g", "a"];
arr3.sort();

// 배열의 요소가 숫자일때 (오름차순)
// 내림차순은 return 1 -1 값을 바꿔주면 됨

arr.sort((a,b)=>{
    if(a > b){
    // b가 a 앞에 와라
        return 1; // -> b, a 배치
    }else if( a < b){
    // a가 b 앞에 와라
        return -1 // -> a, b 배치
    }else{
    // 두 값의 자리를 바꾸지 마라
        return 0 // a, b 자리를 그대로 유지
    }
})

4. toSorted (최신 함수)

정렬된 새로운 배열을 반환하는 메서드

let arr5 = ["c", "b", "a"];
const sorted = arr5.toSorted();

5. join

배열의 모든 요소를 하나의 문자열로 합쳐서 반환하는 메서드

let arr6 = ["hi", "I", "am", "Soo"];
const joined = arr6.join();