Array Method -2

간단한 메소드들을 앞전에 다루고 내가 고전하고있는 남은 메소드들을 적어보면

 

every / some / find / findIndex / filter / forEach /map / reduce / sort 

 

* reduce <-(얘가 제일 많이쓰는데 내 기준 얘가 제일 어렵다..)

여기 2편에선 위 메소드의 대한 간단한 사용법과 기능을 다루고 다음 번엔 사용구조를 직접 작성하며 복습해볼 예정!

 

---

• Array.every()

배열 안의 모든 요소가 주어진 함수를 통과하는지 테스트한다. 모든 요소가 통과하면 true 하나라도 통과하지 못하면 false 를 리턴한다.

빈배열의 경우 무조건 true를 반환한다.

callback함수는  1번 element , 2번 index , 3번 array를 인자로 갖는다.

 

let arr1 = [ 20 , 30 , 40 , 50 ]
     
function greaterThanTen(elements) {      //    (주어진 함수의 조건은 10보다 큰 수)
  return elements > 10 ;                 //         (모든 원소가 통과한다)
}

arr1.every(greaterThanTen) = true

 

---

• Array.some()

배열 안의 어떠한 요소라도 주어진 함수를 통과하는지 테스트한다. 하나라도 통과하면 true 모든 요소가 통과하지 못하면 false 를 리턴한다.

빈배열의 경우 무조건 false를 반환한다.

callback함수는  1번 element , 2번 index , 3번 array를 인자로 갖는다.

 

let arr2 = [ 1 , 2 , 3 , 5 , 7 , 9 ]

function even(elements) {         //      (주어진 함수의 조건은 짝 수)
  return elements % 2 === 0 ;     //        (하나의 원소가 통과한다)
}

arr2.some(even) = true

 

---

• Array.find()

주어진 함수를 만족하는 첫 번째 요소의 값을 반환하고 없다면 undfined를 반환한다.

callback함수는  1번 element , 2번 index , 3번 array를 인자로 갖는다.

 

let arr3 = [  1 , 2 , 4 , 6 ]

function even(elements) {       //            (주어진 함수의 조건은 짝 수)
  return elements % 2 === 0 ;   //   (2,4,6의 원소가 통과한다 , 제일 첫번 째인 2를 리턴)
}

arr2.find(even) = 2

---

• Array.findIndex()

주어진 함수를 만족하는 첫 번째 요소의 인덱스를 반환하고 없다면 -1 을 반환한다.

callback함수는  1번 element , 2번 index , 3번 array를 인자로 갖는다.

 

let arr3 = [  1 , 2 , 4 , 6 ]

function even(elements) {        //          (주어진 함수의 조건은 짝 수)
  return elements % 2 === 0 ;    //    (2,4,6의 원소가 통과한다 , 2의 인덱스를 리턴)
}

arr2.findIndex(even) = 1

 

---

• Array.filter()

주어진 함수를 통과하는 요소를 모아 새로운 배열로 만들어 반환합니다.
callback함수는  1번 element , 2번 index , 3번 array를 인자로 갖는다.

 

let arr4 = [ 5 , 10 , 15 , 20 , 25 ]
     
function greaterThanTen(elements) {    //     (주어진 함수의 조건은 10보다 큰 수)
  return elements > 10 ;               //       (15,20,25의 원소가 통과한다)
}

arr1.filter(greaterThanTen) = [ 15 , 20 , 25 ]

---

• Array.forEach()

주어진 함수를 배열의 각 요소에 대해 실행한다.  반복문을 forEach로 구현할 수있다. 

callback함수는  1번 element , 2번 index , 3번 array를 인자로 갖는다. 각 요소를 리턴할 수도 있다.

 

let arr5 = [ 1 , 2 , 3 ]
     
arr1.forEach( function (elements,index) {    //     (elements와 index를 호출)     
  return elements ;                          //   (elements와 index에 접근가능하다)     
}) =   1                                                                                                         
   //  2                                                                                                                
   //  3                                                                                                                


arr1.forEach( function (elements,index) {
  return index ;
}) =   0
   //  1
   //  2

 

---

• Array.map()

배열의 모든 요소에 각각 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.
원배열은 그대로 유지된다.

callback함수는  1번 element , 2번 index , 3번 원본 array를 인자로 갖는다.

 

let arr6 = [ 1 , 2 , 3 , 4 , 5 ]
     
arr6.map( function (elements) {           
  return elements * 2 ;          //     ( 각 엘리멘트가 모두 통과한 값이 
})  = [ 2 , 4 , 6 , 8 , 10 ]     //          새 배열에 리턴 된다. )

arr6  = [ 1 , 2 , 3 , 4 , 5 ]

 

 

화살표함수 로 더 편하게 map을 사용할 수 있다. 다른 메소드들도 물론 사용가능하다.
     

  

arr6.map( x => x * 2 ) = [ 2 , 4 , 6 , 8 , 10 ]

 

---

• Array.reduce()

배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고 하나의 결과값을 반환합니다.

ruduce함수는 네 개의 인자를 받는다.

1번 Accumulator   : 누적값은 콜백의 반환값을 누적한다. 초기값(initialValue)이 주어진 경우 누적값의 첫번 째는 초기값이다.

2번 CurrentValue  : 처리할 현재 요소.

3번 CurrentIndex  : 처리할 현재 요소의 인덱스. 초기값(initialValue)이 있으면 0부터 , 아니면 1부터 시작한다.

4번 array reduce   : 호출한 배열.

 

initialValue 최초호출에서 첫 번째 인수를 제공하는 값. 없을 경우 배열의 첫 번째 요소를 사용한다.

                    ㄴ 빈 배열에서 초기값 없이 reduce함수를 호출하면 오류가 발생한다.

 

let arr6 = [ 1 , 2 , 3 , 4 , 5 ]

arr6.reduce( function ( acc , curr  ) {                                                  
  return acc + curr                                                                              
}, 0 )  =  15                                

// 콜백함수호출마다 acc의 값은 1 , 3 , 6 , 10  
//              반환 값은  3 , 6 , 10 , 15  


// 초기값 유무의 차이

      
arr6.reduce( function ( acc , curr  ) {  
  return acc + curr
}, 5 )  =  20

// 콜백함수호출마다 acc의 값은  5 , 6 , 8 , 11 , 15 
//              반환 값은   6 , 8 , 11 , 15 , 20                                                                                                        

 

reduce() 의 경우 인자로 받는 값들이나 reducer를 이용해서 다른 함수의 기능을 수행할 수 있고 더욱 직관적인
코드를 작성할 수 있는 장점이 있다.

---

• Array.sort()

배열의 요소들을 적절한 위치에 정렬한 후 리턴한다. 정렬방식은 구현방식에 따라 다르게 나타낼 수 있다.

첫 번째 인수가 두 번째 인수보다 작을 경우 - 값 ,  첫 번째 인수가 두 번째 인수보다 클 경우 + 값으로 리턴된다.

 

let arr7 = [ 2 , 3 , 1 , 5 , 11 , 12 ]     //   ( 일반적으로 호출시 SCII 문자순서로 정렬 )
arr7.sort() =   [ 1 , 11 , 12 , 2 , 3 , 5 ]                                          

let arr8 = [ 'e' , 'a' , 'd' , 'b' , 'c' ]  //    ( abcd... / ㄱㄴㄷ...순으로 정렬 )
arr8.sort() = [ 'a' , 'b' , 'c' , 'd' . 'e' ]

                                       

let arr7 = [ 2 , 3 , 1 , 5 , 11 , 12 ]       

// ( 오름차순 정렬 )
arr7.sort( function ( a , b ) {                                               
             return  a - b ;                                                   
            })   =  [ 1 , 2 , 3 , 5 , 11 , 12 ]                                                 

// ( 내림차순 정렬 ) 
arr7.sort( function ( a , b ) {
             return  b - a ;    
            })   =  [ 12  , 11 , 5 , 3 , 2 , 1 ]

---

 

앞으로 계속 친해져야할 메소드들이기에 계속해서 복습하고 서칭할 예정이다.