[드림코딩]자바스크립트 기초 정리 ⑦ 배열함수 Array APIs 총정리

Join 배열에서 문자열로 변환

 

. join은 배열에 있는 함수를 문자열로 변환해준다

const result = fruits.join();에서 () 괄호 안에는 생략도 가능하고 구분자를 넣어주고 싶다면 ', ' '^' 등

구분자를 추가하는 것이 가능하다

 

Split 문자열에서 배열로 변환

 

위와 반대로 문자열을 배열로 변경하려면 .split을 사용한다.

split엔 옵션으로 구분자와 나올 수 있는 개수를 제한하는 것이 가능한데,

만약 구분자를 넣지 않으면 옆의 과일 이모티콘이 하나 하나 구분되는 것이 아닌 전체가 한 개로 묶여서

split은 구분자를 꼭 넣는 것이 좋다.

또한 fruits.split(', ', '2')로 개수를 2로 첫 번째 두 개의 배열을 지정받아서 사과와 키위만 출력된다.

 

Reverse 배열의 순서를 반대로

 

배열 안의 숫자의 순서를 반대로 하고 싶다면. reverse를 사용

그리고 리턴된 배열의 값 result뿐 아니라 함수를 호출 한 배열 자체도 순서가 바뀐다

 

Splice 배열의 데이터 삭제

 

splice는 어디서부터 몇 개 지울지 정하면 그 부분을 삭제해주는 api이다

그리고 리턴되는 값은 삭제된 요소들이 리턴되는데 즉 배열 자체에서 데이터를 삭제한다

만약 array 자체를 변경하는 것이 아닌 새로운 array를 만들고 싶다면 밑의 slice 사용

 

Slice 배열에서 원하는 부분만 리턴해서 받아오기

 

slice는 배열의 특정한 부분을 리턴해주는데 그 특정한 부분은 우리가 지정 가능하다

0~2까지 우리가 지정을 하면 2를 제외한 0~1까지만 전달이 된다

그래서 array.slice에 시작을 2로 하여 0~1을 배제하고, 마지막을 5로 하여 총 2~4까지 나오게 함

result의 결괏값으로 3,4,5가 나오고 array는 여전히 12345 가 나온다 (변하지 않음)

즉 splice는 배열 자체를 수정하고

slice는 배열에서 원하는 부분만 리턴해서 받아오고 싶을 때 사용한다

 

참고하기

 

Find 첫 번째로 찾은 함수 요소를 리턴

 

find는 첫 번째로 찾아진 함수를 요소를 리턴한다 ( predicate가 트루일 때)

predicate는 배열에 있는 모든 요소들 마다 호출되고, 그래서 이 호출되는 콜백 함수가 true면 바로 함수를 멈추고

그 요소를 리턴한다. 그래서 find는 내가 콜백 함수를 만들어서 전달해야 한다.

위의 애로우 펑션은 배열들의 요소마다 호출이 되고 학생 점수를 불러와서 트루와 펄스를 리턴하게 되고

여기서 트루를 찾아내서 리턴한다

 

 

filter도 콜백 함수를 전달해서 true인 아이들만 모아서 새로운 배열을 전달해준다

 

Map 배열의 요소를 다른 데이터로 변환

 

map은 배열 안에 들어있는 요소 한 가지 한 가지를 다른것으로 변환한다

배열안에 있는 모든 요소를 우리가 전달해준 콜백 함수를 호출하면서 콜백 함수에서 가공된, 리턴 된 값으로 대체하는 것인데

이렇게 배열 안의 요소들을 우리가 원하는 함수를 이용해서 다른 방식의 데이터를 만들고 싶을 땐

map을 이용하면 매우 유용하다

 

하나라도 조건을 충족하면 Some, 모든 요소들이 충족해야 한다면 Every

 

some은 배열의 요소 중에서 콜백 함수의 리턴이 true가 되는 애가 있는지 없는지 확인해준다.

만약 배열에서 하나라도 조건이 만족되는 것이 있다면 true로 전달해준다

 

every는 배열에 들어있는 모든 요소들이 이 조건을 충족해야지만 true를 전달해주기 때문에

모든 학생의 점수가 50점 미만일 때만 true를 전달한다.

 

그래서 배열 중 하나만이라도 조건 충족했을 때 true를 전달하고 싶다면 some을 사용하고

모든 배열이 조건을 만족해야 true를 전달하고 싶다면 every를 사용한다. 

 

Reduce 배열의 값 누적하기

 

Reduce는 콜백 함수를 전달할 수 있는데, 콜백 함수에서 리턴되는 값은 함께 누적된 결괏값을 리턴한다

배열에 있는 모든 요소들의 값을 누적하는, 뭔가 함께 모아 놓을 때 쓴다는 걸 알 수 있다

이전 값과 현재 값을 받을 수 있고, 시작점부터 모든 배열을 돌면서 어떤 값을 누적할 때 사용한다

 

prev 함수는 이전에 return으로 호출되었던 값이 전달되어오고, curr은 배열의 아이템을

순차적으로 전달받는다. 그리고 reduce 함수에 의해 이 값이 차곡차곡 쌓인다

reduce는 앞에서부터 시작하고 reduceright은 뒤에서부터 시작

 

 

맵, 필터, 조인을 묶어서 만듦. 이렇게 여러 가지를 같이 하는 걸 함수형 프로그래밍이라고도 함

 

 

sort는 이전 값과 현재 값 전달한다

만약 마이너스 값 리턴하면 첫 번째 값이 마지막 값보다 작다고 생각하고 정렬이 된다

점수가 큰 것부터 나오게 하고 싶다면 b-a로 변경 가능하다