유용한 10가지 배열함수들과 Array APIs 총정리

array-apis에 대한 문제들을 보면

배열을 string으로 변환하는 문제인데, 주어진 배열안에는 세개의 아이템이 담겨져 있고 담겨진 이 아이템을 string으로 묶어야 한다.

배열안에 join이라는 함수가 있는데

join이라는 함수를 보게되면 join은 배열에 있는 모든 것들을 더해서 string으로 리턴하는 것인데 separator을 통해서 구분자를 넣어서 string으로 만들어준다. separator는 ?가 들어있는데 전달해도 되고 전달하지 않아도 된다는 것이다.

배열안에 있는 join이라는 API는 separator라는 문자열을 받기도 하고 안받기도 하는데 결국은 배열에 있는 모든 아이템을 string으로 나타내어주는 것이다. 

구분자(,)를 넣어서 해도 되고 안해도 되는데 넣어서 출력하게 되면 아래 콘솔창과 같이 나오게 된다.

두번째 quiz는 주어진 string을 array로 변환하는 것이다.

주어진 string이 ,로 구분되어져 있는데 배열로 만들게 되면 4개의 과일이 들어져있는 배열이 만들어진다. 문자열안에 split이라는 API를 이용하면

String에 정의된 split을 보게되면 총 2가지의 파라미터를 받는데 구분자 / 리밋을 전달받는다. string을 여러가지 문자열로 잘게 나누어 주는데(전달된 separator을 받아와서 해준다)

type은 string이거나 RegfExp(정규표현식) 두 가지중 하나이고 두번째는 limit에 ?이 있는데 리턴받을 배열의 사이즈를 지정하는것도 가능하다.

문자열을 ,단위로 나누면 콘솔을 찍어보면 과일이 4개가 담긴 배열이 나오게 된다.

그리고 limit이라는 파라미터를 전달할 수가 있는데 첫번째 두개의 배열을 전달받고 싶다하면 아래와 같이 나타내면 된다.

세번째로는 주어진 배열의 순서를 거꾸로 만드는 것인데

array안에 reverse라는 api를 이용해서 거꾸로 만들어보자. 거꾸로 된것을 출력해보면 아래 콘솔창과 같이 나오게 된다.

한가지 더 중요한 것은 리턴된 배열의 값이 순서가 바꼈는데 사실은 함수를 호출한 array 배열자체도 순서가 바뀌게 된다는 것을 알 수 있다. 즉 reverse라는 것은 배열자체를 변화시키고 리턴값도 변화된 리턴값을 나타낸다라고 알면된다.

네번째로는 배열에서 첫번째 두번째를 없애고 새로운 배열을 만드는 것이다.

splice를 쓰게되면 splice는 어디서 부터 몇개를 지울껀지 적으면 그 부분을 삭제해주는 API였다.(리턴되는 것은 삭제되는 요소들이 리턴되는 것이였다.) 즉 splice는 배열자체에서 데이터를 삭제하게 된다. 즉 array자체를 변형하는 것이 아니라 새로운 배열을 사용하게 된다.

slice를 사용해서 0 1번째 인덱스를 제외한 나머지 값들을 받아오고 싶으면

stat인덱스는 2부터 시작해서 3 4번째 인덱스까지니까 마지막 end를 5를 하게되면 5는 배제되니까 2 3 4번째 인덱스를 출력하게 된다. 아래 콘솔창을 보면 result는 3 4 5만 출력하고 array는 1 2 3 4 5를 출력하게 된다.

 

즉 splice는 배열자체를 수정하는 것이고 slice는 배열에서 원하는 부분만 리턴해서 받아오고 싶을 때 쓰는 것이다.

다음부터 나오는 퀴즈는 class Student를 이용할 것이다.(이름 나이 수업등록여부 점수 총 4가지의 properties가 들어있다.)

 

첫번째 퀴즈로는 학생의 점수가 90점인 학생을 찾아보자.

find라는 API를 이용하면 된다.

find를 보면 두가지의 인자가 있는데 predicate하나와 thisArg하나 두가지가 전달되어진다. predicate가 전달되는 모양을 보게되면 콜백함수를 받는다라고 알 수 있다.(총 4가지 인자 this~obj) 값이 boolean값으로 무언가가 전달되어진다.

 

find라는 함수는 첫번째로 찾아진 함수를 리턴하는데 전달된 콜백함수가 true가 되면 리턴하고 찾지못하면 undefined하게된다. 그리고 predicate는 배열에 있는 모든 요소들마다 호출이 되는데 호출되어진 콜백함수가 true를 리턴하면 바로 함수를 멈추고 true가 된 요소를 리턴한다라고 되어있다.

find는 콜백함수를 사용자가 만들어서 전달을 해야 하는데 function에는 student라는 value와 index를 적어서 출력하게 되면 5번 출력되게 된다.

학생의 점수가 90점인 학생을 출력해보자 콜백함수는 boolean타입을 리턴하는데 클래스에 있는 것들을 하나씩 확인하면서 90점이상인 것들을 하나씩 확인하게 된다. arrow function을 이용하여 작성하게 되면 아래와 같이 나타낼 수 있다.

 

즉 arrow function은 배열들의 요소마다 호출이 되고 각각 하나씩 student를 받아왔을 때 학생의 점수가 90점이면 true이고 아니면 false로 return하게 되고 find가 첫번째로 true가 나오면 해당하는 그 배열의 요소를 리턴해주는 API이다.

여섯번째로는 수업에 등록한 학생들만 출력해보자.

filter를 이용해서 찾아보자. filter도 콜백함수를 전달해서 콜백함수가 true인 것들만 모아서 새로운 배열을 전달해주는 것이다. true된 것들만 출력해서 아래와 같이 나타내면 콘솔창에 총 3명의 학생이 나타난다.

일곱번째는 학생들의 점수만 뽑아와서 점수만 들어있는 배열을 만드는 것이다.

student안에 있는 점수들을 mapping을 할 것인데 세 가지의 아이템이 들어있는 배열이 있다치자.

숫자 1 2 3이 들어있다고 하면 map은 지정된 콜백함수를 호출하면서 각각의 1 2 3 요소들을 거쳐서 새로운 값으로 변환하는 것을 말한다. 즉 전달한 콜백함수가 어떠한 일을 하느냐에 따라서 1 2 3이 다른값으로 mapping되어서 만들어진다.

만약에 func이 숫자를 2배로 곱해주는 함수이면 1 2 3 이 각각 2 4 6으로 변환되는 것을 말한다.

 

여기서는 주어진 student라는 오브젝트를 score로만 변환해서 만들면 되는 것이다. arrow function으로 정의해보면 

주어진 student가 들어오면 student들의 점수로 변환해야 하니까 학생들을 받아서 학생들의 점수만 리턴하는 식으로 아래와 같이 작성했다. 그러면 점수만 들어있는 배열이 만들어진다. 

즉 map은 배열안에 들어있는 모든 요소들을 사용자가 전달해준 콜백함수를 호출하면서 콜백함수에서 리턴되어진 것들로 대체하는 것이다.

다음으로는 학생들 중에 점수가 50점보다 낮은학생이 있는지 없는지 확인하는 것이다.

한개 있으니까 true로 결과가 나와야 한다. some을 이용해보자. some은 배열의 요소중에서 콜백함수가 true가 리턴이 되는 것이 있는지 없는지를 확인해 주는 것이다.

 

작성하게되면 학생들의 점수가 50점 미만인 것이 있는지 없는지 확인하고 싶어 아래와 같이 작성하면 true라고 나오게 된다. 콜백함수는 배열에 있는 요소들 한개한개마다 수행이 되는데 50점보다 낮은애가 한명이라도 있으면 true가 리턴이 되는 것이다. 즉 배열에서 하나라도 해당조건에 만족되는 것이 있으면 true가 리턴이 된다.

 

every를 써서 동일하게 만들 수도 있는데, every는 배열에 있는 모든요소들이 해당조건을 충족해야지만 true로 나오는 것을 말한다. every를 써서 모든 학생이 50점보다 높다는 것이 false이니까 !를 써서 반대로 작성하게되면 해당 결과값 true가 나오게 된다. 이해하기 힘드니까 some을 쓰자(배열중에 어떤것이라도 하나 만족되면 some / 모든배열의 조건이 만족되어야 할 때는 every를 쓰면 된다)

다음 문제는 학생들의 평균점수를 구하는 것이다.

배열의 있는 API reduce를 이용해서 쓰게되면 reduce는 콜백함수를 전달하고 initialvalue를 전달할 수 있다.

콜백함수는 배열안에 있는 모든요소가 호출이 되는데 콜백함수에서 리턴되는 값은 함께 누적된 결과값을 리턴한다.

사용자가 전달하는 콜백함수 안에서 리턴할 때는 어떤 값이 누적된 갓이 전달되어야 하는 것이다.

 

즉 reduce는 배열에 있는 모든 요소값을 누적하는 뭔가 함께 모아놓을때 쓰는 거라고 알면된다.

prev값과 curr값을 받을 수 있다. prev은 이전에 콜백함수에서 리턴된 값이 전달되어져 오고

curr은 배열의 아이템을 순차적으로 전달 받는다라고 이해하고 넘어가자

 

reduce는 사용자가 원하는 시작점부터 모든 배열을 돌면서 어떤 값을 누적할 때 쓰는 것이다. reduceRight라는 것도 있는데(reduceRight은 배열의 제일 뒤에서부터 시작하는 것이다.)

 

평균값을 구해야 하니까 모든 값을 더한 다음에 학생의 수로 나누면 된다.

 

다음으로는 학생들의 모든 점수를 string으로 변환해서 만드는 것이다.

앞에서 사용한 것들을 함께 묶어서 쓰면 된다. 학생들의 배열을 점수로 변환한다.(map을 사용해서)

map을 이용하게 되면 새로운 배열이 리턴이 되고 그 리턴된 배열에 있는 join을 쓰게되면 string으로 바뀌게 된다.

여기서 점수가 50점 이상인 것들만 출력을 하려하면 filter을 이용해서 사용하면 된다.

 

정리하면 학생들을 우선 점수로 변환한 다음에 점수들 중에 50점 이상인 것들만 필터링해서 join하구나 하고 가독성좋게 작성하는 것이다.

마지막 문제는 학생들의 점수를 오름차순으로 정렬해서 string으로 변환하는 것이다.

students의 값을 map을 이용해서 점수로 변환하고(student.score로 mapping을 한다음에)

sort라는 것을 이용해서 정렬하자 sort에는 a 와 b 이전값과 현재값이 있다. a - b라고 하면 첫번째가 뒤에꺼보다 작다라고 간주해서 정렬이 된다. 학생 a b가 전달이 되는 a가 b보다 작다면(-니까) 원하는 대로 오름차순 되고 join을 이용해서 string으로 변환하면 된다.

 

만약에 점수가 큰 것이 앞에 나오고싶다(내림차순으로)하면 b - a로 하면 된다.

여기 까지 배열과 관련된 API를 알아보았다.

 

참고: https://www.youtube.com/watch?v=3CUjtKJ7PJg&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=10