JS 근본 공부 - 배열 API 연습문제

1. 배열 API 연습문제

- 배열을 사용할 때 함께 유용하게 쓰일 수 있는 API를 연습해보자. 

 

 

[연습문제]

"use strict";
// Q1. make a string out of an array
{
  const fruits = ["apple", "banana", "orange"];
  fruits.join();
}

// Q2. make an array out of a string
{
  const fruits = "🍎, 🥝, 🍌, 🍒";
  const result = fruits.split(",");
}

// Q3. make this array look like this: [5, 4, 3, 2, 1]
{
  const array = [1, 2, 3, 4, 5];
}

// Q4. make new array without the first two elements
{
  const array = [1, 2, 3, 4, 5];
}

// Q5 ~ Q10.
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
{
}

// Q6. make an array of enrolled students
{
}

// Q7. make an array containing only the students' scores
// result should be: [45, 80, 90, 66, 88]
{
}

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

// Q9. compute students' average score
{
}

// Q10. make a string containing all the scores
// result should be: '45, 80, 90, 66, 88'
{
}

// Bonus! do Q10 sorted in ascending order
// result should be: '45, 66, 80, 88, 90'
{
}

 

 

---

2. 해설

 

Q1) Array library - join

 

[API 문서]

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

• Array를 String형식으로 변환한다. 
• seperator : 원하는 구분자를 매개변수로 넣어서 사용한다. (생략 가능)

 

[정답코드]

 

 

 

Q2) String library - split

 

[API 문서]

/**
* Split a string into substrings using the specified separator and return them as an array.
* @param separator A string that identifies character or characters to use in separating the string. If omitted, a single-element array containing the entire string is returned.
* @param limit A value used to limit the number of elements returned in the array.
*/

split(separator: string | RegExp, limit?: number): string[];

• String을 Array형식으로 변환하여 반환한다.
• seperator : String에 존재하는 문자 중 하나를 구분자로 입력한다. (생략 불가)
• limit : 구분자에 의해 분리된 문자열 중 몇개만 사용할 것인지 설정

 

[정답코드]

 

 

 

Q3) Array library - reverse

[API 문서]

/**
* Reverses the elements in an Array.
*/
    reverse(): T[];

• Array의 데이터 정렬 순서를 거꾸로 만든다.

 

[정답코드]

 

 

 

Q4) Array library - splice &  slice

 

[API 문서 - 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.
*/
    splice(start: number, deleteCount?: number): T[];

• start(시작 index)부터 deleteCount(개수)만큼 잘라낸 뒤 그것을 반환한다.
• 잘라낸 요소의 값을 반환하면서 동시에 잘라낸 요소는 기존의 배열에서 사라진다. 
• deleteCount를 생략하면 시작 index부터 끝까지 잘라낸다. 

 

[정답코드- splice]

 

 

[API 문서 - slice]

/**
* Returns a section of an array.
* @param start The beginning of the specified portion of the array.
* @param end The end of the specified portion of the array. This is exclusive of the element at the index 'end'.
*/
    slice(start?: number, end?: number): T[];

• splice와는 다르게 기존의 배열에는 영향을 주지않고 입력한 index 범위만큼 복사하여 반환한다.
• end index는 exclusive이기 때문에 범위에 포함이 되지 않음을 주의해야 한다.
  ex) slice(0,2)라면 0 ~ 1번 index까지 복사한다. 2번 index는 포함되지 않는다. (exclusive)
• end index는 생략 가능하며, 생략시 begin index를 포함한 begin index 이후의 모든 요소를 복제한다.

 

[정답코드- slice]

 

 

 

Q5) Array library - find

 

[API 문서]

/**
* 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;

* predicate = callback 함수

• predicate가 true일 때, 배열에서 첫번째로 검색된 값을 반환한다.

 

 

 

[정답코드]

find가 어떤 식으로 작동하는지 확인하기 위한 코드이다.

 

score가 90점인 학생을 반환하는 부분을 arrow function으로 표현

 

 

[Arrow function]

// 1번 함수
const result = students.find(function (student) {
    return student.score === 90;
  });
  
// arrow function - 1번 함수를 간단하게 표현  
const result = students.find((student) => student.score===90);

• 위의 함수와 아래의 함수는 동일한 의미다. 
• arrow function은 1문장으로 표현이 가능한 경우, function, 중괄호, return을 생략할 수 있다. 

 

 

 

Q6) Array library - filter

 

[API 문서]

 /**
* 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<S extends T>(predicate: (value: T, index: number, array: readonly T[]) => value is S, thisArg?: any): S[];

 

 

[find와 filter의 차이점]

• find 함수는 배열의 각 요소에 콜백함수의 연산을 순차적으로 하나씩 수행하다가 콜백함수가 true를 반환하면 다음 요소에는 콜백함수를 수행하지 않고 바로 종료된다.
• filter 함수는 배열의 모든 요소에 콜백함수의 연산을 수행한 후 콜백함수가 true를 반환한 요소들만 모아 배열로 반환한다.

 

 

 

 

 

[정답코드]

 

 

 

Q7) Array library - map

 

[API 문서]

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

• 콜백함수의 연산을 각 요소에 수행하여 연산의 결과값을 배열로 반환한다.

 

[정답코드]

 

 

 

Q8) Array library - some & every

 

[API 문서 - some]

/**
* 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;

• 배열의 요소 중 콜백함수의 연산에 대해 true를 반환하는 요소가 있는지 없는지 확인한다.
• true(있음)/false(없음)를 반환한다.

 

 

[정답코드 - some]

 

 

 

[API 문서 - every]

/**
* 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;

• every의 경우 some과는 다르게 배열의 모든 요소가 콜백함수의 연산에 대해 true를 반환하는지 확인한다. 

 

 

 

Q9) reduce

 

[API 문서]

/**
* 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(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T): T;
    reduce(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T, initialValue: T): T;

• 배열의 모든 요소에 콜백함수가 적용되며 요소들의 누적된 값을 반환한다.
• 매개변수로 prev(이전 값)과 curr(현재 값)을 받는다. (아래 예시참고)

 

[prev, curr의 이해를 위한 설명]

- 처음에 호출된 경우 A와 B가 출력된다.

- 두번째 이후로는 prev 값이 undefined이며, curr 값만 호출된다.

- prev에 값이 없는 이유는 다음 호출에 사용될 prev값을 return하지 않았기 때문이다. 즉, 현재의 curr값이 다음 호출에 prev가 되기때문에 curr값을 return해줘야 한다. (아래 예시참고)

 

 

 

[정답코드]

- 위에서 말했듯이, reduce는 배열의 각 요소를 prev와 curr를 이용하여 받아온다.

- 첫번째 호출에서 prev값을 0으로 초기화해서 학생들의 점수를 누적할 수 있도록 한다. 

- 평균을 구해야하므로 마지막에 총 개수로 나누는 것을 잊지말자. 

- 코드는 다음과 같다. 

 

 

 

Q10) map + join

- map을 이용하여 먼저 score만으로 이루어진 배열을 만든 후, join을 사용하여 문자열로 바꿔준다. 

 

 

[정답코드]

 

- 위의 코드는 과정을 보여주기 위하여 작성한 것으로, 실제 정답코드는 아래와 같다.

 

 

 

Bonus) map + join + sort

 

[API 문서]

/**
* Sorts an array.
* @param compareFn Function used to determine the order of the elements. It is expected to return
* a negative value if first argument is less than second argument, zero if they're equal and a positive
* value otherwise. If omitted, the elements are sorted in ascending, ASCII character order.
* ```ts
* [11,2,22,1].sort((a, b) => a - b)
* ```
*/
    sort(compareFn?: (a: T, b: T) => number): this;

• 배열의 각 요소들의 크기를 비교하여 순서를 결정하여 정렬된 배열을 반환한다. 
• 기본적으로 오름차순을 기반하고 있으며, a - b의 값이 음수인 경우에는 a를 더 작은 수로 인지하여 b보다 앞에 정렬한다. 
• 내림차순의 경우 (a, b) => b - a로 표기하면 된다. 

 

 

[정답코드]

 

 

 

 

[정보출처]

www.youtube.com/watch?v=3CUjtKJ7PJg&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=9