TIL21 l Array APIs

1. Join

: 배열의 모든 요소를 연결해 하나의 문자열로 만든다.

  const fruits = ["apple", "banana", "orange"];
  const result = fruits.join();
  console.log(result); // 'apple, banana, orange'
}

2. Split

: String 객체를 지정한 구분자를 이용하여 여러 개의 문자열로 나눈다.
주어진 문자열을 separator마다 끊은 부분 문자열을 담은 Array를 반환함

{
  const fruits = "🍎, 🥝, 🍌, 🍒";
  const result = fruits.split(",");
  console.log(result);  // ["🍎", " 🥝", " 🍌", " 🍒"]
}

3. Reverse

: 배열의 순서를 반전한다. 첫 번째 요소는 마지막 요소가 되며 마지막 요소는 첫 번째 요소가 된다.

{
  const array = [1, 2, 3, 4, 5];
  const result = array.reverse();  
  
  // ❗ 배열자체와 리턴값 모두 변환시킨다.
  console.log(result);  // [5, 4, 3, 2, 1]
  console.log(array);  // [5, 4, 3, 2, 1]
}

4. Slice

arr.slice([begin[,end]])

: 어떤 배열의 begin부터 end까지(end 미포함)에 대한 복사본을 새로운 배열 객체로 반환한다. 원본 배열은 바뀌지 않는다.

매개변수

• begin (Optional) : 0을 시작으로 하는 추출 시작점에 대한 인덱스를 의미

  • 음수 인덱스 : 배열의 끝에서부터의 길이
    e.g. slice(-2) 는 배열에서 마지막 두 개의 엘리먼트를 추출

  • undefined : 0번 인덱스부터 slice

  • 배열의 길이보다 큰 경우 : 빈 배열을 반환

• end (Optional) : 추출을 종료 할 0 기준 인덱스, slice 는 end 인덱스를 제외하고 추출
  e.g. slice(1,4)는 두번째 요소부터 네번째 요소까지 (1, 2 및 3을 인덱스로 하는 요소) 추출

  • 음수 인덱스 : 배열의 끝에서부터의 길이
    e.g. slice(2,-1) 는 세번째부터 끝에서 두번째 요소까지 추출

    = 생략 : slice()는 배열의 끝까지(arr.length) 추출
    배열의 길이보다 큰 경우 : silce()는 배열의 끝까지(arr.length) 추출

반환 값
: 추출한 요소를 포함한 새로운 배열

{
  const array = [1, 2, 3, 4, 5];
  const result = array.slice(2, 5); 
  // index 2~4까지만 리턴
  console.log(result); // [3,4,5]
  console.log(array); // [1,2,3,4,5]
}

< 공용 예제 >
앞으로 나올 Find, Filter, 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, 66),
  new Student("E", 18, true, 88),
];

5. Find

arr.find(callback[,thisArg])

: 주어진 판별 함수를 만족하는 "첫 번째 요소"의 값을 반환한다. 그런 요소가 없다면 undefined를 반환한다.

Q. 점수가 90인 학생을 찾아라.

{
  const result = students.find((student) => student.score === 90);
  console.log(result); 
// Student {name: "C", age: 30, enrolled: true, score: 90}
}

6. Filter

arr.filter(callback(element[,index[,array]])[,thisArg])

: 주어진 함수의 테스트를 통과하는 모든 "요소"를 모아 새로운 배열로 반환한다.

매개변수

• callback
  : 각 요소를 시험할 함수. true를 반환하면 요소를 유지하고, false를 반환하면 버립니다. 다음 세 가지 매개변수를 받는다.

  • element : 처리할 현재 요소
  • index (Optional) : 처리할 현재 요소의 인덱스
  • array (Optional) : filter를 호출한 배열

• thisArg (Optional)
  : callback을 실행할 때 this로 사용하는 값

반환 값
: 테스트를 통과한 요소로 이루어진 새로운 배열

Q. 등록된 학생들의 배열을 만들어라.

{
  const result = students.filter((student) => student.enrolled);
  console.log(result);
} 

</* [console]
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}
*/

7. Map

arr.map(callback(currentValue[,index[,array]])[,thisArg])

: 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 "결과"를 모아 새로운 배열을 반환한다.

매개변수는 .filter와 같다( element=currentValue ).

Q. 오직 학생들의 점수만을 담은 배열을 만들어라.
result should be: [45, 80, 90, 66, 88]

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

{
  const result = students.some((student) => student.score < 50);
  console.log(result); // true
} 

arr.reduce(callback[,initialValue])

{
  const result = students.reduce((acc, cur) => acc + cur.score, 0); // 첫 콜백 호출시 acc=0, cur=45
  console.log(result / students.length);
} // 73.8

arr.sort([compareFunction])

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

{
  const result = students
    .map((student) => student.score) // 학생들의 점수만 추출
    .filter((score) => score >= 50) // 그 중 조건에 해당하는 것만 필터링
    .join(); // 모든 요소 연결해 하나의 문자열로 만듬
  console.log(result); // '45, 80, 90, 66, 88'
}

{
  const result = students
    .map((student) => student.score)
    .sort((a, b) <=> a - b) // asc
    // .sort(( a, b) => b - a) // desc
    .join();
  console.log(result);
}