Array APIs

프로젝트나 현업에서 유용하게 쓰일 배열의 API에 대해서 알아보자.
몰랐던 메서드가 너무 많아서.. 아니 생각보다 너무 좋아서? 놀랬다. 꼭 기억해두자.

1번 - join

< make a string out of an array >

배열에 3가지 과일이 들어있다. 하나의 스트링으로 바꿔라

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

Adds all the elements of an array into a string, separated by the specified separator string.
@param separator A string used to separate one element of the array from the next in the resulting string. If omitted, the array elements are separated with a comma
.
join(separator?: string): string;

2번 - split

< make an array out of a string >

문자열 형태로 4개의 과일이 있다. 배열로 바꿔라

const fruits = '🍓, 🍎, 🍊, 🍒';
const result = fruits.split();
console.log(result);

Split a string into substrings using the specified separator and return them as an array.
@param splitter An object that can split a string.
@param limit A value used to limit the number of elements returned in the array
.
split(splitter: { [Symbol.split](string: string, limit?: number): string[]; }, limit?: number): string[];

3번 - reverse

< 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); // [5, 4, 3, 2, 1]
console.log(array);  // [5, 4, 3, 2, 1]

reverse 를 호출한 배열도 바뀐다.
호출한 해당 배열 자체가 바뀌는 건지, 새로운 배열을 생성하는지에 주의하자.
reverse 메서드는 호출한 해당 배열 자체를 바꿔버린다.

Reverses the elements in an array in place.
This method mutates the array and returns a reference to the same array.
.
reverse(): T[];

4번 - splice

< 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]

splice 메서드는 배열 자체에서 값을 삭제해버리고 리턴 값은 삭제한 값들이다.

Removes elements from an array and, if necessary, inserts new elements in their place, returning the deleted elements.
@param start The zero-based location in the array from which to start removing elements.
@param deleteCount The number of elements to remove.
@returns An array containing the elements that were deleted.
.
splice(start: number, deleteCount?: number): T[];

조건 만족 x 배열 자체에서 값을 제거하는게 목적이 아니라 제외하고 남은 애들로 새로운 배열을 만드는 게 목적이므로

5번 - slice

const array = [1, 2, 3, 4, 5];
const result = array.slice(2,5);
console.log(result); // [3, 4, 5]
console.log(array);  // [1, 2, 3, 4, 5]

Returns a copy of a section of an array.
For both start and end, a negative index can be used to indicate an offset from the end of the array.
For example, -2 refers to the second to last element of the array.
@param start The beginning index of the specified portion of the array.
If start is undefined, then the slice begins at index 0.
@param end The end index of the specified portion of the array. This is exclusive of the element at the index 'end'.
If end is undefined, then the slice extends to the end of the array.
.
slice(start?: number, end?: number): T[];

---

기본 폼

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

6번 - find

< find a student with score 90 >

성적이 90점을 넘는 학생을 찾아라

const result = students.find(function(student, index) {
    return student.score === 90;
}); 
// 다음과 같이 줄일 수 있다.
// => const result = students.find((student) => student.score === 90); 
console.log(result);

Returns the value of the first element in the array where predicate is true, and undefined
otherwise.
@param predicate find calls predicate once for each element of the array, in ascending
order, until it finds one where predicate returns true. If such an element is found, find
immediately returns that element value. Otherwise, find returns undefined.
@param thisArg If provided, it will be used as the this value for each invocation of
predicate. If it is not provided, undefined is used instead.
.
find < S extends T>(predicate: (this: void, value: T, index: number, obj: T[]) => value is S, thisArg?: any): S | undefined;
find(predicate: (value: T, index: number, obj: T[]) => unknown, thisArg?: any): T | undefined;

7번 - filter

< make and array of enrolled students >

수강 신청된 학생들로 배열을 만들어라

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

Returns the elements of an array that meet the condition specified in a callback function.
@param predicate A function that accepts up to three arguments. The filter method calls the predicate function one time for each element in the array.
@param thisArg An object to which the this keyword can refer in the predicate function. If thisArg is omitted, undefined is used as the this value.
.
filter(predicate: (value: T, index: number, array: T[]) => unknown, thisArg?: any): T[];

8번 - map

< make an array containing only the students scores result should be :
[45, 80, 90, 66, 88] >

학생들의 성적들로만 이루어진 배열을 만들어라

const result = students.map((student) => student.score); 
// [45, 80, 90, 66, 88]
console.log(result);

Calls a defined callback function on each element of an array, and returns an array that contains the results.
@param callbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.
@param thisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.
.
map< U>(callbackfn: (value: T, index: number, array: T[]) => U, thisArg?: any): U[];

9번 - some, every

< check if there is a student with the score lower than 50 >

성적이 50점 보다 작은 학생이 있는지 체크하라

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

const result2  = !students.every((student) => student.score >= 50);
console.log(result2); // true

Determines whether the specified callback function returns true for any element of an array.
@param predicate A function that accepts up to three arguments. The some method calls
the predicate function for each element in the array until the predicate returns a value
which is coercible to the Boolean value true, or until the end of the array.
@param thisArg An object to which the this keyword can refer in the predicate function.
If thisArg is omitted, undefined is used as the this value.
.
some(predicate: (value: T, index: number, array: T[]) => unknown, thisArg?: any): boolean;

Determines whether all the members of an array satisfy the specified test.
@param predicate A function that accepts up to three arguments. The every method calls
the predicate function for each element in the array until the predicate returns a value
which is coercible to the Boolean value false, or until the end of the array.
@param thisArg An object to which the this keyword can refer in the predicate function.
If thisArg is omitted, undefined is used as the this value.
.
every(predicate: (value: T, index: number, array: T[]) => unknown, thisArg?: any): boolean;

10번 - reduce

< compute students average score >

학생들의 평균 성적을 구하라

const result = students.reduce((prev, curr) => {
    console.log("------");
    console.log(prev);
    console.log(curr);
    return prev + curr.score;
}, 0);
// 간단하게 만들면? 
// const result = students.reduce((prev, curr) => prev + curr.score, 0);
console.log(result);
console.log(result/5);
// console.log(result/ students.length);

Calls the specified callback function for all the elements in an array. The return value of the callback function is the accumulated result, and is provided as an argument in the next call to the callback function.
@param callbackfn A function that accepts up to four arguments. The reduce method calls the callbackfn function one time for each element in the array.
@param initialValue If initialValue is specified, it is used as the initial value to start the accumulation. The first call to the callbackfn function provides this value as an argument instead of an array value.
.
reduce< U>(callbackfn: (previousValue: U, currentValue: T, currentIndex: number, array: T[]) => U, initialValue: U): U;

11번

< make a string containing all the scores >

result should be : '45, 80, 90, 66, 88'

const result = students
    .map((students) => students.score)
    .join();
console.log(result); // '45,80,90,66,88'


// 50점 이상인 애들만 뽑고 싶다면? 

const result2 = students
    .map((students) => students.score)
    .filter((score) => score >= 50)
    .join();
console.log(result2); // '80,90,66,88'

12번 - sort

< do sorted in ascening order >

result should be : '45, 66, 80, 88, 90'

const result = students
    .map((students) => students.score)
    .sort((a, b) => a - b)
    .join();
console.log(result); // 45,66,80,88,90

Sorts an array in place.
This method mutates the array and returns a reference to the same array.
@param compareFn Function used to determine the order of the elements. It is expected to return
a negative value if the first argument is less than the second argument, zero if they're equal, and a positive
value otherwise. If omitted, the elements are sorted in ascending, ASCII character order.

[11,2,22,1].sort((a, b) => a - b)

.
sort(compareFn?: (a: T, b: T) => number): this;