배열 관련 메서드[JavaScript | 학습을 위한 자료 | 한입만 REACT]

배열 조작 메서드

 

 

// 6가지의 요소 조작 메서드

// 1. push
// 배열의 맨 뒤에 새로운 요소를 추가하는 메서드
let arr1 = [1, 2, 3];
const newLength = arr1.push(4, 5, 6, 7); // 추가후 변환된 길이를 반환

console.log(arr1);
console.log(newLength);

// 2. pop
// 배열의 맨 뒤에 있는 요소를 제거하고, 반환
// 원본 배열이 수정
let arr2 = [1, 2, 3];
const poppedItem = arr2.pop();

console.log(poppedItem);
console.log(arr2);

// 3. shift
// 배열의 맨 앞에 있는 요소를 제거, 반환
// 배열의 다른 요소들의 인덱스가 앞으로 이동
// 원본 배열이 수정
let arr3 = [1, 2, 3];
const shiftedItem = arr3.shift();

// 4. unshift
// 배열의 맨 앞에 새로운 요소를 추가하는 메서드
// 기존 요소들의 인덱스가 뒤로 이동
let arr4 = [1, 2, 3];
const newLength2 = arr4.unshift(0);
console.log(newLength2, arr4);

// shift,unshift는 인덱스를 이동해야하기 때문에 속도가 느리다.

// 5. slice
// 마치 가위처럼 배열의 특정 범위를 잘라내서 새로운 배열로 반환
// 원본 배열은 수정되지 않음
let arr5 = [1, 2, 3, 4, 5];
let sliced = arr5.slice(2, 5); // 잘라내려는 인덱스 부터 마지막 인덱스+1
let sliced2 = arr5.slice(2);
let sliced3 = arr5.slice(-3); // 뒤에서부터 몇개 자를지  

console.log(sliced);
console.log(arr5); // 원본 배열의 값이 바뀌지는 않는다
console.log(sliced2);
console.log(sliced3);

// 6. concat
// 두개의 서로 다른 배열을 이어 붙여서 새로운 배열을 반환
// 원본배열은 수정되지 않음
let arr6 = [1, 2];
let arr7 = [3, 4];

let concatedArr = arr6.concat(arr7);
console.log(concatedArr);

---

배열 순회, 탐색 메서드

 

// 5가지 요소 순회 및 탐색 메서드
// 1. forEach
// 모든 요소를 순회하면서 각각의 요소에 특정 동작을 수행시키는 메서드
let arr1 = [1, 2, 3];

arr1.forEach(function(item, idx, arr) {
    console.log(idx, item * 3);
});

// 요소를 수정하여 새로운 배열에 저장
let doubledArr = [];

arr1.forEach((item)=>{
    doubledArr.push(item*2);
});

console.log(doubledArr);

// 2. includes
// 배열에 특정 요소가 있는지 확인하는 메서드
// 불리언 값 반환
let arr2 = [1, 2, 3];
let isInclude = arr2.includes(3);

console.log(isInclude);

// 3. indexof
// 특정 요소의 인덱스(위치)를 찾아서 반환하는 메서드
// 얕은 비교로 특정 객체값을 찾을 수는 없다
// 요소가 없으면 -1 반환
let arr3 = [1, 2, 3];
let index = arr3.indexOf(2); // 가장 첫번째 인덱스 반환
console.log(index);

// 4. findIndex
// 모든 요소를 순회하면서 콜백함수를 만족하는 특정 요소의 인덱스(위치)를 반환하는 메서드
// 객체 타입의 값을 찾을 수 있다. 
let arr4 = [1, 2, 3];
const findIndex = arr4.findIndex((item) => {
    if(item == 2) 
return true;
});

console.log(findIndex);

// 5. find
// 모든 요소를 숭회하면서 콜백함수를 만족하는 요소를 찾는데 요소를 그대로 반환
// 요소가 없으면 undefined 반환
let arr5 = [
    {name : "강진호"},
    {name : "홍길동"},
];

const finded = arr5.find((item) => item.name ==="강진호"); 
console.log(finded);

---

배열 변형 메서드

// 5가지 배열 변형 메서드
// 1. filter
// 기존 배열에서 조건을 만족하는 요소들만 필터링하여 새로운 배열로 반환
// 기존 배열은 변경되지 않음

let arr1 = [
    { name : "강진호", hobby: "농구"},
    { name : "홍길동", hobby: "농구"},
    { name : "이선빈", hobby: "독서"},
];

const basketballPeople = arr1.filter(
    (item) => item.hobby === "농구"
);

console.log(basketballPeople);

// 2. map
// 배열의 모든 요소를 순회하면서 각각 콜백함수를 실행하고 그 결과값들을 모아서 새로운 배열로 반환
// 기존 배열은 변경되지 않음
let arr2 = [1, 2, 3];
const mapResult1 = arr2.map((item, idx, arr) => {
    return item * 2;
});

console.log(mapResult1);

let names = arr1.map((item) => item.name);
console.log(names);

// 3. sort
// 배열을 사전순으로 정렬하는 메서드
// 원본 배열이 변경

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

console.log(arr3);

let arr4 = [10, 3, 5];
arr4.sort();

console.log(arr4);

// 4. tosorted
// 정렬된 새로운 배열을 반환하는 메서드
// 원본 배열은 변경되지 않음
let arr5 = ["c", "a", "d"];
const sorted = arr5.toSorted();

console.log(arr5);
console.log(sorted);

// 5. join
// 배열의 모든 요소를 하나의 문자열로 합쳐서 반환하는 메서드
// 요소 간의 구분자는 기본값이 ","이며, 원하는 구분자를 지정 가능
let arr6 = ["hi", "im", "winterlood"];
const joined = arr6.join(" ");
console.log(joined);

 

---