JavaScript - array api

실무에서 많이 쓰고 면접에 잘 나온다고 한다.

 

1. join

배열의 요소를 string으로 변환하고 구분자를 지정하여 출력할 수 있다.

const fruits = ['apple', 'banana', 'orange'];
    console.log(fruits.join(' & ')); //apple & banana & orange
    console.log(fruits.join()); //생략시 , 가 나옴  apple,banana,orange

 

 

2. split 

문자열을 구분자를 이용하여 나누고 배열로 반환한다.

const fruits = '사과, 키위, 바나나, 체리';
    console.log(fruits.split(',')); //배열로 담겨서 그대로 출력
    console.log(fruits.split(',', 2)); // 사과, 키위

 

 

3. reverse

배열 순서를 뒤집음

sort를 사용해도 됨

//reverse : 배열 자체를 거꾸로 뒤집음
    const array = [1, 2, 3, 4, 5];
    console.log(array.reverse()); //배열 자체를 거꾸로
    console.log(array); //5 4 3 2 1

    //sort: 인자 두개를 받아서 뺄셈을 해보고 - 값이면 앞으로 정렬함
    //생략하면 오름차순 정렬, 반대로 쓰면 내림차순 정렬
    console.log(array.sort((a, b) => b - a)); //5,4,3,2,1

 

 

4. slice

배열의 특정한 부분을 새로운 배열로 만들어서 반환

//slice : 배열의 특정한 부분을 새로운 배열로 만들어서 반환
    const array = [1, 2, 3, 4, 5];
    //array.splice(0, 2);   //새로운 배열을 생성하는 것이므로 이거 아님
    const result = array.slice(2, 5)
    console.log(`array: ${array}`); //1,2,3,4,5
    console.log(`result: ${result}`); //3,4,5
    //마지막 end부분은 포함 안됨 (2,5)->인덱스 2부터 4까지

splice와 달리 기존 배열은 바뀌지 않음

 

 

5. find

특정 조건을 만족하는 요소를 찾기만 하기

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

 const result = students.find((student) => student.score === 90);
 console.log(result);

 

 

6. filter

조건에 만족하는 요소들을 걸러서 새로운 배열로 반환함

 //filter: enrolled가 true인 것만 걸러서 새로운 배열을 반환함.
    const result = students.filter((student) => student.enrolled === true);
    console.log(result);

 

 

7. map

배열 안의 요소를 하나씩 원하는 요소로 변환해서 새 배열로 반환해줌(매핑)

 const result = students.map((student) => student.score);
    console.log(result);

 

 

8. some, every

some : 배열의 요소 중에서 조건에 만족하는 것이 하나라도 있다 -> true

every : 배열의 요소 중에서 조건에 모두 만족한다 -> true / 하나라도 만족하지 않는다 -> false

 //some: 배열의 요소 중에서 조건에 만족하는 것이 있는지 확인
    //조건에 하나라도 만족하면 true
    const result = students.some((student) => student.score < 50);
    console.log(result);

    //every : 모든 요소들이 조건을 충족하는가
    //!를 붙이면 반대로 출력ㅇㅇ
    //모든 학생들이 50점이 넘는가 : false -> 그걸 반대로 출력 true
    const result2 = !students.every((student) => student.score >= 50);
    console.log(result2);

 

 

9. reduce

원하는 값을 배열을 돌면서 누적시킴

이전 값(prev)과 현재값(curr)를 파라미터로 받고

계산된 결과를 이전 값에 반환시킴

그 이전값에 다시 현재값과 계산한 결과를 반환시키고 누적함

배열이 끝날 때까지 반복함

시작값(여기선 0)을 지정해주지 않으면 이전값이 undefined가 됨

 

reduceRight : 뒤에서부터 원하는 값을 누적시킴

 

=> 비동기 프로그래밍을 할 때 유용하다.

//reduce : 원하는 값을 배열을 돌면서 누적시키는 API
    const result = students.reduce((prev, curr) => {
        console.log('---------------');
        console.log(prev);
        console.log(curr);
        return prev + curr.score;
    }, 0); //0부터 시작
    console.log("reduce result: " + result / students.length);

    //줄여쓰기
    const result2 = students.reduce((prev, curr) => prev + curr.score, 0);
    console.log(result2 / students.length);

    console.log("======================================================================");

    //reduceRight : 배열의 뒤에서부터 원하는 값을 누적시킴
    const result3 = students.reduceRight((prev, curr) => {
        console.log('---------------');
        console.log(prev);
        console.log(curr);
        return prev + curr.score;
    }, 0);
    console.log("reduceRight result : " + result3 / students.length);

 

 

10. map + join

학생들의 점수만 골라서 새 배열을 만들고 문자열로 만들기

 const result = students.map((student) => student.score).join();
    console.log(result);

 

 

11. map + sort + join

학생들의 점수만 골라서 새 배열을 만들고 정렬하고 문자열로 만들기

const result = students.map((student) => student.score)
        .sort((a, b) => a - b)
        .join();
    console.log(result);

 

 

 

 

 

map과 reduce 관련 더 읽어보기

(JavaScript) map, reduce 활용하기 - 함수형 프로그래밍