배열 메서드

1. push, pop, unshift, shift

배열의 요소를 추가하거나 삭제. 원본 배열을 변경함

// push 
// 배열의 마지막 요소로 추가
const arr1 = [1, 2, 3];
arr1.push(4);
console.log(arr1); // [1, 2, 3, 4]

// pop
// 배열의 마지막 요소를 제거
const arr2 = [1, 2, 3];
arr2.pop();
console.log(arr2); // [1, 2]

// unshift
// 배열의 첫 번째 요소로 추가
const arr3 = [1, 2, 3];
arr3.unshift(0);
console.log(arr3); // [0, 1, 2, 3]

// shift
// 배열의 첫 번째 요소를 제거
const arr4 = [1, 2, 3];
arr4.shift(); 
console.log(arr4); // [2, 3]

2. join

배열의 요소를 연결해 문자열로 만듦

const arr = ['a', 'b', 'c', 'd'];
const str = arr.join(); 
console.log(str); // 'a,b,c,d'
console.log(arr.join('-')); // 'a-b-c-d'
console.log(arr.join(', ')); // 'a, b, c, d'

3. splice

배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가

let arr = ['a', 'b', 'c', 'd'];
console.log(arr1.splice(0, 2)); // ['a', 'b']

// 원본 배열을 변경함
console.log(arr1); // ['c', 'd']

// 요소를 삭제하지 않고 추가
arr = [1, 2, 3, 4];
arr.splice(4, 0, 5); // 인덱스 4부터 0개의 요소를 제거하고 새로운 요소 5을 삽입 
console.log(arr); // [1, 2, 3, 4, 5] 

4. slice

배열의 요소들을 복사하여 배열로 반환.

// slice
const arr2 = ['e', 'f', 'g', 'h'];
const sliceArr = arr2.slice(0, 2);
console.log(sliceArr); // ['e', 'f']
console.log(arr2); // ['e', 'f', 'g', 'h']

5. reverse

배열의 순서를 반대로 뒤집음. 원본 배열을 변경함

const arr = [1, 2, 3, 4];
const reverseArr = arr.reverse();
console.log(reverseArr); // [4, 3, 2, 1]
console.log(arr); // [4, 3, 2, 1]

6. fill

배열의 처음부터 끝까지 전달받은 값으로 채움. 원본 배열을 변경

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

7. includes

배열이 특정 요소를 포함되어 있는지 판별함

const arr = [1, 2, 3, 4];
arr.includes(4); // true
arr.includes(0); // false

8. sort

배열의 요소를 오름차순으로 정렬. 원본 배열을 변경함

const arr1 = [5, 1, 4, 3, 2];
arr1.sort(); // [1, 2, 3, 4, 5]

// 유니코드의 순서를 따르므로 숫자 요소로 이루어진 배열은 비교 함수를 인수로 전달
const arr2 = [10, 5, 100, 1, 50];
arr2.sort(); // [1, 10, 100, 5, 50]
arr2.sort((a, b) => a - b); // [1, 5, 10, 50, 100]

// 객체를 요소로 갖는 배열
const arr3 = [
  { id: 3, text: 'hello' },
  { id: 6, text: 'javascript' },
  { id: 4, text: 'react' }
];
arr3.sort((a, b) => a.id - b.id);
// [{ id: 3, text: "hello" }, { id: 4, text: "react" }, ...]
arr.sort((a, b) => b.id - a.id);
// [{ id: 6, text: "hello" }, { id: 4, text: "react" }, ...]

9. forEach

배열의 모든 요소를 순회하며 콜백 함수를 반복 호출함

const arr = [1, 2, 3];
arr.forEach((item, i) => console.log(`index: ${i}, itme: ${item}`));
// index: 0, itme: 1
// index: 1, itme: 2
// index: 2, itme: 3

arr.forEach(item => console.log(item * item));
// 1
// 4
// 9

10. map

배열의 모든 요소를 순회하며 전달받은 콜백 함수를 반복 호출해 새로운 배열을 반환함

const users = ['alice', 'bong', 'cara', 'dana'];
const goodUsers = users.map(user => `${user}👍`);
console.log(goodUsers); // ['alice👍', 'bong👍', 'cara👍', 'dana👍']

11. filter

배열의 모든 요소를 순회하며 전달받은 콜백 함수의 반환값이 true인 요소를 모아 새 배열을 반환함

const students = [
  { name: 'anna', score: 90 },
  { name: 'elsa', score: 85 },
  { name: 'coco', score: 80 },
  { name: 'lulu', score: 95 },
];
const highScore = students.filter(student => student.score >= 90);
console.log(highScore);
// [{ name: "anna", score: 90 }, { name: "lulu", score: 95 }]

12. reduce

배열의 모든 요소를 순회하며 전달받은 콜백 함수를 반복 호출하며 하나의 결과값을 반환함

// reduce((accumulator-초기값, currentValue, index, array) => {
//   return ...
// }, initialValue-없으면 배열의 첫 번째 요소를 사용하며 오류가 발생함)
const sum = [1, 3, 6].reduce((acc, cur) => {
  console.log(acc, cur);
  return acc + cur;
}, 0);
// 0 1 
// 1 3  
// 4 6
console.log(sum); // 10

flat some find findIndex flatMap