[JS] 자바스크립트 배열관련 메소드 총정리

sort

배열을 오름차순 내림차순으로 정렬한다.

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

res = arr.sort(); // sort((a, b) => a - b)과 동일
console.log(res);
// [1, 2, 3, 4, 5, 6]

res = arr.sort((a, b) => b - a);
console.log(res);
// [6, 5, 4, 3, 2, 1]

join

배열을 문자열로 변환한다.

배열.join(); // 구분자를 넣지 않으면 컴마가 포함되어 문자열로 합쳐진다.
배열.join('.'); // 구분자를 넣어주면 아이템 사이에 구분자를 넣어서 문장여로 합쳐진다.

const fruits = ['apple', 'banana', 'orange'];
let res;

res = fruits.join();
console.log(res);
// 'apple,banana,orange'

res = fruits.join(' ');
console.log(res);
// 'apple banana orange'

split

문자열을 배열로 변환한다.

문자열.split();// 구분자를 넣지 않으면 문자열 한 덩이라가 배열의 아이템 1개로 들어간다.
문자열.split('.'); // 구분자를 기준으로 쪼개서저 배열로 변환된다.

const fruits = '🍎, 🥝, 🍌, 🍒';
const arr = fruits.split(',');

console.log(arr);
// ["🍎", " 🥝", " 🍌", " 🍒"]

reverse

배열의 아이템 순서를 뒤집는다.

배열.reverse();

const array = [1, 2, 3, 4, 5];
const res = array.reverse();

console.log(res);
// [5, 4, 3, 2, 1]

console.log(array); // 원래 배열도 변경이 되어있다.
// [5, 4, 3, 2, 1]

splice

인덱스로 배열의 아이템을 삭제한다.

인덱스로 배열의 아이템을 여러개 삭제한다.

인덱스로 배열의 아이템을 삭제하고 해당 인덱스에 새로운 아이템을 추가한다.

❗️단, 반환값은 때어낸(삭제한요소) 배열이다.

배열.splice(인덱스, 삭제할갯수, 추가할 아이템...);

const array = [1, 2, 3, 4, 5];
let res = array.splice(1, 3);

console.log(res);
// [2, 3, 4]
console.log(array);
// [1, 5]

slice

배열의 특정한 부분을 리턴한다.

배열.slice(시작인덱스, 끝 인덱스);// 끝인덱스의 앞까지만 포함한다.

const array = [1, 2, 3, 4, 5];
let res;
      
res = array.slice(2); // 2부터 쭉
console.log(res);
// [3, 4, 5]

res = array.slice(1, 3);
console.log(res);
// [2, 3]

slice vs splice

slice는 배열의 특정한 부분을 리턴한다. 인덱싱은 (시작, 끝+1)
원래 배열은 변화없음

splice는 배열의 특정한 부분을 리턴한다. + 원래 배열에서 특정한 부분이 삭제된다. + 삭제하면서 아이템을 추가할 수 있다. 인덱싱은 (시작, 갯수)
원래배열 변화있음

---

공통

class Student {
  constructor(name, age, enrolled, score) {
    this.name = name;
    this.age = age;
    this.enrolled = enrolled;
    this.score = score;
  }
}
const students = [
  new Student('A', 29, true, 45),
  new Student('B', 28, false, 80),
  new Student('C', 30, true, 90),
  new Student('D', 40, false, 66),
  new Student('E', 18, true, 88),
];

find

배열의 모든 요소들을 돌면서 전달한 콜백함수의 인자로 넣고 호출한다.

콜백 함수의 반환된 값이 true이면 그 즉시 멈추고 해당 요소를 리턴한다.

배열.find();

students 배열에서 90점인 학생을 찾아라.

const res = students.find((student) => student.score === 90);

console.log(res);
// Student {name: "C", age: 30, enrolled: true, score: 90}

filter

배열의 모든 요소들을 돌면서 전달한 콜백함수의 인자로 넣고 호출한다.

콜백 함수의 반환된 값이 true인 요소들을 모아 새로운 배열을 만들어서 리턴한다.

배열.filter();

등록된 학생들만으로 이루어진 배열을 만들어라.

const res = students.filter((student) => student.enrolled);

console.log(res);
// (3) [Student, Student, Student]
// 0: Student {name: "A", age: 29, enrolled: true, score: 45}
// 1: Student {name: "C", age: 30, enrolled: true, score: 90}
// 2: Student {name: "E", age: 18, enrolled: true, score: 88}

map

배열의 모든 요소들을 돌면서 전달한 콜백함수의 인자로 넣고 호출한다.

콜백함수의 반환된 값들을 모두 요소로 담아서 새로운 배열을 리턴한다.

배열.map();

학생들의 점수 배열을 만들어라.

const res = students.map((student) => student.score);

console.log(res);
//  [45, 80, 90, 66, 88]

some / every

• some

배열의 모든 요소들을 돌면서 전달한 콜백함수의 인자로 넣어 호출한다.

콜백함수의 결과가 하나라도 true가 있으면 true를 반환한다.

• every

배열의 모든 요소들을 돌면서 전달한 콜백함수의 인자로 넣어 호출한다.

콜백함수의 결과가 모두 true일때만 true를 반환한다.

배열.some();
배열.every();

50점보다 적은 점수를 받은 학생이 있는지 확인하라.

const res1 = students.some((student) => student.score < 50);

console.log(res1);
// true

모든 학생이 50점 이상인지 확인하라.

const res2 = students.every((student) => student.score >= 50);

console.log(res2);
// false

reduce / reduceRight

• reduce

원하는 시작점부터 모든 배열의 요소들을 돌면서 어떤 값을 누적할 때 사용한다.(앞 요소부터)

• reduceRight

배열의 제일 뒤(오른쪽)부터 시작하여 모든 배열의 요소를 돌면선 어떤 값을 누적한다.

배열.reduce(콜백함수, 누적값의 초기값);
배열.reduceRight(콜백함수, 누적값의 초기값)

모든 학생들의 평균 점수를 구하라.

const res = students.reduce((prev, curr) => {
    // prev는 이전의 콜백함수의 리턴값이 저장된다.
    // curr은 배열의 아이템을 순차적으로 전달 받는다.
    return prev + curr.score;
}, 0);

console.log(res / students.length);
// 73.8

const res = students.reduce((prev, curr) => prev + curr.score, 0);

console.log(res / students.length);
// 73.8

활용

학생들의 모든 점수를 스트링으로 출력하라.

const res1 = students.map((student) => student.score).join();

console.log(res1);
// "45,80,90,66,88"

50점 이상인 점수들로 이루어진 배열을 문자열로 바꾸어라

const res2 = students
    .map((student) => student.score)
    .filter((score) => score >= 50)
    .join();

console.log(res2);
// "80,90,66,88"

학생들의 점수를 오름차순으로 정렬하고 문장열로 바꾸어라.

const res = students
    .map((student) => student.score)
    .sort()
    .join();

console.log(res);
// '45,66,80,88,90'