Javascript Array Apis join, split, splice, slice, find, filter, map, some, every, reduce 연습해보기!

 

회사에서 프론트엔드로 개발한지 2년차가 되는데요 

Vue 를 통해서 개발하다보니 자바스크립트가 정말 중요하다는게 참 많이 느껴지더라고요 .. 

그래서 업무를 하면서 아 이부분이 많이 부족하네 하는 것중에 

find, filter, map, reduce 참 .... 많이 쓰여서 

주말에 시간을 내서 공부를 해봤습니다!! 

사실 연습으로는 간단한데 꾸준히 연습해서 이해도 잘되도록 노력 많이 해야겠네염 1!! 

 

중요한 find 부터 보는것도 추천합니다!! 

 

 

https://youtu.be/3CUjtKJ7PJg?si=uh-iWskGHSR9EmBf

 

제가 좋아하는 드림코딩 엘리 선생님 유튜브 영상 보면서 학습해봤습니당 

array api 잘 모르신다면 강력 추천합니다!!!! 

 

 

 

1. join 함수 

 

 

배열의 모든 요소를 지정된 구분자 문자열로 구분하여 문자열에 추가합니다.
* @param separator 결과 문자열에서 배열의 한 요소와 다음 요소를 분리하는 데 사용되는 문자열입니다. 생략할 경우,
* 배열 요소는 쉼표로 구분됩니다.

 

==> join() 함수는 배열의 모든 값들을 연결한 문자열을 리턴합니다.

 

 const fruits = ['apple', 'banana', 'orange'];
  const stringText = fruits.join()
  console.log("1 quiz", stringText);

 

 

separator 가 기본값으로 쉼표 (,) 가 들어가서 사진처럼 배열이 문자열로 리턴합니다 ! 

 

그러면 fruits.join(' - ') 으로 넣으면 ? 

 

 

 

2. split 함수 

 

지정된 구분자를 사용하여 문자열을 하위 문자열로 분할하고 배열로 반환합니다.
* @param separator 문자열 분리에 사용할 문자 또는 문자를 식별하는 문자열입니다.
* 생략하면 전체 문자열을 포함하는 단일 요소 배열이 반환됩니다.
* @param limit 배열에 반환되는 요소의 수를 제한하는 데 사용되는 값입니다.

 

 

=> 구분자 파라미터와 함께 호출하면 문자열을 배열로 반환 합니다! 

 

const fruits = '🍎, 🥝, 🍌, 🍒';
  const array2 = fruits.split(',')
  console.log("2 quiz 2 =", array2);

 

split(',') 로 호출해서 쉼표로 구분해서 배열로 만들어줬습니다! 

split 함수를 보면 limit?: number 로 되어있죠 ? 이거는 배열 사이즈를 정해줍니다! 

만약 제가 fruits.split(",", 2) 로 호출한다면 ?? 

 

 

2개의 문자열로 이루어진 배열이 반환 됩니다! 

 

 

3. Splice 함수 vs Slice 함수 

 

Splice , Slice 함수 둘다 배열에서 원하는 만큼만 받을수 있는 함수인데요! 약간의 차이점이 있습니다! 

 

 

Splice 함수란 ? 

 

 

배열에서 요소를 제거하고 필요한 경우 삭제된 요소를 반환하는 새 요소를 그 자리에 삽입합니다.
* @param start 요소 제거를 시작할 어레이의 영점 기반 위치입니다.
* @param deleteCount 제거할 요소 수.
* @삭제된 요소를 포함하는 배열을 반환합니다.

 

==> Splice 함수란 삭제 시켜주는 함수인데 삭제 요소를 배열로 반환합니다. 

const array = [1, 2, 3, 4, 5];
  const arr = array.splice(2,3)
  console.log("4 quiz array  삭제된 원본 배열 ==", array);
  console.log("4 quiz arr 삭제 된 배열 ==", arr);

 

 

 

==> Splice 함수 1번 파라미터는 삭제를 시작할 인덱스 , 2번 파라미터는 몇개를 삭제할건지 

저는 2번 인덱스부터 시작해서 3개를 삭제해달라고 했습니다 

그래서 결과도 3,4,5 를 삭제하고 기존 데이터 array 에서는 [1,2] 만 남았죠 ㅎ 

+ Splice 는 추가도 됩니다!! 

array.splice(2,3,'7') 로 함수를 호출 한다면 ? 

 

 

위에처럼 삭제는 [3,4,5] 2번 인덱스에서 3개가 삭제되고 

기존 데이터에 '7' 이라는 문자열이 들어간 것을 확인이 가능해용 

 

 

 

Slice 함수란 ? 

배열의 섹션 복사본을 반환합니다.
* 시작과 끝 모두에서 음의 인덱스를 사용하여 어레이 끝에서 오프셋을 나타낼 수 있습니다.
* 예를 들어 -2는 어레이의 두 번째에서 마지막 요소를 나타냅니다.
* @paramstart 배열의 지정된 부분의 시작 인덱스입니다.
* 시작이 정의되지 않은 경우 슬라이스는 인덱스 0에서 시작됩니다.
* @paramend 배열의 지정된 부분의 끝 인덱스입니다. 이 인덱스 '끝'의 요소는 제외됩니다.
* 끝이 정의되지 않은 경우 슬라이스는 배열의 끝까지 확장됩니다.

 

 

==> 배열의 원하는 부분만 새로운 배열로 만들어줍니다! 

==> 1번 파라미터에는 시작 인덱스 , 2번 파라미터에는 끝 인덱스 ( 끝 요소는 제외!! ) 

 

 const array = [1, 2, 3, 4, 5];
  const arr = array.slice(2,5)
  console.log("4 quiz array slice ", array)
  console.log("4 quiz new slice ==", arr);

 

array 배열의 인덱스는 0,1,2,3,4 로 되어있습니다 

array 배열에서 [3,4,5] 로 된 새로운 배열을 반환하고 싶다면 

2번 인덱스에서 부터 5번 인덱스 파라미터를 던지면 3,4,5 배열을 반환할수있는데요 

만약 두번째 파라미터를 4로 주어지면 [3,4] 만 나와요 두번째 파라미터는 끝 요소를 제외하니깐요 ~ 

 

그리고 Slice 는 기존 데이터를 수정하는게 아니라 새로운 배열을 반환합니다 ㅎㅎ 

 

 

* Splice 함수와 Slice 함수는 비슷해보이지만

Splice 는 기존 함수에서 삭제된 함수를 반환 ! 기존 데이터를 자르는것 ! 

Slice 함수는 원하는 만큼 새로운 함수로 만들어줍니다!! 

 

---

여기서부터 회사에서 사용 많이 하는 함수들 짱 중요 

 

4. find 함수 

 

배열에서 술어가 참이고 정의되지 않은 첫 번째 요소의 값을 반환합니다
* @param predicate 배열의 각 요소에 대해 오름차순으로 호출 predicate를 한 번 찾습니다
* 순서, 술어가 참이 되는 것을 찾을 때까지. 그런 원소가 발견되면, 찾으세요
* 즉시 해당 요소 값을 반환합니다. 그렇지 않으면 정의되지 않은 반환 값을 찾습니다.
* @param thisArg 제공되는 경우 각 호출에 대해 이 값으로 사용됩니다
* predicate. 제공되지 않으면 undefined가 대신 사용됩니다.

 

 

==> 배열에서 특정 조건을 만족하는 요소의 첫번째 요소를 반환하는 함수!! 

 

 

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

// Q5. find a student with the score 90
{
  console.log("5 quiz 90 점 이상==", students.find(item =>  item.score >= 90) );

}

저는 화살표 함수를 사용해서 콘솔창에 나오도록 작성해봤는데요 ( 회사에서 화살표 함수 엄청 사용함 익숙해져야함... ) 

제가 find 를 이해한 건요 

find 함수가 student 배열을 하나하나 돌면서 점수가 90점 넘은 게 있는지 찾습니다

찾다가 3번째에서 오 찾았다 하면 이 객체를 true 로 지정하면 그 true로 지정된 값을 반환합니다! 

만약 하나도 없다면 undefined 로 반환합니다 

 

만약에 true 로 되는 게 2개 이상이라면 (90점 넘는 학생이 2명이 넘으면 ? ) 

 

ㅋㅋㅋㅋ 첫번째 요소를 반환하는거라서 상관없이 같은 같이 반환이 됩니다 * 제가 뒤에 학생 값을 올렸거덩요 

 

 

5. filter 함수 

 

 

콜백 함수에 지정된 조건을 충족하는 배열의 요소를 반환합니다.
* @param predicate 최대 3개의 인수를 허용하는 함수입니다.
* 필터 메서드는 배열의 각 요소에 대해 술어 함수를 한 번 호출합니다.
* @param thisArg 이 키워드가 술어 함수에서 참조할 수 있는 개체입니다.
* 이 Arg를 생략하면 정의되지 않은 값이 이 값으로 사용됩니다.

 

 

==> 특정 조건에 부합하는 배열의 값들을 배열 형태로 반환 합니다!  

 

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, 96),
  new Student('E', 18, true, 88),
];


// Q6. make an array of enrolled students
{
  console.log("6 quiz enrolled true ", students.filter(item => item.enrolled));
}

 

수업에 등록된 학생들만 배열로 만들어서 함수로 반환 하려고 하는데요 

filter 를 사용해서 enrolled true 인 3명의 학생들을 배열로 반환 합니다 

 

* 연습할때는 참 쉬운데 회사에서는 왜이리 어려운건지... 허허 ... 

 

 

6. map 함수 

 

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, 96),
  new Student('E', 18, true, 88),
];


// Q7. make an array containing only the students' scores
// result should be: [45, 80, 90, 66, 88]
{
  const array = students.map(item => item.score)
  console.log("7 quiz = ", array);
}

 

 

==> map 함수란 

callback 함수를 각각의 요소에 대해 한번씩 순서대로 불러 그 함수의 반환값으로 새로운 배열을 만듭니다! 

 

제가 위에서 짠 소스는요 학생들의 점수를 배열로 반환하고 싶으면 ? 어떻게 할지에 대해서 짜봤는데요 

map이 매핑하듯이 

콜백 함수들이 모든 요소를 거치면서 가공 되어서 리턴되는거입니다! 

 

화살표 함수를 써서 item.score 아이템의 점수만 리턴해달라고 콜백 함수로 작성한거죠 

그러면 콜백 함수에서 점수 만 뽑아서 array 함수에 추가를 해줍니다 ㅎㅎ 

 

 

7. Some 함수 vs Every 함수

 

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, 96),
  new Student('E', 18, true, 88),
];

// Q8. check if there is a student with the score lower than 50
{ 
  console.log("8 quiz some 50점 이하 학생 있나요 ?==", students.some(item => item.score <= 50));
  console.log("8 quiz every 학생들이 전부 시험 점수가 있나요? ", students.every(item => item.score));
}

 

 

==> Some 함수는 

콜백 함수를 통해서 조건에 충족되는게 하나라도 있으면 true 없다면 false 입니다 

그래서 저는 학생 점수가 50점 이하로 있는 학생이 있나요 ? 했을때 1명이 존재하므로 true 가 출력되고요 

 

==> every 함수는 

콜백 함수를 통해서 모든!!! 배열의 값들이 충족이 되어야지 true 하나라도 충족 못하면 False 입니다

그래서 저는 학생들이 전부 시험 점수가 있나요? 라는 질문에 item.score 점수가 undefined 가 없으니 true 가 출력됩니다! 

만약에 점수가 비어있는 사람이 1명이라도 있다면 False 가 나왔겠죠 ㅎㅎ 

 

 

8. Reduce 함수 

 

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, 96),
  new Student('E', 18, true, 88),
];

// Q9. compute students' average score
{
  console.log("9 quiz 1 번 방법 ==", students.reduce((prev, cur, index, array) => {
      prev += cur.score;
      if(index === array.length -1 ){
        return prev / array.length
      } else {
        return prev
      }
  },0));
  const sum = students.reduce((prev, cur) => prev + cur.score, 0)
  console.log("9 더 간단한  소스 만들기 =", sum / students.length);

 

오오 reduce 살짝 어렵네요 

reduce 보면서 리액트에 useState 가 생각이 조금 나는데요 일단 

reduce 함수를 찾아보니 누산기 ? 누적된 값을 출력한다고 하네요 

 

학생들의 점수 평균을 구하는게 문제였습니다 

제가 만든 소스에서 

const sum = student.reduce((prev,cur) => prev + cur.score, 0 ) 

prev 는 초기값 

cur 는 filter, some, every 처럼 하나하나 값을 반환 하는데요 

다음 0은 prev 의 초기값을 설정했어요 

 

말대로 

prev 초기값이 0 이니깐 

0 + 45 ( 45 : 첫번째 학생 점수 ) 

다음 

prev 가 45가 되고 

45 + 80 

.... 쭉쭉 누적되서 숫자들을 전부 합치고 

콘솔에서 student 학생수를 나누면 점수~~ 이해하면 간단한거같네염 ㅎㅎ 

 

==> reduce 함수 요약하면

초기값 설정해서 배열들의 특정값을 누적해서 계산할수있는 함수!! 

 

* reduceRight 함수는 반대부터 시작하는거! 

이 함수를 쓰면 마지막 학생 점수 88점 부터 더하겠쥬 ?