[JavaScript] #7. 배열의 다양한 API

JavaScript의 배열의 다양한 API에 대해서 알아보았다.

 

1. 삽입 

 

▶push( 삽입할 값 ) : 배열 맨 뒤에 삽입

▶unshift( 삽입할 값 ) : 배열 맨 앞에 삽입

 

여기서 삽입할 값은 여러개 작성 가능하다.

 

 

 

 

 

2. 삭제

 

▶pop( ) : 배열 맨 뒤 삭제

▶shift( ) : 배열 맨 앞 삭제

 

삭제는 삽입과 다르게 여러개 삭제할 수 없고 하나씩 삭제 가능하다.

 

그리고 unshift( ), shift( )가 push( ), pop( ) 보다 속도가 느리기 때문에 push( ), pop( ) 을 사용하는 것을 권장한다.

 

 

 

 

 

3. 배열 잘라내기

 

▶splice( 시작위치, 개수(선택사항), 삽입할 값(선택사항) ) : 지정된 인덱스에서부터 삭제 및 삽입 

 

개수는 시작 위치부터 몇 개를 삭제할 것인지를 의미한다.

만약 값을 작성하지 않는다면 끝까지 삭제한다.

 

삽입할 값은 삭제한 위치에 값을 삽입하는 것이고, 여러개 삽입 가능하다.

 

반환 값은 시작위치에서부터 개수에 해당하는 만큼 배열로 반환된다. (삭제된 값)

 

또한 splice는 원래 배열을 변경한다.

 

 

출력결과

 

array 배열의 출력값을 보면 "b", "c", "d" 가 삭제되고, 삭제된 위치에 "new1", "new2"가 삽입되었다.

따라서 원래 배열이 변경되었음을 확인할 수 있다.

 

 

 

▶slice( 시작, 끝(선택사항) ) : 시작(이상)부터 끝(미만)까지 배열을 잘라낸다.

 

끝을 작성하지 않으면 맨 끝까지 배열을 잘라낸다.

 

반환값은 시작~끝에 해당하는 배열이다.

 

또한 slice는 splice와 다르게 원래 배열을 변경하지 않는다.

 

출력결과

 

array 배열의 출력값을 보면 배열이 변경되지 않았음을 확인할 수 있다.

 

그리고 slice는 복사의 기능도 있다. 인수에 아무런 값도 주지 않는다면, 배열을 복사한다.

 

 

출력결과

 

copyArray 배열을 보면 array배열이 그대로 복사되었음을 확인할 수 있다.

 

 

 

 

 

4. 합치기

 

▶concat( 배열 ) : 배열을 뒤에 붙임으로써 새로운 배열을 생성한다.

 

 

 

 

 

 

 

5. 배열 ↔ 문자열

 

▶join( 구분자(선택사항) ) : 배열 → 문자열

 

구분자를 작성하지 않으면 ,(콤마)로 구분한다.

 

 

 

 

▶split( 구분자 , 개수(선택사항) ) : 문자열 → 배열

 

문자열을 구분자를 통해 배열의 요소로 구분한다.

 

 

 

 

 

 

 

6. 역순

 

▶reverse( ) : 원래 배열이 역순으로 변경된다.

 

 

 

 

 

7. 값이 배열 내에 어디에 위치하는 지 검색

 

▶indexOf( 값 ) : 값이 배열의 어느 인덱스에 위치하는 지 검색하고 값이 없다면 -1 반환 (배열에서 값이 중복되는 경우, 배열에서 처음 만난 값의 인덱스 반환)

 

▶lastIndexOf( 값 ): 값이 배열의 어느 인덱스에 위치하는지 검색하고 값이 없다면 -1 반환 (배열에서 마지막으로 만난 값의 인덱스 반환)

 

▶includes( 값 ) : 값이 배열에 있는지 없는지 확인, 있다면 true, 없다면 false 반환.

 

 

 

 

 

 

 

8. 배열 내의 요소에서 특정 값 검색

 

▶find( 콜백함수 ) : 콜백함수가 true가 되는 첫번째 요소만 반환

 

find( function( value, index(선택사항), obj(선택사항) ){ return ... } )

function : 콜백함수는 배열에 있는 모든 요소가 하나씩 호출된다.
return : boolean 타입을 반환해야한다. true인 경우에 find( )를 멈추고 true인 value를 find( )가 반환한다. 

 

 

출력결과

 

students 배열의 요소(value)를 student에 저장한다. 처음에는 첫번째 Student 오브젝트가 저장된다.

따라서 student.score은 45를 의미한다. student.score===90은 false이기 때문에 두번째 Student 오브젝트가 저장되고 위 과정을 반복한다.

세번째 Student 오브젝트에서 student.score===90이 true가 되므로 이 때, find( )를 멈추고 해당 오브젝트인 세번째 Student를 반환한다.

 

 

 

▶filter( 콜백함수 ) : 콜백함수가 true가 되는 여러 요소를 배열에 넣어서 반환

 

 

출력결과

 

student.enrolled===true를 만족하는 Student 오브젝트는 1번째, 3번째, 5번째 오브젝트이다.

총 3개의 요소인 Student를 배열에 넣어서 반환한다.

 

 

 

 

 

9. 맵핑

 

▶map( 콜백함수 ) : 모든 배열의 요소가 콜백함수를 거쳐서 콜백함수에서 return 되어진 값들로 변경

 

 

출력결과

 

 

students의 모든 배열 요소가 (student) => student.score 콜백함수를 통해서 return값인 student.score로 맵핑된다. 

 

 

 

 

 

10. 배열 요소가 콜백함수를 만족하는지 검사

 

▶some( 콜백함수 ) : 배열의 요소 중에서 콜백함수가 true가 되는 요소가 있는지 없는지 검사

 

▶every( 콜백함수 ) : 배열의 모든 요소가 콜백함수를 만족해야 true 반환

 

 

첫번째 Student 오브젝트의 score가 45로 score<50을 만족하기 때문에 some( )은 true를 반환한다.

 

그리고 첫번째 Student 오브젝트로 인해 모든 배열 요소의 score이 50이상을 만족할 수 없어서 every( )는 false를 반환한다. 

 

 

 

 

 

11. 배열 값 누적

 

▶reduce( (이전값, 이후값) => { return ... }, 이전값의 초기값(선택사항) ) : 

콜백함수에서 return한 값이 이전값이 된다. 이후값은 배열의 요소가 된다. 그리고 이전값의 초기값을 작성하지 않는다면 배열의 첫번째 요소가 첫 이전값이 된다.

 

 

이전값인 prev의 초기값을 0으로 설정했다. 그리고 prev(이전값)+curr.score(이후값) 을 return해줌으로써 이를 다음 prev값으로 설정했다. 따라서 0 + 45 + 80 + 90 + 66 + 88 = 369 가 반환된다.

 

 

 

▶reduceRight( 콜백함수 ) : 배열의 요소가 역순으로 누적

 

 

 

 

 

12. 정렬

 

▶sort( (a,b) => a - b ) : 오름차순 정렬

▶sort( (a,b) => b - a ) : 내림차순 정렬