주요 배열 함수 10가지

join

// Q1. make a string out of an array
{
  const fruits = ["apple", "banana", "orange"];
  const result = fruits.join();
  //api에서 ?는 전달하지 않아도 되고 ,해도 된다는 의미(생략가능)
//구분자를 넣지 않아도 됨. fruits.join('%')와 같이 구분자를 넣어도 된다.
}

split

// Q2. make an array out of a string 주어진 문자열을 배열로 변환하기
{
  const fruits = "🍎, 🥝, 🍌, 🍒";
  const result=fruits.split()//문자열 전체가 한번에 들어감.
  //split(구분자,갯수(limit, 생략가능))
  //split(',',2)",로 구분해 앞에서 두번째까지의 요소 가져오기"
  //limit은 선택. 
  console.log(result)
}

// Q3. make this array look like this: [5, 4, 3, 2, 1]
{
const array = [1, 2, 3, 4, 5];
const result = array.reverse();
console.log(result);
console.log(array)//배열 자체를 출력해도 역순으로 출력된다. 즉, 배열 자체를 변환 시켜 리턴하는 것이다.
}

splice, slice

// Q4. make new array without the first two elements
{
  const array = [1, 2, 3, 4, 5];
  const result=array.splice(0,2)//어디서부터 몇개나 지울건지.삭제된 요소들이 리턴된다
  console.log(result)//[1,2] 삭제된 값 리턴
  console.log(array)//[3,4,5] 삭제되고 남은 값 리턴
  //새로운 배열을 만들어야 함
  const result=array.slice(2,5)
  //배열의 특정한 부분을 리턴. (start,end)시작과 종료인덱스 까지의 값 리턴
  //종료 인덱스는 리턴값에서 제외되고, 그 이전까지만 리턴한다.
  
}

unshift

array.unshift(1, 2, 0);

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),
];

console.log(result);

find

// Q5. find a student with the score 90
{
    const result= students.find(function(student,index){
        return student.score===90;
        console.log(student,index);
        //콜백함수는 student와 index값을 하나씩 호출한다. 첫번째 true값을 리턴할 때 종료된다.
        // 학생의 점수가 90점일 때 true값이 리턴된다.
        //콜백함수는 boolean값을 리턴해야 함
  
        const result= students.find((student)=>student.score===90 );           return student.score===90
            console.log(result);
            //arrow function으로 생략가능
            /*
            find<S extends T>(predicate: (this: void, value: T, index: number, obj: T[]) => value is S, thisArg?: any): S | undefined;
            predicate는 콜백함수를 받는다. this,value,index,object 4가지 인자가 전달되며,boolean값을 가지는 함수이다.
            첫번째 찾아진 요소를 리턴하며, 전달된 콜백함수의 값이 true일 경우에 리턴된다. 찾지못할경우 undefine을 리턴한다.
            predicate함수는 모든 배열값을 전달하다가 true를 리턴했을 때 종료된다.
    find(predicate: (value: T, index: number, obj: T[]) => unknown, thisArg?: any): T | undefined;

            */ 
    });
}

filter

// Q6. make an array of enrolled students
{
    const result = students.filter((student) => student.enrolled);
//==>:aero function:각각의 학생이 전달이되면, 등록되었는지 확인하고, 등록된 학생들만 출력한다
}

map

// Q7. make an array containing only the students' scores
// result should be: [45, 80, 90, 66, 88]
{
  const result = students.map((student) => student.score);
  console.log(result);
  //map은 일정한 공식으로 요소들을 변환 가느아다.
  //콜백함수에서 가공되어진/리턴되어진 값들로 대체
  //value.score 와 같이 임의로 변수를 알아보기 어렵기 때문에, callback함수로 전달되는 인자는 최대한 이해하기 쉽게 작성하는 것이 중요
}

some, every

// Q8. check if there is a student with the score lower than 50
{

    const result=students.some((student)=> student.score<50);
    //배열의 요소중 콜백함수가 리턴하는 값에 참 거짓 값이 있는지 없는지 확인
    //학생들 중 점수가 50점보다 낮은 사람이 한 명이라도 있는가>있으면 true출력
    const result=students.every((student)=>student.score<50);
    console.log(result2);
    //모든 학생들의 점수가 50점이 넘는지 여부 판별
    //const result=!students.every((student)=>student.score<50);
    //!는 true>false,false>true로 바꿔줌
}

reduce

// Q9. compute students' average score
{
    const result = students.reduce((prev,curr)=>{
        console.log(prev);
        console.log(curr);
        return prev+curr.score;
        //배열 하나씩 curr에 순차적으로 전달
        //prev는 리턴 값들이 순차적으로 전달 됨(이전값)


}

map, filter, join 응용

// Q10. make a string containing all the scores
// result should be: '45, 80, 90, 66, 88'
{
    const result = students
    .map((student)=>student.score)//점수로 변환
        //각 값들에 2를 곱한 값들을 출력하고 싶다면, student.score*2를 쓰면 된다.
        //이런 방식으로 각 값들을 '맵핑'해 리턴한다.
    .filter(score=>score>=50)//50점이상인 것만 필터링
    .join();//연결
    console.log(result);
    //함수형 프로그래밍
}

map, sort, join 응용

// Bonus! do Q10 sorted in ascending order
// result should be: '45, 66, 80, 88, 90'
{
    const result = students.map(student=>student.score)
    .sort((a,b)=>a-b)//오름차순 정렬
    //-값을 리턴하면 첫번째가 두번째보다 작다고 간주되어 정렬된다.(b>a크다면 -밸류)
    //역순으로 출력하고 싶다면 b-a로 하면 된다(내림차순 정렬)
    .join();
    console.log(result);
}

자바스크립트 9. 유용한 10가지 배열 함수들. Array APIs 총정리 | 프론트엔드 개발자 입문편 ( JavaScript ES6)

강의 외에 직접 코딩하면서 다시한번 내 방식대로 정리하는 과정도 필요할 것 같다.
이건 여기에 정리해나갈 예정이다. >> 함수총정리